95 lines
3.0 KiB
JavaScript
95 lines
3.0 KiB
JavaScript
"use client";
|
|
import React, { useEffect, useState } from "react";
|
|
import Image from "next/image";
|
|
import axios from "axios";
|
|
|
|
export default function Contact() {
|
|
const [data, setData] = useState(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState(null);
|
|
|
|
useEffect(() => {
|
|
async function fetchData() {
|
|
try {
|
|
setLoading(true);
|
|
const res = await axios.get("/api/get-component-data", {
|
|
params: { component_name: "Contact" },
|
|
});
|
|
setData(res.data.data);
|
|
} catch (err) {
|
|
setError("Failed to get Contact data");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
fetchData();
|
|
}, []);
|
|
|
|
if (loading) return <div className="text-center py-20">Loading...</div>;
|
|
if (error) return null;
|
|
if (!data) return null;
|
|
|
|
const title = data.title || "";
|
|
const subtitle = data.subtitle || "";
|
|
const description = data.description || "";
|
|
const image = data.image || "";
|
|
const contacts = Array.isArray(data.items)
|
|
? data.items.filter(item => item.item_title)
|
|
: [];
|
|
|
|
|
|
return (
|
|
<section className="w-full flex flex-col items-center bg-[#22b573] shadow-lg py-8 md:-mt-24 relative">
|
|
<div
|
|
className="absolute"
|
|
style={{
|
|
top: '0',
|
|
left: '-12px',
|
|
width: '12px',
|
|
height: '24px',
|
|
background: '#23272b',
|
|
clipPath: 'polygon(0 100%, 100% 0, 100% 100%)'
|
|
}}
|
|
></div>
|
|
<div className="flex flex-col items-center w-full px-2 md:px-4 mb-2">
|
|
<Image
|
|
className="mb-6"
|
|
alt="image"
|
|
width="183"
|
|
height="95"
|
|
src={image}
|
|
/>
|
|
<h2 className="!text-white pb-5 text-center">{subtitle}</h2>
|
|
</div>
|
|
<div className="w-full flex flex-col items-center px-2 md:px-4 mb-4">
|
|
{contacts.map((item, idx) => (
|
|
<div className="flex flex-row items-start mb-2 last:mb-0 w-full max-w-xs mx-auto" key={idx}>
|
|
<div className="mr-3 flex-shrink-0">
|
|
<div className="icon text-white">
|
|
{item.item_html_code && (
|
|
<span style={{ display: 'inline-block', width: '2rem', height: '2rem', filter: 'brightness(0) invert(1)' }}
|
|
dangerouslySetInnerHTML={{ __html: item.item_html_code }} />
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="flex-1">
|
|
{/(mail)/i.test(item.item_title) ? (
|
|
<p className="text-white text-left break-words">
|
|
{item.item_title}
|
|
<a href={`mailto:${item.item_title}`} className="!text-white hover:!underline">
|
|
{item.item_subtitle}
|
|
</a>
|
|
</p>
|
|
) : (
|
|
<p className="text-white text-left break-words">
|
|
{item.item_title} {item.item_subtitle}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|