87 lines
2.9 KiB
TypeScript
87 lines
2.9 KiB
TypeScript
import { Skeleton } from "@/components/ui/skeleton";
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "@/components/ui/table";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Edit, Trash } from "lucide-react";
|
|
|
|
import { ShippingMethod } from "@/lib/types";
|
|
|
|
interface ShippingTableProps {
|
|
shippingMethods: ShippingMethod[];
|
|
loading: boolean;
|
|
onEditShipping: (method: ShippingMethod) => void;
|
|
onDeleteShipping: (_id: string) => void;
|
|
}
|
|
|
|
export const ShippingTable: React.FC<ShippingTableProps> = ({
|
|
shippingMethods,
|
|
loading,
|
|
onEditShipping,
|
|
onDeleteShipping,
|
|
}) => {
|
|
return (
|
|
<div className="rounded-lg border dark:border-zinc-700 shadow-sm overflow-hidden">
|
|
<Table className="relative">
|
|
<TableHeader className="bg-gray-50 dark:bg-zinc-800/50">
|
|
<TableRow className="hover:bg-transparent">
|
|
<TableHead className="w-[60%]">Name</TableHead>
|
|
<TableHead className="text-center">Price</TableHead>
|
|
<TableHead className="text-right">Actions</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{loading ? (
|
|
<TableRow>
|
|
<TableCell colSpan={3} className="text-center">
|
|
<Skeleton className="h-4 w-[200px]" />
|
|
</TableCell>
|
|
</TableRow>
|
|
) : shippingMethods.length > 0 ? (
|
|
shippingMethods.map((method) => (
|
|
<TableRow
|
|
key={method._id}
|
|
className="transition-colors hover:bg-gray-50 dark:hover:bg-zinc-800/70"
|
|
>
|
|
<TableCell className="font-medium">{method.name}</TableCell>
|
|
<TableCell className="text-center">£{method.price}</TableCell>
|
|
<TableCell className="text-right">
|
|
<div className="flex justify-end">
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
className="text-blue-600 hover:text-blue-700 dark:text-blue-400"
|
|
onClick={() => onEditShipping(method)}
|
|
>
|
|
<Edit className="h-4 w-4" />
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
className="text-red-600 hover:text-red-700 dark:text-red-400"
|
|
onClick={() => onDeleteShipping(method._id ?? "")}
|
|
>
|
|
<Trash className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
))
|
|
) : (
|
|
<TableRow>
|
|
<TableCell colSpan={3} className="h-24 text-center">
|
|
No shipping methods found
|
|
</TableCell>
|
|
</TableRow>
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
);
|
|
};
|