fix keys

2023-02-12 16:08:09 +10:00
parent 42273c5ac8
commit 008bc96252
9 changed files with 39 additions and 29 deletions
@@ -0,0 +1,43 @@
+import { LucideIcon, AlignLeftIcon } from "lucide-react";
+
+export interface PageLayoutProps {
+  label: string;
+  children: React.ReactNode;
+  actions?: {
+    icon: LucideIcon;
+    onClick: () => void;
+  }[];
+}
+
+export const PageLayout = ({
+  label: title,
+  actions,
+  children
+}: PageLayoutProps): JSX.Element => {
+  return (
+    <div className="relative flex h-full w-full flex-col">
+      <div className="flex h-14 shrink-0 border-b-[0.5px] border-slate-300 dark:border-slate-700 md:h-16 md:px-4">
+        <button className="pl-4 transition-all hover:text-accent md:hidden">
+          <AlignLeftIcon />
+        </button>
+        <div className="flex flex-1 items-center justify-between px-4 md:px-0">
+          <div className="flex w-full items-center">
+            <span className="w-full text-lg font-medium">{title}</span>
+            <div className="flex justify-end space-x-4">
+              {actions?.map((action, index) => (
+                <button
+                  key={index}
+                  className="transition-all hover:text-accent"
+                  onClick={action.onClick}
+                >
+                  <action.icon />
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+      {children}
+    </div>
+  );
+};