feature/layout

src/components/layout/Layout/Layout.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Layout } from './Layout';
+
+const meta = {
+  component: Layout,
+} satisfies Meta<typeof Layout>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: (
+        <div className="bg-base-100 p-4 rounded shadow">
+          <h2 className="text-lg font-semibold">Dashboard Content</h2>
+          <p>This content is rendered inside the Layout component.</p>
+        </div>
+    ),
+  }
+};

src/components/layout/Layout/Layout.tsx

@@ -0,0 +1,26 @@
+import Header from "../Header/Header.tsx";
+import type {LayoutProps} from "./LayoutProps.ts";
+
+/**
+ * The main layout component for the application.
+ *
+ * This component wraps the application content with a consistent structure,
+ * including a header and a main content area.
+ *
+ * @param props - The component props.
+ * @param props.children - The child components to render within the main content area.
+ * @returns The rendered layout structure.
+ */
+export function Layout({children}: Readonly<LayoutProps>) {
+    return (<div className="min-h-screen bg-base-200">
+        <Header
+            user={null}
+            onLogout={() => {
+
+            }}
+        />
+        <main className="container mx-auto p-4">
+            {children}
+        </main>
+    </div>);
+}

src/components/layout/Layout/LayoutProps.ts

@@ -0,0 +1,11 @@
+import type {ReactNode} from "react";
+
+/**
+ * Props for the {@link Layout} component.
+ */
+export interface LayoutProps {
+    /**
+     * The content to be rendered inside the main layout area.
+     */
+    children?: ReactNode;
+}