203 lines
6.5 KiB
JavaScript
203 lines
6.5 KiB
JavaScript
import Image from 'next/image';
|
|
|
|
const TableOne = () => {
|
|
// Table data
|
|
const tableData = [
|
|
{
|
|
id: 1,
|
|
token: "1",
|
|
name: "John Doe",
|
|
status: {
|
|
text: "Done",
|
|
variant: "success",
|
|
color: "text-success-600",
|
|
bg: "bg-success-50",
|
|
dark: {
|
|
color: "dark:text-success-500",
|
|
bg: "dark:bg-success-500/15"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
id: 2,
|
|
token: "1",
|
|
name: "John Doe",
|
|
status: {
|
|
text: "In-Queue",
|
|
variant: "warning",
|
|
color: "text-warning-600",
|
|
bg: "bg-warning-50",
|
|
dark: {
|
|
color: "dark:text-orange-400",
|
|
bg: "dark:bg-warning-500/15"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
id: 3,
|
|
token: "1",
|
|
name: "John Doe",
|
|
status: {
|
|
text: "Cancelled",
|
|
variant: "error",
|
|
color: "text-error-600",
|
|
bg: "bg-error-50",
|
|
dark: {
|
|
color: "dark:text-error-500",
|
|
bg: "dark:bg-error-500/15"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
id: 4,
|
|
token: "1",
|
|
name: "John Doe",
|
|
status: {
|
|
text: "Done",
|
|
variant: "success",
|
|
color: "text-success-600",
|
|
bg: "bg-success-50",
|
|
dark: {
|
|
color: "dark:text-success-500",
|
|
bg: "dark:bg-success-500/15"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
id: 5,
|
|
token: "1",
|
|
name: "John Doe",
|
|
status: {
|
|
text: "In-Queue",
|
|
variant: "warning",
|
|
color: "text-warning-600",
|
|
bg: "bg-warning-50",
|
|
dark: {
|
|
color: "dark:text-orange-400",
|
|
bg: "dark:bg-warning-500/15"
|
|
}
|
|
}
|
|
},
|
|
{
|
|
id: 6,
|
|
token: "1",
|
|
name: "John Doe",
|
|
status: {
|
|
text: "Cancelled",
|
|
variant: "error",
|
|
color: "text-error-600",
|
|
bg: "bg-error-50",
|
|
dark: {
|
|
color: "dark:text-error-500",
|
|
bg: "dark:bg-error-500/15"
|
|
}
|
|
}
|
|
}
|
|
];
|
|
|
|
// Action button component
|
|
const ActionButton = ({ type }) => (
|
|
<p className="rounded-full border-[1px] px-2 py-0.5 text-theme-xs flex flex-row items-center gap-2 2xl:px-3 2xl:py-1.5 2xl:text-[14px] 2xl:font-normal">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="10"
|
|
height="10"
|
|
fill="currentColor"
|
|
className="bi bi-pencil"
|
|
viewBox="0 0 16 16"
|
|
>
|
|
<path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325"/>
|
|
</svg>
|
|
{type}
|
|
</p>
|
|
);
|
|
|
|
return (
|
|
<div className="overflow-hidden rounded-2xl border border-gray-200 bg-white px-4 pb-3 pt-4 dark:border-gray-800 dark:bg-white/[0.03] sm:px-6">
|
|
<div className="w-full overflow-x-auto">
|
|
<table className="min-w-full">
|
|
{/* Table Header */}
|
|
<thead>
|
|
<tr className="border-y border-gray-100 dark:border-gray-800">
|
|
<th className="py-3">
|
|
<div className="flex items-center">
|
|
<p className="font-medium text-gray-500 text-theme-xs dark:text-gray-400">
|
|
Token
|
|
</p>
|
|
</div>
|
|
</th>
|
|
<th className="py-3 sm:columns-2 2xl:columns-2">
|
|
<div className="flex items-center">
|
|
<p className="font-medium text-gray-500 text-theme-xs dark:text-gray-400">
|
|
Name
|
|
</p>
|
|
</div>
|
|
</th>
|
|
<th className="py-3 columns-0 sm:columns-0 2xl:columns-0">
|
|
<div className="flex items-center justify-normal sm:justify-normal 2xl:justify-normal">
|
|
<p className="font-medium text-gray-500 text-theme-xs dark:text-gray-400">
|
|
Status
|
|
</p>
|
|
</div>
|
|
</th>
|
|
<th className="py-3">
|
|
<div className="flex items-center justify-center col-span-1">
|
|
<p className="font-medium text-gray-500 text-theme-xs dark:text-gray-400 hidden md:block 2xl:block">
|
|
Options
|
|
</p>
|
|
</div>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
{/* Table Body */}
|
|
<tbody className="divide-y divide-gray-100 dark:divide-gray-800">
|
|
{tableData.map((item) => (
|
|
<tr key={item.id}>
|
|
{/* Token Column */}
|
|
<td className="py-3">
|
|
<div className="flex items-center -mt-7 ml-3 md:mt-0 md:mb-0 2xl:mb-0">
|
|
<p>{item.token}</p>
|
|
</div>
|
|
</td>
|
|
|
|
{/* Name Column */}
|
|
<td className="py-3">
|
|
<div className="flex items-center -mt-8 md:mt-0 md:mb-0 2xl:mb-0">
|
|
<p className="text-gray-500 text-theme-sm dark:text-gray-400">
|
|
{item.name}
|
|
</p>
|
|
{/* Mobile Actions */}
|
|
<div className="flex items-center justify-center gap-2 mt-20 -ml-[4rem] sm:-ml-[4rem] md:hidden md:mt-0 md:ml-0 2xl:mt-0 2xl:ml-0">
|
|
<ActionButton type="Done" />
|
|
<ActionButton type="Missed" />
|
|
</div>
|
|
</div>
|
|
</td>
|
|
|
|
{/* Status Column */}
|
|
<td className="py-3">
|
|
<div className="flex items-center justify-normal -mt-7 sm:justify-normal md:mt-0 md:mb-0 2xl:mb-0 2xl:justify-normal">
|
|
<p className={`rounded-full px-2 py-0.5 text-theme-xs font-medium ${item.status.bg} ${item.status.color} ${item.status.dark.bg} ${item.status.dark.color}`}>
|
|
{item.status.text}
|
|
</p>
|
|
</div>
|
|
</td>
|
|
|
|
{/* Options Column (Desktop) */}
|
|
<td className="py-3">
|
|
<div className="hidden items-center justify-center gap-2 mt-8 -ml-[18rem] sm:-ml-[49rem] md:flex md:mt-0 md:ml-0 2xl:mt-0 2xl:ml-0">
|
|
<ActionButton type="Done" />
|
|
<ActionButton type="Missed" />
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TableOne; |