balls

components/shipping-table.tsx

@@ -0,0 +1,85 @@
+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";
+
+interface ShippingMethod {
+  _id: string;
+  name: string;
+  price: number;
+}
+
+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>
+  );
+};