diff --git a/src/components/layout/Layout/Layout.stories.tsx b/src/components/layout/Layout/Layout.stories.tsx new file mode 100644 index 0000000..d168780 --- /dev/null +++ b/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; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + children: ( +
+

Dashboard Content

+

This content is rendered inside the Layout component.

+
+ ), + } +}; \ No newline at end of file diff --git a/src/components/layout/Layout/Layout.tsx b/src/components/layout/Layout/Layout.tsx new file mode 100644 index 0000000..13d3343 --- /dev/null +++ b/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) { + return (
+
{ + + }} + /> +
+ {children} +
+
); +} \ No newline at end of file diff --git a/src/components/layout/Layout/LayoutProps.ts b/src/components/layout/Layout/LayoutProps.ts new file mode 100644 index 0000000..4bec604 --- /dev/null +++ b/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; +} \ No newline at end of file