Spaces:
Running
Running
File size: 4,770 Bytes
21a686e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 |
"use client";
import React, { useState } from "react";
import { AnimatePresence, motion } from "motion/react";
import { IconChevronDown, IconChevronUp } from "@tabler/icons-react";
import { cn } from "@/lib/utils";
const FAQs = [
{
question: "What is the purpose of this website?",
answer:
"This website is a place to help you find the best products and services in the world.",
},
{
question: "How do I contact support?",
answer:
"You can contact support by email at support@example.com or by phone at 123-456-7890.",
},
{
question: "How do I find the best products?",
answer:
"You can find the best products by searching for them on the search page or by browsing the categories.",
},
{
question: "Can I return a product?",
answer:
"Yes, you can return a product within 30 days of purchase. Please refer to our return policy for more details.",
},
{
question: "Do you offer international shipping?",
answer:
"Yes, we offer international shipping to most countries. Shipping fees and delivery times may vary depending on the destination.",
},
{
question: "How can I track my order?",
answer:
"You can track your order by logging into your account and visiting the order history page. You will also receive a tracking number via email once your order has shipped.",
},
];
export function SimpleFaqsWithBackground() {
const [open, setOpen] = useState<string | null>(null);
return (
<div className="mx-auto grid w-full max-w-7xl gap-4 px-4 py-20 md:px-8 md:py-40">
<h2 className="text-center text-4xl font-medium tracking-tight text-neutral-600 md:text-5xl dark:text-neutral-50">
Frequently asked questions
</h2>
<p className="mx-auto max-w-lg text-center text-base text-neutral-600 dark:text-neutral-50">
We are here to help you with any questions you may have. If you
don't find what you need, please contact us at{" "}
<a
href="mailto:support@example.com"
className="text-blue-500 underline"
>
support@example.com
</a>
</p>
<div className="mx-auto mt-10 w-full max-w-3xl">
{FAQs.map((faq, index) => (
<FAQItem
key={index}
question={faq.question}
answer={faq.answer}
open={open}
setOpen={setOpen}
/>
))}
</div>
</div>
);
}
const FAQItem = ({
question,
answer,
setOpen,
open,
}: {
question: string;
answer: string;
open: string | null;
setOpen: (open: string | null) => void;
}) => {
const isOpen = open === question;
return (
<div
className="shadow-input mb-8 w-full cursor-pointer rounded-lg bg-white p-4 dark:bg-neutral-900"
onClick={() => {
if (isOpen) {
setOpen(null);
} else {
setOpen(question);
}
}}
>
<div className="flex items-start">
<div className="relative mr-4 mt-1 h-6 w-6 flex-shrink-0">
<IconChevronUp
className={cn(
"absolute inset-0 h-6 w-6 transform text-black transition-all duration-200 dark:text-white",
isOpen && "rotate-90 scale-0"
)}
/>
<IconChevronDown
className={cn(
"absolute inset-0 h-6 w-6 rotate-90 scale-0 transform text-black transition-all duration-200 dark:text-white",
isOpen && "rotate-0 scale-100"
)}
/>
</div>
<div>
<h3 className="text-lg font-medium text-neutral-700 dark:text-neutral-200">
{question}
</h3>
<AnimatePresence mode="wait">
{isOpen && (
<motion.div
initial={{ height: 0 }}
animate={{ height: "auto" }}
exit={{ height: 0 }}
transition={{ duration: 0.2, ease: "easeOut" }}
className="overflow-hidden text-neutral-500 dark:text-neutral-400"
>
{answer.split("").map((line, index) => (
<motion.span
initial={{ opacity: 0, filter: "blur(5px)" }}
animate={{ opacity: 1, filter: "blur(0px)" }}
exit={{ opacity: 0, filter: "blur(0px)" }}
transition={{
duration: 0.2,
ease: "easeOut",
delay: index * 0.005,
}}
key={index}
>
{line}
</motion.span>
))}
</motion.div>
)}
</AnimatePresence>
</div>
</div>
</div>
);
};
|