admin/korean-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changes

Browse Source
This commit is contained in:
admin
2025-11-03 13:35:27 +05:45
parent 8dc84a6119
commit ecfd29ff2e
3 changed files with 84 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/lib/components/layouts/Navbar.svelte
View File

@@ -66,12 +66,16 @@
</a>
</div>
<div class="flex w-full items-center gap-2 max-lg:order-3 max-lg:w-full">
<Sheet.Root>
<Sheet.Trigger>
<Sheet.Root {open}>
<Sheet.Trigger
onclick={() => {
open = true;
}}
>
<!-- <SlidersHorizontal class="md:hidden" strokeWidth={1.8} size={20} /> -->
<p class="text-sm font-medium md:hidden">Categories</p>
</Sheet.Trigger>
<Sheet.Content side="left" class="flex w-full flex-col gap-8 sm:w-full">
<Sheet.Content side="left" class="flex w-full flex-col gap-8 px-4 sm:w-full">
<Sheet.Header class="text-start">
<Sheet.Title>Categories</Sheet.Title>
</Sheet.Header>
@@ -83,7 +87,13 @@
<!-- {#await category then categoryItem} -->
{#each category?.categories as item}
{#if item?.status !== 'draft'}
<a href="/category/{item?.id}/{item?.slug}" class="text-nowrap">{item?.title}</a>
<a
href="/category/{item?.id}/{item?.slug}"
class="text-nowrap"
onclick={() => {
open = false;
}}>{item?.title}</a
>
{/if}
{/each}
<!-- {/await} -->

82
src/routes/brand/+page.svelte
View File

@@ -48,45 +48,49 @@
];
</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>
<div
class="mx-auto my-12 flex w-full max-w-screen-2xl flex-col gap-6 px-12 py-4 max-sm:my-4 max-sm:h-auto max-sm:max-w-full max-sm:flex-wrap max-sm:px-6"
>
<Tabs.Root
value={brands[0]?.name.slice(0, 1).toLowerCase()}
class="gap-12"
orientation={'vertical'}
>
<Tabs.List class="flex !h-auto w-full flex-wrap gap-2 bg-transparent">
{#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 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.Root>
</div>
</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>

29
src/routes/category/[categoryType]/[[slug]]/+page.svelte
View File

@@ -218,7 +218,32 @@
{#await data?.productCategory}
<div></div>
{:then category}
{#if category?.attributes.length > 0}
{#each originalFilters as attribute}
<div class="flex flex-col gap-2.5">
<Sheet.Title class="text-start font-normal">{attribute.title}</Sheet.Title>
<!-- <p class="text-sm font-semibold">{attribute.title}</p> -->
<ul class="flex flex-col gap-1.5">
{#each attribute.values as value, index}
<li class="flex items-center gap-2">
<Checkbox
id={`${attribute.title}-${index}`}
checked={isChecked('attributes[]', value.id)}
onCheckedChange={(e) => handleCheckboxChange('attributes[]', value.id, e)}
/>
<!-- disabled={!currentFilters.some(
(f) =>
f.title === attribute.title && f.values.some((v) => v.value === value.id)
)} -->
<p class="text-sm">{value.value}</p>
{#if !currentFilters.some((f) => f.title === attribute.title && f.values.some((v) => v.value === value.value))}
<span class="text-xs text-gray-400">(0)</span>
{/if}
</li>
{/each}
</ul>
</div>
{/each}
<!-- {#if category?.attributes.length > 0}
{#each category?.attributes as attribute}
<Sheet.Title class="text-start font-normal">{attribute.title}</Sheet.Title>
<Sheet.Description>
@@ -232,7 +257,7 @@
</ul>
</Sheet.Description>
{/each}
{/if}
{/if} -->
{/await}
</Sheet.Header>
</Sheet.Content>