107 lines
3.4 KiB
TypeScript
107 lines
3.4 KiB
TypeScript
|
import type { NextPage } from "next";
|
||
|
|
import Head from "next/head";
|
||
|
|
import { useTranslation } from "~/providers/I18nProvider";
|
||
|
|
import { Button } from "~/components/ui/button";
|
||
|
|
import {
|
||
|
|
Accordion,
|
||
|
|
AccordionContent,
|
||
|
|
AccordionItem,
|
||
|
|
AccordionTrigger,
|
||
|
|
} from "~/components/ui/accordion";
|
||
|
|
import { ComeFunziona } from "~/components/come_funziona";
|
||
|
|
|
||
|
|
const Guida: NextPage = () => {
|
||
|
|
const { t } = useTranslation();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Head>
|
||
|
|
<title>{t.heads.guida_titolo}</title>
|
||
|
|
<meta name="description" content={t.heads.main_description} />
|
||
|
|
</Head>
|
||
|
|
<main className="mx-auto w-full max-w-6xl px-2 py-5 md:px-8">
|
||
|
|
<div className="bg-primary/10 text-primary inline-block rounded-lg px-3 py-1 text-sm">
|
||
|
|
{t.guida}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<ComeFunziona />
|
||
|
|
<FAQSection />
|
||
|
|
</main>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
export default Guida;
|
||
|
|
|
||
|
|
const FAQSection = () => {
|
||
|
|
const { t } = useTranslation();
|
||
|
|
|
||
|
|
const handleScroll = (id: string) => {
|
||
|
|
document.getElementById(id)?.scrollIntoView({
|
||
|
|
behavior: "smooth",
|
||
|
|
});
|
||
|
|
window.history.replaceState({}, "", `${window.location.pathname}#${id}`);
|
||
|
|
};
|
||
|
|
|
||
|
|
if (!t.faq?.domande) {
|
||
|
|
return null; // Ensure translations are loaded before rendering
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<section className="px-4 py-12 md:px-6" id="faq">
|
||
|
|
<div className="mx-auto grid max-w-5xl items-center gap-6 py-12">
|
||
|
|
<div className="flex flex-col justify-center space-y-4 text-center">
|
||
|
|
<div className="space-y-2">
|
||
|
|
<h2 className="text-3xl font-bold tracking-tighter md:text-4xl">
|
||
|
|
{t.faq.titolo}
|
||
|
|
</h2>
|
||
|
|
<p className="text-muted-foreground mx-auto max-w-[600px] md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
|
||
|
|
{t.faq.descrizione}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex w-full max-w-6xl justify-between gap-5">
|
||
|
|
<div className="hidden flex-col gap-5 md:flex">
|
||
|
|
{t.faq.domande.map((item, index) => (
|
||
|
|
<Button
|
||
|
|
key={index}
|
||
|
|
variant="ghost"
|
||
|
|
className="justify-start text-lg font-semibold"
|
||
|
|
onClick={() => handleScroll(`faq-${item.id}`)}
|
||
|
|
>
|
||
|
|
{item.label}
|
||
|
|
</Button>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
<div className="flex w-full flex-col gap-5">
|
||
|
|
{t.faq.domande.map((item, index) => (
|
||
|
|
<Accordion
|
||
|
|
type="single"
|
||
|
|
collapsible
|
||
|
|
key={index}
|
||
|
|
//defaultValue="0"
|
||
|
|
className="relative w-full rounded-lg bg-neutral-50 p-4"
|
||
|
|
>
|
||
|
|
<div className="absolute -top-16" id={`faq-${item.id}`} />
|
||
|
|
<h3 className="text-2xl font-semibold">{item.label}</h3>
|
||
|
|
<div className="flex flex-col gap-1">
|
||
|
|
{item.qas.map((f, i) => (
|
||
|
|
<AccordionItem value={i.toString()} key={i}>
|
||
|
|
<AccordionTrigger className="text-left">
|
||
|
|
{f.title}
|
||
|
|
</AccordionTrigger>
|
||
|
|
<AccordionContent>
|
||
|
|
<p className="leading-relaxed">{f.description}</p>
|
||
|
|
</AccordionContent>
|
||
|
|
</AccordionItem>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</Accordion>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
};
|