93 lines
2.1 KiB
Svelte
93 lines
2.1 KiB
Svelte
<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>
|