initial commit

components/Ask/index.js

@@ -0,0 +1,77 @@
+import React, {useEffect, useState} from 'react';
+import {askRepository} from "../../repository/ask";
+import {Image} from "antd";
+import constraint from "../Constraint";
+
+const Ask = () => {
+    // const {data: contacts} = askRepository.api.getContacts();
+    const [contacts, setContacts] = useState();
+
+    useEffect(() => {
+        fetchData()
+    }, [])
+
+    const fetchData = async () => {
+        try {
+            const res = await askRepository.api.getContacts()
+            setContacts(res)
+        } catch (err) {
+            console.log(err)
+        }
+    }
+
+    const dataContact = [
+        {
+            title: "Telepon Customer Care",
+            no: contacts?.results?.phone,
+            timetable: contacts?.results?.phone_wording,
+            icon: "/assets/icons/phone.svg",
+            link: `tel:${contacts?.results?.phone}`
+        },
+        {
+            title: "Whatsapp Customer Care",
+            no: contacts?.results?.whatsapp,
+            timetable: contacts?.results?.whatsapp_wording,
+            icon: "/assets/icons/whatsapp.svg",
+            link: `https://wa.me/${contacts?.results?.whatsapp}`
+        },
+        {
+            title: "Email Customer Care",
+            no: contacts?.results?.email,
+            timetable: contacts?.results?.email_wording,
+            icon: "/assets/icons/email.svg",
+            link: `mailto:${contacts?.results?.email}`
+        }
+    ]
+
+    return (
+        <div className={'relative pb-10 mt-5 w-full'}>
+            <div className={'text-center'}>
+                <h3 className={'text-lg font-bold z-10 pt-16'}>Tanyakan ke <span className={'text-[#FFB500]'}>Kami</span></h3>
+                <p className={'z-10 px-5'}>Customer Care kami siap membantu Anda jika Anda memiliki pertanyaan atau masalah dalam menggunakan
+                    aplikasi ini.</p>
+            </div>
+            <div className={'absolute top-3 left-0 z-0'}>
+                <Image src={'/assets/backgrounds/cloud-left.svg'} alt={'cloud-left'}/>
+            </div>
+            <div className={'absolute top-1 right-0 z-0'}>
+                <Image src={'/assets/backgrounds/cloud-right.svg'} alt={'cloud-right'}/>
+            </div>
+
+            <div className={'flex flex-col gap-4 m-5'}>
+                {dataContact.map((it, index) => (
+                    <a key={index} href={it.link} target={'_blank'} className={'flex flex-row justify-between gap-4 bg-white p-5 shadow-lg rounded-lg text-black z-10 hover:cursor-pointer hover:shadow-xl'} rel="noreferrer">
+                        <div className={'flex flex-col'}>
+                            <span>{it.title}</span>
+                            <span className={'font-bold'}>{it.no}</span>
+                            <span className={'text-xs text-[#9B9B9B]'}>{it.timetable}</span>
+                        </div>
+                        <Image src={it.icon} alt={'icon'}width={40} height={40} />
+                    </a>
+                ))}
+            </div>
+        </div>
+    )
+}
+
+export default Ask;