101 lines
3.2 KiB
TypeScript
101 lines
3.2 KiB
TypeScript
"use client";
|
||
|
||
import React from "react";
|
||
import { Button } from "@/components/ui/button";
|
||
import { ArrowLeft, ShoppingCart, Users, Check } from "lucide-react";
|
||
|
||
interface TabsHeaderProps {
|
||
activeTab: "cards" | "wholesaler";
|
||
onTabChange: (tab: "cards" | "wholesaler") => void;
|
||
onBack: () => void;
|
||
cartInfo?: {
|
||
itemCount: number;
|
||
totalAmount: number;
|
||
formatCurrency: (amount: number) => string;
|
||
};
|
||
onCartClick?: () => void;
|
||
onCreateSupply?: () => void;
|
||
canCreateSupply?: boolean;
|
||
isCreatingSupply?: boolean;
|
||
}
|
||
|
||
export function TabsHeader({
|
||
activeTab,
|
||
onTabChange,
|
||
onBack,
|
||
cartInfo,
|
||
onCartClick,
|
||
onCreateSupply,
|
||
canCreateSupply = false,
|
||
isCreatingSupply = false,
|
||
}: TabsHeaderProps) {
|
||
return (
|
||
<div className="flex items-center justify-between mb-4">
|
||
<div className="flex items-center space-x-4">
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
onClick={onBack}
|
||
className="text-white/60 hover:text-white hover:bg-white/10"
|
||
>
|
||
<ArrowLeft className="h-4 w-4 mr-2" />
|
||
Назад
|
||
</Button>
|
||
<h1 className="text-2xl font-bold text-white">Создание поставки</h1>
|
||
|
||
{/* Кнопка корзины */}
|
||
{cartInfo && cartInfo.itemCount > 0 && onCartClick && (
|
||
<Button
|
||
onClick={onCartClick}
|
||
className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white"
|
||
>
|
||
<ShoppingCart className="h-4 w-4 mr-2" />
|
||
Корзина ({cartInfo.itemCount})
|
||
{activeTab === "supplier" &&
|
||
` • ${cartInfo.formatCurrency(cartInfo.totalAmount)}`}
|
||
</Button>
|
||
)}
|
||
|
||
{/* Кнопка создания поставки для таба карточек */}
|
||
{activeTab === "cards" && onCreateSupply && (
|
||
<Button
|
||
onClick={onCreateSupply}
|
||
disabled={!canCreateSupply || isCreatingSupply}
|
||
className="bg-white/20 hover:bg-white/30 text-white border-0"
|
||
>
|
||
<Check className="h-4 w-4 mr-2" />
|
||
{isCreatingSupply ? "Создание..." : "Создать поставку"}
|
||
</Button>
|
||
)}
|
||
</div>
|
||
|
||
<div>
|
||
<div className="grid grid-cols-2 bg-white/10 backdrop-blur border border-white/20 rounded-lg p-1">
|
||
<button
|
||
onClick={() => onTabChange("cards")}
|
||
className={`px-4 py-2 text-sm rounded transition-all ${
|
||
activeTab === "cards"
|
||
? "bg-white/20 text-white"
|
||
: "text-white/60 hover:text-white hover:bg-white/10"
|
||
}`}
|
||
>
|
||
<ShoppingCart className="h-4 w-4 mr-1 inline" />
|
||
Карточки
|
||
</button>
|
||
<button
|
||
onClick={() => onTabChange("wholesaler")}
|
||
className={`px-4 py-2 text-sm rounded transition-all ${
|
||
activeTab === "wholesaler"
|
||
? "bg-white/20 text-white"
|
||
: "text-white/60 hover:text-white hover:bg-white/10"
|
||
}`}
|
||
>
|
||
<Users className="h-4 w-4 mr-1 inline" />
|
||
Поставщики
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|