mirror of
https://github.com/Radiquum/YAMPD.git
synced 2025-05-20 07:39:35 +05:00
414 lines
15 KiB
TypeScript
414 lines
15 KiB
TypeScript
import {
|
|
Checkbox,
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeadCell,
|
|
TableRow,
|
|
} from "flowbite-react";
|
|
|
|
export const ModTable = () => {
|
|
return (
|
|
<div className="overflow-x-auto">
|
|
<Table hoverable>
|
|
<TableHead>
|
|
<TableRow>
|
|
<TableHeadCell className="p-4">
|
|
<Checkbox />
|
|
</TableHeadCell>
|
|
<TableHeadCell>Product name</TableHeadCell>
|
|
<TableHeadCell>Color</TableHeadCell>
|
|
<TableHeadCell>Category</TableHeadCell>
|
|
<TableHeadCell>Price</TableHeadCell>
|
|
<TableHeadCell>
|
|
<span className="sr-only">Edit</span>
|
|
</TableHeadCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody className="divide-y">
|
|
<TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
|
|
<TableCell className="p-4">
|
|
<Checkbox />
|
|
</TableCell>
|
|
<TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
|
|
Apple MacBook Pro 17
|
|
</TableCell>
|
|
<TableCell>Sliver</TableCell>
|
|
<TableCell>Laptop</TableCell>
|
|
<TableCell>$2999</TableCell>
|
|
<TableCell>
|
|
<a
|
|
href="#"
|
|
className="font-medium text-cyan-600 hover:underline dark:text-cyan-500"
|
|
>
|
|
Edit
|
|
</a>
|
|
</TableCell>
|
|
</TableRow>
|
|
<TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
|
|
<TableCell className="p-4">
|
|
<Checkbox />
|
|
</TableCell>
|
|
<TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
|
|
Microsoft Surface Pro
|
|
</TableCell>
|
|
<TableCell>White</TableCell>
|
|
<TableCell>Laptop PC</TableCell>
|
|
<TableCell>$1999</TableCell>
|
|
<TableCell>
|
|
<a
|
|
href="#"
|
|
className="font-medium text-cyan-600 hover:underline dark:text-cyan-500"
|
|
>
|
|
Edit
|
|
</a>
|
|
</TableCell>
|
|
</TableRow>
|
|
<TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
|
|
<TableCell className="p-4">
|
|
<Checkbox />
|
|
</TableCell>
|
|
<TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
|
|
Magic Mouse 2
|
|
</TableCell>
|
|
<TableCell>Black</TableCell>
|
|
<TableCell>Accessories</TableCell>
|
|
<TableCell>$99</TableCell>
|
|
<TableCell>
|
|
<a
|
|
href="#"
|
|
className="font-medium text-cyan-600 hover:underline dark:text-cyan-500"
|
|
>
|
|
Edit
|
|
</a>
|
|
</TableCell>
|
|
</TableRow>
|
|
<TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
|
|
<TableCell className="p-4">
|
|
<Checkbox />
|
|
</TableCell>
|
|
<TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
|
|
Magic Mouse 2
|
|
</TableCell>
|
|
<TableCell>Black</TableCell>
|
|
<TableCell>Accessories</TableCell>
|
|
<TableCell>$99</TableCell>
|
|
<TableCell>
|
|
<a
|
|
href="#"
|
|
className="font-medium text-cyan-600 hover:underline dark:text-cyan-500"
|
|
>
|
|
Edit
|
|
</a>
|
|
</TableCell>
|
|
</TableRow>
|
|
<TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
|
|
<TableCell className="p-4">
|
|
<Checkbox />
|
|
</TableCell>
|
|
<TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
|
|
Magic Mouse 2
|
|
</TableCell>
|
|
<TableCell>Black</TableCell>
|
|
<TableCell>Accessories</TableCell>
|
|
<TableCell>$99</TableCell>
|
|
<TableCell>
|
|
<a
|
|
href="#"
|
|
className="font-medium text-cyan-600 hover:underline dark:text-cyan-500"
|
|
>
|
|
Edit
|
|
</a>
|
|
</TableCell>
|
|
</TableRow>
|
|
<TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
|
|
<TableCell className="p-4">
|
|
<Checkbox />
|
|
</TableCell>
|
|
<TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
|
|
Magic Mouse 2
|
|
</TableCell>
|
|
<TableCell>Black</TableCell>
|
|
<TableCell>Accessories</TableCell>
|
|
<TableCell>$99</TableCell>
|
|
<TableCell>
|
|
<a
|
|
href="#"
|
|
className="font-medium text-cyan-600 hover:underline dark:text-cyan-500"
|
|
>
|
|
Edit
|
|
</a>
|
|
</TableCell>
|
|
</TableRow>
|
|
<TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
|
|
<TableCell className="p-4">
|
|
<Checkbox />
|
|
</TableCell>
|
|
<TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
|
|
Magic Mouse 2
|
|
</TableCell>
|
|
<TableCell>Black</TableCell>
|
|
<TableCell>Accessories</TableCell>
|
|
<TableCell>$99</TableCell>
|
|
<TableCell>
|
|
<a
|
|
href="#"
|
|
className="font-medium text-cyan-600 hover:underline dark:text-cyan-500"
|
|
>
|
|
Edit
|
|
</a>
|
|
</TableCell>
|
|
</TableRow>
|
|
<TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
|
|
<TableCell className="p-4">
|
|
<Checkbox />
|
|
</TableCell>
|
|
<TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
|
|
Magic Mouse 2
|
|
</TableCell>
|
|
<TableCell>Black</TableCell>
|
|
<TableCell>Accessories</TableCell>
|
|
<TableCell>$99</TableCell>
|
|
<TableCell>
|
|
<a
|
|
href="#"
|
|
className="font-medium text-cyan-600 hover:underline dark:text-cyan-500"
|
|
>
|
|
Edit
|
|
</a>
|
|
</TableCell>
|
|
</TableRow>
|
|
<TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
|
|
<TableCell className="p-4">
|
|
<Checkbox />
|
|
</TableCell>
|
|
<TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
|
|
Magic Mouse 2
|
|
</TableCell>
|
|
<TableCell>Black</TableCell>
|
|
<TableCell>Accessories</TableCell>
|
|
<TableCell>$99</TableCell>
|
|
<TableCell>
|
|
<a
|
|
href="#"
|
|
className="font-medium text-cyan-600 hover:underline dark:text-cyan-500"
|
|
>
|
|
Edit
|
|
</a>
|
|
</TableCell>
|
|
</TableRow>
|
|
<TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
|
|
<TableCell className="p-4">
|
|
<Checkbox />
|
|
</TableCell>
|
|
<TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
|
|
Magic Mouse 2
|
|
</TableCell>
|
|
<TableCell>Black</TableCell>
|
|
<TableCell>Accessories</TableCell>
|
|
<TableCell>$99</TableCell>
|
|
<TableCell>
|
|
<a
|
|
href="#"
|
|
className="font-medium text-cyan-600 hover:underline dark:text-cyan-500"
|
|
>
|
|
Edit
|
|
</a>
|
|
</TableCell>
|
|
</TableRow>
|
|
<TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
|
|
<TableCell className="p-4">
|
|
<Checkbox />
|
|
</TableCell>
|
|
<TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
|
|
Magic Mouse 2
|
|
</TableCell>
|
|
<TableCell>Black</TableCell>
|
|
<TableCell>Accessories</TableCell>
|
|
<TableCell>$99</TableCell>
|
|
<TableCell>
|
|
<a
|
|
href="#"
|
|
className="font-medium text-cyan-600 hover:underline dark:text-cyan-500"
|
|
>
|
|
Edit
|
|
</a>
|
|
</TableCell>
|
|
</TableRow>
|
|
<TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
|
|
<TableCell className="p-4">
|
|
<Checkbox />
|
|
</TableCell>
|
|
<TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
|
|
Magic Mouse 2
|
|
</TableCell>
|
|
<TableCell>Black</TableCell>
|
|
<TableCell>Accessories</TableCell>
|
|
<TableCell>$99</TableCell>
|
|
<TableCell>
|
|
<a
|
|
href="#"
|
|
className="font-medium text-cyan-600 hover:underline dark:text-cyan-500"
|
|
>
|
|
Edit
|
|
</a>
|
|
</TableCell>
|
|
</TableRow>
|
|
<TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
|
|
<TableCell className="p-4">
|
|
<Checkbox />
|
|
</TableCell>
|
|
<TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
|
|
Magic Mouse 2
|
|
</TableCell>
|
|
<TableCell>Black</TableCell>
|
|
<TableCell>Accessories</TableCell>
|
|
<TableCell>$99</TableCell>
|
|
<TableCell>
|
|
<a
|
|
href="#"
|
|
className="font-medium text-cyan-600 hover:underline dark:text-cyan-500"
|
|
>
|
|
Edit
|
|
</a>
|
|
</TableCell>
|
|
</TableRow>
|
|
<TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
|
|
<TableCell className="p-4">
|
|
<Checkbox />
|
|
</TableCell>
|
|
<TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
|
|
Magic Mouse 2
|
|
</TableCell>
|
|
<TableCell>Black</TableCell>
|
|
<TableCell>Accessories</TableCell>
|
|
<TableCell>$99</TableCell>
|
|
<TableCell>
|
|
<a
|
|
href="#"
|
|
className="font-medium text-cyan-600 hover:underline dark:text-cyan-500"
|
|
>
|
|
Edit
|
|
</a>
|
|
</TableCell>
|
|
</TableRow>
|
|
<TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
|
|
<TableCell className="p-4">
|
|
<Checkbox />
|
|
</TableCell>
|
|
<TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
|
|
Magic Mouse 2
|
|
</TableCell>
|
|
<TableCell>Black</TableCell>
|
|
<TableCell>Accessories</TableCell>
|
|
<TableCell>$99</TableCell>
|
|
<TableCell>
|
|
<a
|
|
href="#"
|
|
className="font-medium text-cyan-600 hover:underline dark:text-cyan-500"
|
|
>
|
|
Edit
|
|
</a>
|
|
</TableCell>
|
|
</TableRow>
|
|
<TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
|
|
<TableCell className="p-4">
|
|
<Checkbox />
|
|
</TableCell>
|
|
<TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
|
|
Magic Mouse 2
|
|
</TableCell>
|
|
<TableCell>Black</TableCell>
|
|
<TableCell>Accessories</TableCell>
|
|
<TableCell>$99</TableCell>
|
|
<TableCell>
|
|
<a
|
|
href="#"
|
|
className="font-medium text-cyan-600 hover:underline dark:text-cyan-500"
|
|
>
|
|
Edit
|
|
</a>
|
|
</TableCell>
|
|
</TableRow>
|
|
<TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
|
|
<TableCell className="p-4">
|
|
<Checkbox />
|
|
</TableCell>
|
|
<TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
|
|
Magic Mouse 2
|
|
</TableCell>
|
|
<TableCell>Black</TableCell>
|
|
<TableCell>Accessories</TableCell>
|
|
<TableCell>$99</TableCell>
|
|
<TableCell>
|
|
<a
|
|
href="#"
|
|
className="font-medium text-cyan-600 hover:underline dark:text-cyan-500"
|
|
>
|
|
Edit
|
|
</a>
|
|
</TableCell>
|
|
</TableRow>
|
|
<TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
|
|
<TableCell className="p-4">
|
|
<Checkbox />
|
|
</TableCell>
|
|
<TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
|
|
Magic Mouse 2
|
|
</TableCell>
|
|
<TableCell>Black</TableCell>
|
|
<TableCell>Accessories</TableCell>
|
|
<TableCell>$99</TableCell>
|
|
<TableCell>
|
|
<a
|
|
href="#"
|
|
className="font-medium text-cyan-600 hover:underline dark:text-cyan-500"
|
|
>
|
|
Edit
|
|
</a>
|
|
</TableCell>
|
|
</TableRow>
|
|
<TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
|
|
<TableCell className="p-4">
|
|
<Checkbox />
|
|
</TableCell>
|
|
<TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
|
|
Magic Mouse 2
|
|
</TableCell>
|
|
<TableCell>Black</TableCell>
|
|
<TableCell>Accessories</TableCell>
|
|
<TableCell>$99</TableCell>
|
|
<TableCell>
|
|
<a
|
|
href="#"
|
|
className="font-medium text-cyan-600 hover:underline dark:text-cyan-500"
|
|
>
|
|
Edit
|
|
</a>
|
|
</TableCell>
|
|
</TableRow>
|
|
<TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
|
|
<TableCell className="p-4">
|
|
<Checkbox />
|
|
</TableCell>
|
|
<TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
|
|
Magic Mouse 2
|
|
</TableCell>
|
|
<TableCell>Black</TableCell>
|
|
<TableCell>Accessories</TableCell>
|
|
<TableCell>$99</TableCell>
|
|
<TableCell>
|
|
<a
|
|
href="#"
|
|
className="font-medium text-cyan-600 hover:underline dark:text-cyan-500"
|
|
>
|
|
Edit
|
|
</a>
|
|
</TableCell>
|
|
</TableRow>
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
);
|
|
};
|