feat(ui/web): update component used for frequently asked questions

Signed-off-by: Jordan Shatford <[email protected]>

apps/web/src/lib/utils/faq.ts

@@ -1,14 +1,10 @@
-import config from '$lib/config';
-
-export const websiteName = config.about.hostname;
-
 export const faqs: {
 	title: string;
-	description?: string;
+	description: string;
 }[] = [
 	{
-		title: `Is ${websiteName} free to use?`,
-		description: `Yes, ${websiteName} is completely free to use as long as you permissions to do so with any copyright material.`
+		title: `Is this site free to use?`,
+		description: `Yes, it is completely free to use as long as you permissions to do so with any copyright material.`
 	},
 	{
 		title: 'Is there a limit to the number of videos I can convert?',
@@ -37,7 +33,7 @@ export const faqs: {
 	},
 	{
 		title: 'Can I convert videos on my mobile device?',
-		description: `Yes, ${websiteName} supports converting and downloading files on mobile devices.`
+		description: `Yes, this site supports converting and downloading files on mobile devices.`
 	},
 	{
 		title: 'My download is stuck on (waiting, downloading, processing), what should I do?',

apps/web/src/routes/faq/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Title, Description, List } from '@yd/ui';
+	import { Title, Description, Faq } from '@yd/ui';
 	import { faqs } from '$lib/utils/faq';
 	import config from '$lib/config';
 </script>
@@ -11,5 +11,9 @@
 <div>
 	<Title>FAQ</Title>
 	<Description>Frequently Asked Questions</Description>
-	<List items={faqs} />
+	<div class="space-y-4 py-8">
+		{#each faqs as faq (faq.title)}
+			<Faq question={faq.title} answer={faq.description} />
+		{/each}
+	</div>
 </div>

packages/ui/src/lib/components/Faq.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { MinusCircleIcon, PlusCircleIcon } from '../icons';
+	import IconButton from './IconButton.svelte';
+
+	export let question: string;
+	export let answer: string;
+
+	let open: boolean = false;
+</script>
+
+<details
+	class="rounded-lg bg-zinc-50 p-4 dark:bg-zinc-800 [&_summary::-webkit-details-marker]:hidden"
+	{open}
+>
+	<summary
+		class="flex cursor-pointer items-center justify-between gap-1.5 text-zinc-900 dark:text-white"
+	>
+		<h2 class="font-medium">
+			{question}
+		</h2>
+		<IconButton
+			src={open ? MinusCircleIcon : PlusCircleIcon}
+			on:click={() => (open = !open)}
+			class="h-10 w-10"
+		/>
+	</summary>
+	{#if open}
+		<p class="mt-4 text-sm leading-relaxed text-zinc-600 dark:text-zinc-300">
+			{answer}
+		</p>
+	{/if}
+</details>

packages/ui/src/lib/icons.ts

@@ -14,6 +14,7 @@ export {
 	MinusCircle as MinusCircleIcon,
 	Moon as MoonIcon,
 	Plus as PlusIcon,
+	PlusCircle as PlusCircleIcon,
 	ArrowPath as RotateIcon,
 	Sun as SunIcon,
 	Trash as TrashIcon,

packages/ui/src/lib/index.ts

@@ -6,6 +6,7 @@ export { Description, List, Title } from './components/typography';
 export { default as Alert, type AlertVariants } from './components/Alert.svelte';
 export { default as Badge, type BadgeVariants } from './components/Badge.svelte';
 export { default as Confirm, type ConfirmVariants } from './components/Confirm.svelte';
+export { default as Faq } from './components/Faq.svelte';
 export { default as Footer } from './components/Footer.svelte';
 export { default as IconButton } from './components/IconButton.svelte';
 export { default as Select } from './components/Select.svelte';