122 lines
4.7 KiB
JavaScript
122 lines
4.7 KiB
JavaScript
"use client";
|
|
import React, { useEffect, useState } from "react";
|
|
import Image from "next/image";
|
|
import axios from "axios";
|
|
|
|
export default function Faqs() {
|
|
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: "Faqs" },
|
|
});
|
|
setData(res.data.data);
|
|
} catch (err) {
|
|
setError("获取Faqs数据失败");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
fetchData();
|
|
}, []);
|
|
|
|
if (loading) return <div className="text-center py-20">Loading...</div>;
|
|
if (error || !data) return null;
|
|
|
|
// 主表字段
|
|
const title = data.title || "Our Products";
|
|
const subtitle = data.subtitle || "";
|
|
const buttonText = data.button_text || "MORE";
|
|
const buttonLink = data.button_link || "#";
|
|
// 子表items
|
|
const items = Array.isArray(data.items) ? data.items.slice(0, 6) : [];
|
|
|
|
return (
|
|
<section id="snippet-1" className="wrapper !bg-[#ffffff] ">
|
|
<div className="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20">
|
|
<div className="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] items-stretch">
|
|
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] max-w-full !mt-[50px] flex flex-col justify-center min-h-[420px] bg-white p-6 md:p-10">
|
|
<figure className="m-0 p-0 flex justify-center">
|
|
<Image
|
|
className="w-full max-w-[380px] h-[260px] object-cover rounded-xl shadow-lg mb-6"
|
|
srcSet="/assets/img/illustrations/i5@2x.png 2x"
|
|
alt="image"
|
|
width="380"
|
|
height="260"
|
|
src={data.image}
|
|
/>
|
|
</figure>
|
|
<h2 className="font-extrabold text-3xl md:text-4xl mb-4 mt-2 leading-tight text-black truncate" title={data.p1 || title}>
|
|
{data.p1}
|
|
</h2>
|
|
{/* 描述 */}
|
|
<p>
|
|
{data.description}
|
|
</p>
|
|
{/* 按钮 */}
|
|
<a
|
|
href={buttonLink}
|
|
className="inline-flex items-center px-5 py-2 bg-[#1fc76f] rounded shadow hover:bg-[#1e9e4a] transition-colors duration-200 text-base font-semibold w-auto self-start"
|
|
style={{ color: "#f8fafc" }}
|
|
>
|
|
{buttonText}
|
|
<span className="ml-2">
|
|
<svg width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 13l5-4-5-4" stroke="#f8fafc" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
{/*/column */}
|
|
<div className="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] max-w-full !mt-[50px] flex flex-col justify-center min-h-[420px]">
|
|
<h2 className="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-3">
|
|
{title}
|
|
</h2>
|
|
<p className="lead text-[1rem] !mb-6 xxl:!pr-10">
|
|
{subtitle}
|
|
</p>
|
|
<div className="accordion accordion-wrapper" id="accordionExample-2">
|
|
{items.map((item, idx) => {
|
|
const headingId = `heading-${idx}`;
|
|
const collapseId = `collapse-${idx}`;
|
|
return (
|
|
<div className="card plain accordion-item" key={idx}>
|
|
<div className="card-header !mb-0 !p-[0_0_.8rem_0] !border-0 !bg-inherit" id={headingId}>
|
|
<button
|
|
className={`hover:!text-[#1fc76f] accordion-button${idx === 0 ? "" : " collapsed"}`}
|
|
data-bs-toggle="collapse"
|
|
data-bs-target={`#${collapseId}`}
|
|
aria-expanded={idx === 0 ? "true" : "false"}
|
|
aria-controls={collapseId}
|
|
>
|
|
{item.item_title}
|
|
</button>
|
|
</div>
|
|
<div
|
|
id={collapseId}
|
|
className={`accordion-collapse collapse${idx === 0 ? " show" : ""}`}
|
|
aria-labelledby={headingId}
|
|
data-bs-parent="#accordionExample-2"
|
|
>
|
|
<div className="card-body flex-[1_1_auto] !pb-4">
|
|
<p>{item.item_description}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
{/*/column */}
|
|
</div>
|
|
{/*/.row */}
|
|
</div>
|
|
{/* /.container */}
|
|
|
|
{/* /.container */}
|
|
</section>
|
|
);
|
|
}
|