add mockup table

This commit is contained in:
Kentai Radiquum 2025-05-05 23:44:10 +05:00
parent 9d9bfa8aa8
commit d2da453808
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
3 changed files with 447 additions and 11 deletions

View file

@ -0,0 +1,414 @@
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>
);
};

View file

@ -1,6 +1,6 @@
"use client";
import { PACKS_ENDPOINT } from "@/api/ENDPOINTS";
import { PACK_ENDPOINT, PACKS_ENDPOINT } from "@/api/ENDPOINTS";
import { Pack } from "@/types/pack";
import {
Sidebar,
@ -31,11 +31,29 @@ export const Menu = () => {
{packsData &&
packsData.map((pack) => {
return (
<SidebarItem href={`/pack/?id=${pack._id}`} key={pack._id}>
<p className="line-clamp-1">{pack.title}</p>
<p className="text-sm text-gray-400 line-clamp-1">
by {pack.author}
</p>
<SidebarItem
href={`/pack/?id=${pack._id}`}
key={pack._id}
theme={{
content: {
base: "p-0!",
},
}}
>
<div className="flex gap-2 items-center">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
alt=""
src={PACK_ENDPOINT("getPackImage", pack._id)}
className="w-10 h-10 rounded-md"
/>
<div>
<p className="line-clamp-1">{pack.title}</p>
<p className="text-sm text-gray-400 line-clamp-1">
by {pack.author}
</p>
</div>
</div>
</SidebarItem>
);
})}