60 lines
2.2 KiB
TypeScript
60 lines
2.2 KiB
TypeScript
|
"use client";
|
|||
|
|
import React, { useState } from "react";
|
|||
|
|
|
|||
|
|
interface FAQItem {
|
|||
|
|
question: string;
|
|||
|
|
answer: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const FAQS: React.FC = () => {
|
|||
|
|
const faqs: FAQItem[] = [
|
|||
|
|
{
|
|||
|
|
question: "APA SAJA KONTEN-KONTEN YANG ADA DI MEDIAHUB DAN KATEGORI DI DALAMNYA?",
|
|||
|
|
answer: "MediaHub memiliki beragam konten seperti berita, video, dan dokumen yang dikategorikan dalam topik seperti edukasi, hiburan, dan informasi terkini.",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
question: "BAGAIMANA KONTEN DARI MEDIAHUB DAPAT DIUNDUH?",
|
|||
|
|
answer: "Anda dapat mengunduh konten dengan klik tombol unduh yang tersedia pada setiap konten di halaman MediaHub.",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
question: "SIAPA SAJA YANG DAPAT MENDAFTARKAN DIRI SEBAGAI PENGGUNA MEDIAHUB?",
|
|||
|
|
answer: "Semua orang yang memiliki minat terhadap konten di MediaHub dapat mendaftar sebagai pengguna, baik untuk personal maupun profesional.",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
question: "APA ITU MEDIAHUB? DAN APA SAJA FITUR YANG ADA DI DALAMNYA?",
|
|||
|
|
answer: "MediaHub adalah platform yang menyediakan berbagai konten informatif dan edukatif. Fitur utama meliputi pencarian, pengunduhan, dan personalisasi konten.",
|
|||
|
|
},
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
const [openIndex, setOpenIndex] = useState<number | null>(null);
|
|||
|
|
|
|||
|
|
const toggleFAQ = (index: number) => {
|
|||
|
|
setOpenIndex(openIndex === index ? null : index);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="max-w-3xl mx-auto p-6">
|
|||
|
|
{/* Header */}
|
|||
|
|
<div className="flex items-center justify-center mb-6">
|
|||
|
|
<img src="/assets/icons-faqs.png" alt="Faqs" />
|
|||
|
|
<h2 className="ml-4 text-xl font-bold text-gray-800">Frequently Asked Questions</h2>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* FAQS Items */}
|
|||
|
|
<div className="space-y-4">
|
|||
|
|
{faqs.map((faq, index) => (
|
|||
|
|
<div key={index} className="border-b border-gray-300 pb-2 cursor-pointer">
|
|||
|
|
<div className="flex justify-between items-center" onClick={() => toggleFAQ(index)}>
|
|||
|
|
<h3 className="text-sm font-semibold text-gray-800">{faq.question}</h3>
|
|||
|
|
<span className="text-gray-500 text-xl">{openIndex === index ? "−" : "+"}</span>
|
|||
|
|
</div>
|
|||
|
|
{openIndex === index && <p className="text-gray-600 mt-2 text-sm">{faq.answer}</p>}
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default FAQS;
|