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

Contect with order api

Browse Source
This commit is contained in:
Jelaletdin12
2025-12-09 23:01:18 +05:00
parent d6c163dd06
commit 14f9bd400e
18 changed files with 910 additions and 624 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
components/layout/Header.tsx
View File

@@ -3,14 +3,8 @@
import { useState, useEffect, useCallback } from "react";
import Link from "next/link";
import Image from "next/image";
import { X, Menu, Search, Store, LogOut, User as UserIcon } from "lucide-react";
import { X, Search, Store, User as UserIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import Logo from "@/public/logo.webp";
import CategoryMenu from "./ui/CategoryMenu";
import SearchBar from "./ui/SearchBar";
@@ -65,10 +59,16 @@ export default function Header({ locale = "ru" }: HeaderProps) {
<>
<header className="sticky top-0 z-50 w-full border-b bg-white shadow-sm">
<div className="container mx-auto px-4">
<div className="flex h-16 items-center justify-between gap-4">
<div className="flex h-16 items-center justify-between gap-3">
<Link href="/" className="shrink-0">
<div className="relative h-8 w-[180px]">
<Image src={Logo} alt="Logo" fill className="object-contain" priority />
<Image
src={Logo}
alt="Logo"
fill
className="object-contain"
priority
/>
</div>
</Link>
@@ -77,12 +77,16 @@ export default function Header({ locale = "ru" }: HeaderProps) {
className="hidden gap-2 rounded-xl font-bold sm:flex hover:bg-[#005bff] bg-[#005bff] text-white"
size="lg"
>
{isCategoryOpen ? <X className="h-5 w-5" /> : <CategoryIcon />}
{isCategoryOpen ? <X className="h-5 w-5" /> : <CategoryIcon />}
{t("common.catalog")}
</Button>
<div className="flex items-center gap-2 sm:hidden">
<Button variant="ghost" size="icon" onClick={() => setIsMobileSearchOpen(true)}>
<Button
variant="ghost"
size="icon"
onClick={() => setIsMobileSearchOpen(true)}
>
<Search className="h-5 w-5" />
</Button>
<LanguageSelector />
@@ -99,20 +103,13 @@ export default function Header({ locale = "ru" }: HeaderProps) {
locale={locale}
/>
<ActionButtons
isAuthenticated={isAuthenticated}
onAuthClick={handleAuthClick}
/>
</div>
<Link href="/openStore">
<Button variant="ghost" size="sm" className="relative flex gap-0.5 h-auto pb-2">
<Store className="h-5 w-5 text-gray-600" />
<span className="text-xs text-gray-700">{t("common.openStore")}</span>
</Button>
</Link>
</div>
</header>
@@ -126,10 +123,7 @@ export default function Header({ locale = "ru" }: HeaderProps) {
locale={locale}
/>
<AuthDialog
isOpen={isLoginOpen}
onClose={() => setIsLoginOpen(false)}
/>
<AuthDialog isOpen={isLoginOpen} onClose={() => setIsLoginOpen(false)} />
</>
);
}
}

123
components/layout/ui/ActionButtons.tsx
View File

@@ -3,7 +3,7 @@
import { useMemo } from "react";
import type React from "react";
import Link from "next/link";
import { User, Truck, Heart, ShoppingCart, LogOut } from "lucide-react";
import { User, Truck, Heart, Store, LogOut } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import {
@@ -16,7 +16,12 @@ import { useCart, useFavorites, useOrders } from "@/lib/hooks";
import { Skeleton } from "@/components/ui/skeleton";
import { useTranslations } from "next-intl";
import { useLogout } from "@/lib/hooks/useAuth";
import { CartIcon, FavoriteIcon, OrderIcon, ProfileIcon } from "@/components/icons";
import {
CartIcon,
FavoriteIcon,
OrderIcon,
ProfileIcon,
} from "@/components/icons";
interface ActionButtonsProps {
isAuthenticated: boolean;
@@ -34,15 +39,15 @@ interface ActionButtonData {
isLoading?: boolean;
}
export default function ActionButtons({
isAuthenticated,
onAuthClick,
export default function ActionButtons({
isAuthenticated,
onAuthClick,
isLoading: authLoading,
locale = "ru"
locale = "ru",
}: ActionButtonsProps) {
const t = useTranslations();
const { mutate: logout, isPending: isLoggingOut } = useLogout();
const { data: cartData, isLoading: cartLoading } = useCart();
const { data: favoritesData, isLoading: favoritesLoading } = useFavorites();
const { data: ordersData, isLoading: ordersLoading } = useOrders();
@@ -69,29 +74,46 @@ export default function ActionButtons({
logout();
};
const buttons: ActionButtonData[] = useMemo(() => [
{
icon: <OrderIcon />,
label: t("common.orders"),
href: "/orders",
badgeCount: ordersCount,
isLoading: ordersLoading,
},
{
icon: <FavoriteIcon />,
label: t("common.favorites"),
href: "/favorites",
badgeCount: favoritesCount,
isLoading: favoritesLoading,
},
{
icon: <CartIcon />,
label: t("common.cart"),
href: "/cart",
badgeCount: cartCount,
isLoading: cartLoading,
},
], [ordersCount, ordersLoading, favoritesCount, favoritesLoading, cartCount, cartLoading, t]);
const buttons: ActionButtonData[] = useMemo(
() => [
{
icon: <Store />,
label: t("common.openStore"),
href: "/openStore",
},
{
icon: <OrderIcon />,
label: t("common.orders"),
href: "/orders",
badgeCount: ordersCount,
isLoading: ordersLoading,
},
{
icon: <FavoriteIcon />,
label: t("common.favorites"),
href: "/favorites",
badgeCount: favoritesCount,
isLoading: favoritesLoading,
},
{
icon: <CartIcon />,
label: t("common.cart"),
href: "/cart",
badgeCount: cartCount,
isLoading: cartLoading,
}
],
[
ordersCount,
ordersLoading,
favoritesCount,
favoritesLoading,
cartCount,
cartLoading,
t,
]
);
return (
<div className="hidden items-center gap-1 md:flex">
@@ -101,13 +123,19 @@ export default function ActionButtons({
) : isAuthenticated ? (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="sm" className="flex-col gap-0.5 h-auto px-2 py-2">
<Button
variant="ghost"
size="sm"
className="flex-col gap-0.5 h-auto px-2 py-2"
>
<ProfileIcon />
<span className="text-xs text-gray-700">{t("profile")}</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => (window.location.href = `/${locale}/me`)}>
<DropdownMenuItem
onClick={() => (window.location.href = `/${locale}/me`)}
>
<User className="mr-2 h-4 w-4" />
{t("profile")}
</DropdownMenuItem>
@@ -118,7 +146,12 @@ export default function ActionButtons({
</DropdownMenuContent>
</DropdownMenu>
) : (
<Button variant="ghost" size="sm" className="flex-col gap-0.5 h-auto px-2 py-2" onClick={onAuthClick}>
<Button
variant="ghost"
size="sm"
className="flex-col gap-0.5 h-auto px-2 py-2"
onClick={onAuthClick}
>
<ProfileIcon />
<span className="text-xs text-gray-700">{t("common.login")}</span>
</Button>
@@ -132,9 +165,21 @@ export default function ActionButtons({
);
}
function ActionButton({ icon, label, href, onClick, badgeCount, isLoading }: ActionButtonData) {
function ActionButton({
icon,
label,
href,
onClick,
badgeCount,
isLoading,
}: ActionButtonData) {
const buttonContent = (
<Button variant="ghost" size="sm" className="relative flex-col gap-0.5 h-auto px-2 py-2" onClick={onClick}>
<Button
variant="ghost"
size="sm"
className="relative flex-col gap-0.5 h-auto px-2 py-2"
onClick={onClick}
>
<div className="relative">
{icon}
{badgeCount !== undefined && badgeCount > 0 && (
@@ -142,7 +187,11 @@ function ActionButton({ icon, label, href, onClick, badgeCount, isLoading }: Act
variant="destructive"
className="absolute -right-2 -top-2 h-4 w-4 flex items-center justify-center p-0 text-[10px]"
>
{isLoading ? <Skeleton className="h-3 w-3 rounded-full" /> : badgeCount}
{isLoading ? (
<Skeleton className="h-3 w-3 rounded-full" />
) : (
badgeCount
)}
</Badge>
)}
</div>
@@ -155,4 +204,4 @@ function ActionButton({ icon, label, href, onClick, badgeCount, isLoading }: Act
}
return buttonContent;
}
}

2
components/layout/ui/AuthDialog.tsx
View File

@@ -140,7 +140,7 @@ export default function AuthDialog({ isOpen, onClose }: AuthDialogProps) {
<Button
onClick={otpSent ? handleLogin : handleSendOtp}
className="w-full h-12 rounded-xl font-bold text-base"
className="w-full h-12 rounded-xl font-bold text-base bg-[#005bff] hover:bg-[#0041c4]"
size="lg"
disabled={isLoginLoading || isVerifyLoading}
>

2
components/layout/ui/CategoryMenu.tsx
View File

@@ -22,7 +22,7 @@ export default function CategoryMenu({ isOpen, onClose }: CategoryMenuProps) {
const activeCategory = hoveredCategory !== null ? categoryList[hoveredCategory] : null
return (
<div className="fixed left-0 right-0 top-22 z-40 bg-white border-b shadow-lg max-w-[1504px] mx-auto">
<div className="fixed left-0 right-0 top-15 z-40 bg-white border-b shadow-lg max-w-[1504px] mx-auto">
<div className="container mx-auto px-4">
<div className="flex">
<CategoryList

55
components/layout/ui/LanguageSelector.tsx
View File

@@ -1,29 +1,39 @@
"use client"
import { useRouter } from "next/navigation"
import Image from "next/image"
import { useLocale } from "next-intl"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import tm from "@/public/tm.png"
import ru from "@/public/ru.png"
"use client";
import { useRouter, usePathname } from "next/navigation";
import Image from "next/image";
import { useLocale } from "next-intl";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import tm from "@/public/tm.png";
import ru from "@/public/ru.png";
interface Language {
code: string
name: string
flag: any
code: string;
name: string;
flag: any;
}
const LANGUAGES: Language[] = [
{ code: "ru", name: "Russian", flag: ru },
{ code: "tm", name: "Turkmen", flag: tm },
]
];
export default function LanguageSelector() {
const locale = useLocale()
const router = useRouter()
const locale = useLocale();
const router = useRouter();
const pathname = usePathname(); // Şu anki path'i al
const handleLanguageChange = (newLocale: string) => {
router.push(`/${newLocale}`)
}
// Mevcut path'i yeni locale ile değiştir
// Örnek: /tm/cart -> /ru/cart
const currentPath = pathname.replace(`/${locale}`, "");
router.push(`/${newLocale}${currentPath}`);
};
return (
<Select value={locale} onValueChange={handleLanguageChange}>
@@ -43,17 +53,22 @@ export default function LanguageSelector() {
))}
</SelectContent>
</Select>
)
);
}
function FlagIcon({ locale }: { locale: string }) {
const language = LANGUAGES.find((lang) => lang.code === locale)
const language = LANGUAGES.find((lang) => lang.code === locale);
if (!language) return null
if (!language) return null;
return (
<div className="relative h-5 w-7">
<Image src={language.flag || "/placeholder.svg"} alt={language.name} fill className="object-cover rounded" />
<Image
src={language.flag || "/placeholder.svg"}
alt={language.name}
fill
className="object-cover rounded"
/>
</div>
)
);
}