feature (website): add accodion to recipient selection faq page (#687)

* Add Accodion to FAQ section in recipient selection * Prettified Code! * Change styling of the rest of the page to match accordion * Add text-left to AccordionTrigger --------- Co-authored-by: DarkMenacer <[email protected]>
socialincome-san · Dec 23, 2023 · 95611fa · 95611fa
1 parent 0eca96e
commit 95611fa
Showing 1 changed file with 30 additions and 18 deletions.
diff --git a/website/src/app/[lang]/[region]/(website)/transparency/recipient-selection/page.tsx b/website/src/app/[lang]/[region]/(website)/transparency/recipient-selection/page.tsx
@@ -2,7 +2,15 @@ import { DefaultPageProps } from '@/app/[lang]/[region]';
 import { DrawCard } from '@/app/[lang]/[region]/(website)/transparency/recipient-selection/draw-card';
 import { loadPastDraws } from '@/app/[lang]/[region]/(website)/transparency/recipient-selection/state';
 import { Translator } from '@socialincome/shared/src/utils/i18n';
-import { BaseContainer, Card, Typography } from '@socialincome/ui';
+import {
+	Accordion,
+	AccordionContent,
+	AccordionItem,
+	AccordionTrigger,
+	BaseContainer,
+	Card,
+	Typography,
+} from '@socialincome/ui';
 
 export default async function Page({ params: { lang } }: DefaultPageProps) {
 	const pastDraws = await loadPastDraws();
@@ -18,33 +26,33 @@ export default async function Page({ params: { lang } }: DefaultPageProps) {
 					<Typography as="h1" weight="bold" size="4xl">
 						{translator.t('title')}
 					</Typography>
-					<Typography className="mt-4" dangerouslySetInnerHTML={{ __html: translator.t('introduction') }} />
+					<Typography size="sm" className="mt-4" dangerouslySetInnerHTML={{ __html: translator.t('introduction') }} />
 				</div>
 				<div className="space-y-4">
 					<div>
-						<Typography as="h2" size="xl" weight="bold">
+						<Typography as="h2" size="lg" weight="bold">
 							{translator.t('selection-process.step-1.title')}
 						</Typography>
-						<Typography as="h2" className="mt-2">
+						<Typography as="h4" size="sm" className="mt-2">
 							{translator.t('selection-process.step-1.text')}
 						</Typography>
 					</div>
 					<div>
-						<Typography as="h2" size="xl" weight="bold">
+						<Typography as="h2" size="lg" weight="bold">
 							{translator.t('selection-process.step-2.title')}
 						</Typography>
-						<Typography as="h2" className="mt-2">
+						<Typography as="h4" size="sm" className="mt-2">
 							{translator.t('selection-process.step-2.text')}
 						</Typography>
 					</div>
 					<Card className="mx-auto max-w-xl p-4">
-						<Typography>{translator.t('selection-process.step-2.card')}</Typography>
+						<Typography size="sm">{translator.t('selection-process.step-2.card')}</Typography>
 					</Card>
 					<div>
-						<Typography as="h2" size="xl" weight="bold">
+						<Typography as="h2" size="lg" weight="bold">
 							{translator.t('selection-process.step-3.title')}
 						</Typography>
-						<Typography as="h2" className="mt-2">
+						<Typography as="h4" size="sm" className="mt-2">
 							{translator.t('selection-process.step-3.text')}
 						</Typography>
 					</div>
@@ -56,22 +64,26 @@ export default async function Page({ params: { lang } }: DefaultPageProps) {
 					{translator.t('faq.title')}
 				</Typography>
 				<div className="space-y-4">
-					{translator.t<{ question: string; answer: string }[]>('faq.questions').map(({ question, answer }, index) => (
-						<div key={index}>
-							<Typography as="h3" size="xl" weight="bold">
-								{question}
-							</Typography>
-							<Typography as="p" className="mt-2" dangerouslySetInnerHTML={{ __html: answer }} />
-						</div>
-					))}
+					<Accordion type="single" collapsible className="w-full">
+						{translator
+							.t<{ question: string; answer: string }[]>('faq.questions')
+							.map(({ question, answer }, index) => (
+								<AccordionItem value={question} key={index}>
+									<AccordionTrigger className="text-left">{question}</AccordionTrigger>
+									<AccordionContent>
+										<Typography as="p" dangerouslySetInnerHTML={{ __html: answer }} />
+									</AccordionContent>
+								</AccordionItem>
+							))}
+					</Accordion>
 				</div>
 			</div>
 
 			<div className="space-y-8">
 				<Typography as="h2" size="2xl" weight="bold">
 					{translator.t('past-draws')}
 				</Typography>
-				<Typography>{translator.t('past-draws-description')}</Typography>
+				<Typography size="sm">{translator.t('past-draws-description')}</Typography>
 				<div className="mx-auto max-w-3xl space-y-4">
 					{pastDraws.map((draw, index) => (
 						<DrawCard