complated order
This commit is contained in:
Samandar Turgunboyev
@@ -1,6 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import { cart_api } from '@/features/cart/lib/api';
|
||||
import { category_api } from '@/shared/config/api/category/api';
|
||||
import { Link, useRouter } from '@/shared/config/i18n/navigation';
|
||||
import { useCartId } from '@/shared/hooks/cartId';
|
||||
import formatPhone from '@/shared/lib/formatPhone';
|
||||
@@ -18,7 +19,6 @@ import {
|
||||
SheetTrigger,
|
||||
} from '@/shared/ui/sheet';
|
||||
import { banner_api } from '@/widgets/welcome/lib/api';
|
||||
import { categoryList } from '@/widgets/welcome/lib/data';
|
||||
import { userStore } from '@/widgets/welcome/lib/hook';
|
||||
import { PopoverTrigger } from '@radix-ui/react-popover';
|
||||
import { useMutation, useQuery } from '@tanstack/react-query';
|
||||
@@ -27,6 +27,7 @@ import {
|
||||
Facebook,
|
||||
Heart,
|
||||
Instagram,
|
||||
LayoutGrid,
|
||||
Mail,
|
||||
MenuIcon,
|
||||
Phone,
|
||||
@@ -35,6 +36,7 @@ import {
|
||||
ShoppingCart,
|
||||
Twitter,
|
||||
User,
|
||||
XIcon,
|
||||
} from 'lucide-react';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import Image from 'next/image';
|
||||
@@ -69,6 +71,14 @@ const Navbar = () => {
|
||||
queryFn: () => banner_api.getMe(),
|
||||
});
|
||||
|
||||
const { data: category } = useQuery({
|
||||
queryKey: ['category_list'],
|
||||
queryFn: () => category_api.getCategory({ page: 1, page_size: 99 }),
|
||||
select(data) {
|
||||
return data.data;
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (me) {
|
||||
setUser(me.data);
|
||||
@@ -392,7 +402,7 @@ const Navbar = () => {
|
||||
</Sheet>
|
||||
</div>
|
||||
<div className="flex-1 flex gap-3">
|
||||
{/* <Button
|
||||
<Button
|
||||
variant={'outline'}
|
||||
className="h-10 max-lg:hidden cursor-pointer"
|
||||
onClick={() => {
|
||||
@@ -409,7 +419,7 @@ const Navbar = () => {
|
||||
<LayoutGrid className="size-4 text-foreground" />
|
||||
)}
|
||||
<p className="text-foreground">Kataloglar</p>
|
||||
</Button> */}
|
||||
</Button>
|
||||
|
||||
<div className="relative w-full max-lg:hidden">
|
||||
<Input
|
||||
@@ -483,54 +493,58 @@ const Navbar = () => {
|
||||
<div />
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
className="w-[100vw] !p-0 h-[100vh] rounded-b-xl border-t-2 border-blue-500"
|
||||
className="w-[100vw] !p-0 h-[100vh] rounded-b-xl"
|
||||
onInteractOutside={() => setOpenToolbar(false)}
|
||||
>
|
||||
<div className="flex h-[90vh]">
|
||||
<div className="border-r border-slate-200 w-[20%] py-3 flex flex-col gap-2 px-3 overflow-y-auto scrollbar-thin bg-slate-50">
|
||||
{categoryList.map((e, index) => {
|
||||
const isActive = active?.name === e.name;
|
||||
{category &&
|
||||
category.map((e, index) => {
|
||||
const isActive = active?.name === e.name;
|
||||
|
||||
return (
|
||||
<Button
|
||||
key={index}
|
||||
variant="secondary"
|
||||
onMouseEnter={() => setActive(e)}
|
||||
onClick={() => setActive(e)}
|
||||
className={`flex justify-between items-center cursor-pointer px-4 h-14 rounded-xl transition-all duration-300 ${
|
||||
isActive
|
||||
? 'bg-blue-100 border border-blue-400'
|
||||
: 'hover:bg-slate-100 border border-transparent'
|
||||
}`}
|
||||
>
|
||||
<div className="flex gap-3 items-center">
|
||||
<div
|
||||
className={`p-1.5 rounded-lg ${isActive ? 'bg-white' : 'bg-white'}`}
|
||||
>
|
||||
<Image
|
||||
src={e.image || '/placeholder.svg'}
|
||||
alt={e.name}
|
||||
unoptimized
|
||||
className="w-5 h-5 object-contain"
|
||||
/>
|
||||
</div>
|
||||
<p
|
||||
className={`text-sm font-medium ${isActive ? 'text-blue-700' : 'text-slate-700'}`}
|
||||
>
|
||||
{e.name}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ChevronRight
|
||||
className={`size-5 transition-transform duration-300 ${
|
||||
return (
|
||||
<Button
|
||||
key={index}
|
||||
variant="secondary"
|
||||
onMouseEnter={() => setActive(e)}
|
||||
onClick={() => setActive(e)}
|
||||
className={`flex justify-between items-center cursor-pointer px-4 h-14 rounded-xl transition-all duration-300 ${
|
||||
isActive
|
||||
? 'rotate-90 text-blue-600'
|
||||
: 'text-slate-400'
|
||||
? 'bg-blue-100 border border-blue-400'
|
||||
: 'hover:bg-slate-100 border border-transparent'
|
||||
}`}
|
||||
/>
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
>
|
||||
<div className="flex gap-3 items-center min-w-0">
|
||||
<div className={`p-1.5 rounded-lg bg-white shrink-0`}>
|
||||
<Image
|
||||
src={e.image || '/placeholder.svg'}
|
||||
alt={e.name}
|
||||
width={500}
|
||||
height={500}
|
||||
unoptimized
|
||||
className="w-5 h-5 object-contain"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p
|
||||
className={`text-sm font-medium truncate ${
|
||||
isActive ? 'text-blue-700' : 'text-slate-700'
|
||||
}`}
|
||||
>
|
||||
{e.name}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ChevronRight
|
||||
className={`size-5 transition-transform duration-300 ${
|
||||
isActive
|
||||
? 'rotate-90 text-blue-600'
|
||||
: 'text-slate-400'
|
||||
}`}
|
||||
/>
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="w-[80%] overflow-y-auto p-8 scrollbar-thin bg-white">
|
||||
@@ -538,21 +552,30 @@ const Navbar = () => {
|
||||
{active?.name}
|
||||
</h3>
|
||||
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
{active?.subCategories.map((sub, index) => (
|
||||
<Button
|
||||
key={index}
|
||||
onClick={() => {
|
||||
setCloseToolbar(false);
|
||||
router.push(`/category/${active.name}/${sub.name}`);
|
||||
}}
|
||||
variant="outline"
|
||||
className="justify-start h-12 cursor-pointer border border-slate-200 hover:border-blue-400 hover:bg-blue-50 transition-all text-slate-700 hover:text-blue-700 font-medium rounded-xl bg-transparent"
|
||||
>
|
||||
{sub.name}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
{active && active?.product_types?.length > 0 ? (
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
{active.product_types.map((sub, index) => (
|
||||
<Button
|
||||
key={index}
|
||||
onClick={() => {
|
||||
setCloseToolbar(false);
|
||||
router.push(`/category/${active.id}/${sub.id}`);
|
||||
}}
|
||||
variant="outline"
|
||||
className="justify-start h-12 border border-slate-200 hover:border-blue-400 hover:bg-blue-50 transition-all rounded-xl"
|
||||
>
|
||||
{sub.name}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center h-[50vh] text-slate-400">
|
||||
<p className="text-lg font-medium">
|
||||
{t('Bu kategoriyada hozircha mahsulot yo‘q')}
|
||||
</p>
|
||||
<p className="text-sm mt-1">{t('Tez orada qo‘shiladi')}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
|
||||
Reference in New Issue
Block a user