78 lines
3.0 KiB
JavaScript
78 lines
3.0 KiB
JavaScript
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'} preview={false} />
|
|
</div>
|
|
<div className={'absolute top-1 right-0 z-0'}>
|
|
<Image src={'/assets/backgrounds/cloud-right.svg'} alt={'cloud-right'} preview={false} />
|
|
</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} preview={false} />
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Ask;
|