sprint-asia-custom-component 0.1.80 → 0.1.82

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sprint-asia-custom-component",
   "main": "dist/index.js",
-  "version": "0.1.80",
+  "version": "0.1.82",
   "private": false,
   "dependencies": {
     "@headlessui/react": "^1.7.18",

package/src/components/customphone/index.js

@@ -1,5 +1,4 @@
 import React from 'react'
-import "./style.css"
 import { IoIosBatteryFull, IoIosWifi, IoMdVolumeHigh } from "react-icons/io";
 import LogoPrezentHidden from "../../assets/images/logo_prezent_hidden.png"
 import LogoEmptyVoucher from "../../assets/images/logo_empty_voucher.png"
@@ -33,10 +32,10 @@ const CustomPhone = ({
     data,
  }) => {
   return (
-    <div className="iphone-frame">
+    <div className="w-[250px] h-[500px] rounded-[25px] border-[10px] border-black relative">
         <div className='flex justify-between'>
             <p className='absolute left-0 pt-1 pl-2 text-xs text-black ml-2'>09.41</p>
-            <div className="iphone-notch"></div>
+            <div className="w-[110px] h-[20px] bg-black rounded-b-[10px] absolute top-0 left-[calc(50%-55px)]"></div>
             <div className='absolute right-0 pt-1 pr-2'>
                 <div className='flex'>
                     <IoMdVolumeHigh className='w-3 h-3 text-black my-1'/>
@@ -45,7 +44,7 @@ const CustomPhone = ({
                 </div>
             </div>
         </div>
-        <div className="iphone-screen">
+        <div className="w-full h-full bg-white rounded-[15px] overflow-hidden">
             {
                 mode === "Empty" &&
                 <div className='h-full w-full bg-white flex justify-center items-center text-center'>
@@ -245,8 +244,8 @@ const CustomPhone = ({
                 </div>
             }
         </div>
-  </div>
-  )
+    </div>
+  );
 }
 
 export default CustomPhone

package/src/index.css

@@ -5,4 +5,14 @@
 
 * {
     font-family: "Inter", sans-serif;
+}
+
+.no-scrollbar {
+    overflow-y: scroll;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+}
+
+.no-scrollbar::-webkit-scrollbar {
+    display: none;
 }

package/src/index.js

@@ -87,6 +87,7 @@ import FilterDropdown from "./components/filter/filterDropdown";
 import Footer from "./components/footer";
 import Header from "./components/header";
 import TextEditor from "./components/texteditor";
+import CustomPhone from "./components/customphone";
 
 export {
   Header,
@@ -146,4 +147,5 @@ export {
   ModalDeposit,
   DescriptionFile,
   TextEditor,
+  CustomPhone
 };

package/src/templates/index.js

@@ -59,6 +59,7 @@ import DetailDivision from "../components/table/listTable/report/detaildivision"
 import CellModelFive from "../components/table/listTable/cellmodefive";
 import CellModelSix from "../components/table/listTable/cellmodesix";
 import CellModelSeven from "../components/table/listTable/cellmodelseven";
+import CustomPhone from "../components/customphone";
 
 const Templates = () => {
   const [startDate, setStartDate] = useState(null);
@@ -837,6 +838,14 @@ const Templates = () => {
         <Header title="Navbar" />
       </div>
 
+      <div className="flex my-4 justify-center">
+        <CustomPhone mode="Empty"/>
+        <CustomPhone mode="Whatsapp" data="Ini message"/>
+        <CustomPhone mode="SMS"  data="Ini message"/>
+        <CustomPhone mode="Email"  data="Ini message"/>
+        <CustomPhone mode="Voucher"/>
+      </div>
+
       <div>
         <TextEditor title="Description" />
       </div>
@@ -1815,6 +1824,7 @@ const Templates = () => {
         </tbody>
       </table>
     </div>
+
   );
 };
 

package/src/components/customphone/style.css

@@ -1,27 +0,0 @@
-/* src/components/iphone.css */
-.iphone-frame {
-    width: 250px; /* Perkecil ukuran dari 375px */
-    height: 500px; /* Perkecil ukuran dari 812px */
-    border-radius: 25px; /* Perkecil radius dari 40px */
-    border: 10px solid #000; /* Perkecil border dari 16px */
-    position: relative;
-  }
-  
-  .iphone-notch {
-    width: 110px; /* Perkecil ukuran dari 210px */
-    height: 20px; /* Perkecil ukuran dari 30px */
-    background: #000;
-    border-radius: 0px 0px 10px 10px;
-    position: absolute;
-    top: 0px; /* Perkecil ukuran dari -16px */
-    left: calc(50% - 55px); /* Perkecil ukuran dari 105px */
-  }
-  
-  .iphone-screen {
-    width: 100%;
-    height: 100%;
-    background: #fff;
-    border-radius: 15px; /* Perkecil radius dari 24px */
-    overflow: hidden;
-  }
-