feat: brand page

src/routes/brand/+page.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	import * as Tabs from '$lib/components/ui/tabs/index.js';
+	import { metaTitle } from '$lib/stores/metaTitle.svelte.js';
+	$metaTitle.title = 'Brands';
+	let { data } = $props();
+
+	let brands = $state<[{ id: Number; name: string; image: string }]>([
+		{ id: 0, name: '', image: '' }
+	]);
+
+	$effect(() => {
+		data?.brand
+			?.then((e) => {
+				brands = e.brand;
+			})
+			.catch((e) => console.log(e));
+	});
+
+	$inspect(brands);
+
+	const alphabets = [
+		'a',
+		'b',
+		'c',
+		'd',
+		'e',
+		'f',
+		'g',
+		'h',
+		'i',
+		'j',
+		'k',
+		'l',
+		'm',
+		'n',
+		'o',
+		'p',
+		'q',
+		'r',
+		's',
+		't',
+		'u',
+		'v',
+		'w',
+		'x',
+		'y',
+		'z'
+	];
+</script>
+
+<div class="mx-auto my-12 flex w-full max-w-screen-2xl flex-col gap-6 px-12 py-4">
+	<div>
+		<Tabs.Root value={brands[0]?.name.slice(0, 1).toLowerCase()} class="flex flex-col gap-12">
+			<Tabs.List class="flex-wrap gap-2 bg-transparent">
+				{#each alphabets as letter}
+					<!-- {#each brands as brand} -->
+					<!-- {#if letter === brand?.name.slice(0, 1).toLowerCase()} -->
+					<Tabs.Trigger
+						disabled={!brands.some((b) => b.name.slice(0, 1).toLowerCase() === letter)}
+						value={letter}
+						class="h-12 w-12 cursor-pointer rounded-sm bg-gray-100 data-[state=active]:bg-primary data-[state=active]:text-white"
+						>{letter.toUpperCase()}</Tabs.Trigger
+					>
+					<!-- {/if} -->
+					<!-- {/each} -->
+				{/each}
+			</Tabs.List>
+			{#each alphabets as letter}
+				{#each brands as brand}
+					{#if letter === brand?.name.slice(0, 1).toLowerCase()}
+						<Tabs.Content value={letter} class="grid grid-cols-5 gap-4">
+							<a href={`/category/brand/${brand?.id}`}>
+								<div
+									class="flex w-full flex-col gap-4 rounded-md border border-gray-200 p-2 hover:shadow-md hover:transition-all hover:duration-200"
+								>
+									<img
+										src={brand?.image}
+										alt={brand?.name}
+										class="aspect-square rounded-sm object-contain object-center"
+									/>
+									<p class="text-center text-lg">
+										{brand?.name}
+									</p>
+								</div>
+							</a>
+						</Tabs.Content>
+					{/if}
+				{/each}
+			{/each}
+		</Tabs.Root>
+	</div>
+</div>