+
-
-
+
- {code}
+
{/* Content */}
-
+ {code}
+
+
{title}
-
+
{description}
-
+
{/* Footer */}
- {
- e.stopPropagation();
- // handle edit
- }}
+ e.stopPropagation()}
>
{status}
- Updated {formattedDate}
+ Updated {formattedDate}
-
+
);
}
diff --git a/src/components/PageHeader.jsx b/src/components/PageHeader.jsx
index 3c89534..0fe9508 100644
--- a/src/components/PageHeader.jsx
+++ b/src/components/PageHeader.jsx
@@ -1,33 +1,33 @@
-import { SearchField, Separator } from '@heroui/react';
+import { Separator } from '../components/ui/separator';
import {
- BellIcon,
- QuestionMarkCircleIcon,
- UserCircleIcon
-} from '@heroicons/react/16/solid';
+ HiOutlineBell,
+ HiOutlineQuestionMarkCircle,
+ HiOutlineUserCircle,
+ HiOutlineBars3,
+} from 'react-icons/hi2';
+import { useSidebar } from '../layouts/MainLayout';
function PageHeader() {
+ const { toggleSidebar } = useSidebar();
+
return (
<>
-
-
-
-
-
-
-
+
+
+ {columns.map((col) => (
+
+ {col.label}
+
+ ))}
+
+
+
+ {paged.map((row, idx) => (
+ { e.currentTarget.style.background = 'rgba(113,50,245,0.06)'; }}
+ onMouseLeave={(e) => { e.currentTarget.style.background = idx % 2 === 1 ? 'rgba(148,151,169,0.04)' : '#ffffff'; }}
+ >
+ {columns.map((col) => (
+
+ {col.render
+ ? col.render(row, (page - 1) * perPage + idx + 1)
+ : row[col.key]}
+
+ ))}
+
+ ))}
+ {paged.length === 0 && (
+
+
+ {emptyText}
+
+
+ )}
+
+
+
+
+ {/* Pagination */}
+
+
+ {startIdx}–{endIdx} of {filtered.length}
+
+
+
+ {Array.from({ length: totalPages }, (_, i) => (
+
+ ))}
+
+
+
+
+ );
+}
+
+export { DataTable };
diff --git a/src/components/ui/input.jsx b/src/components/ui/input.jsx
new file mode 100644
index 0000000..b5be936
--- /dev/null
+++ b/src/components/ui/input.jsx
@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+
+const Input = React.forwardRef(({ className, type, ...props }, ref) => (
+
+));
+Input.displayName = 'Input';
+
+export { Input };
diff --git a/src/components/ui/label.jsx b/src/components/ui/label.jsx
new file mode 100644
index 0000000..81e5782
--- /dev/null
+++ b/src/components/ui/label.jsx
@@ -0,0 +1,17 @@
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { cn } from '../../lib/utils';
+
+const Label = React.forwardRef(({ className, ...props }, ref) => (
+
+ isActive ? 'sidebar__link sidebar__link--active' : 'sidebar__link'
+ }
+ title={item.label}
+ >
+
+ {Icon ?
+ )
+ }
+
+ return (
+
+
+ {open && (
+
+ {item.children.map((child) => (
+
+ isActive ? 'sidebar__sublink sidebar__sublink--active' : 'sidebar__sublink'
+ }
+ >
+ {child.label}
+
+ ))}
+
+ )}
+
+ )
+}
+
function MainLayout() {
const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false)
return (
-
-
{title}
-+
{description}
- + e.stopPropagation()}
>
-
+
);
}
diff --git a/src/components/PageHeader.jsx b/src/components/PageHeader.jsx
index 3c89534..0fe9508 100644
--- a/src/components/PageHeader.jsx
+++ b/src/components/PageHeader.jsx
@@ -1,33 +1,33 @@
-import { SearchField, Separator } from '@heroui/react';
+import { Separator } from '../components/ui/separator';
import {
- BellIcon,
- QuestionMarkCircleIcon,
- UserCircleIcon
-} from '@heroicons/react/16/solid';
+ HiOutlineBell,
+ HiOutlineQuestionMarkCircle,
+ HiOutlineUserCircle,
+ HiOutlineBars3,
+} from 'react-icons/hi2';
+import { useSidebar } from '../layouts/MainLayout';
function PageHeader() {
+ const { toggleSidebar } = useSidebar();
+
return (
<>
-
{status}
- Updated {formattedDate}
+ Updated {formattedDate}
-
-
-
-
-
-
+ isActive ? 'sidebar__link sidebar__link--active' : 'sidebar__link'
+ }
+ title={item.label}
+ >
+
+ {Icon ?
+ )
+ }
+
+ return (
+
+
+
-
+
+
+ )}
+
+
+
+
+
+
+ {/* Pagination */}
+ | + {col.label} + | + ))} +
|---|
| + {col.render + ? col.render(row, (page - 1) * perPage + idx + 1) + : row[col.key]} + | + ))} +
| + {emptyText} + | +
+
+ {startIdx}–{endIdx} of {filtered.length}
+
+
+
+ );
+}
+
+export { DataTable };
diff --git a/src/components/ui/input.jsx b/src/components/ui/input.jsx
new file mode 100644
index 0000000..b5be936
--- /dev/null
+++ b/src/components/ui/input.jsx
@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+
+const Input = React.forwardRef(({ className, type, ...props }, ref) => (
+
+));
+Input.displayName = 'Input';
+
+export { Input };
diff --git a/src/components/ui/label.jsx b/src/components/ui/label.jsx
new file mode 100644
index 0000000..81e5782
--- /dev/null
+++ b/src/components/ui/label.jsx
@@ -0,0 +1,17 @@
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { cn } from '../../lib/utils';
+
+const Label = React.forwardRef(({ className, ...props }, ref) => (
+
+
+ {Array.from({ length: totalPages }, (_, i) => (
+
+ ))}
+
+
+
+
+ {open && (
+
+ )
+}
+
function MainLayout() {
const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false)
return (
-
+ {item.children.map((child) => (
+
+ isActive ? 'sidebar__sublink sidebar__sublink--active' : 'sidebar__sublink'
+ }
+ >
+ {child.label}
+
+ ))}
+
+ )}
+
-