eh

packages/components/src/Layout/Layout.stories.tsx

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Layout } from './layout';
+
+const meta = {
+  title: 'Layout/Layout',
+  component: Layout,
+} satisfies Meta<typeof Layout>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  render: args => <Layout>asd</Layout>,
+};

packages/components/src/Layout/Layout.tsx

@@ -0,0 +1,37 @@
+import type { ReactNode } from 'react';
+
+import type { GapSpaceProp } from '@marigold/system';
+import { cn, gapSpace } from '@marigold/system';
+
+import { Slot } from './LayoutSlot';
+
+// Helpers
+// ---------------
+const parseGridAreas = (areas: string[]) =>
+  areas.map(area => `"${area}"`).join('\n');
+
+// Props
+// ---------------
+export interface LayoutProps extends GapSpaceProp {
+  areas: string[];
+  // TODO: make rows/columns more strict (tailwind values?)
+  columns?: string[];
+  rows?: string[];
+  // height?
+  children?: ReactNode;
+}
+
+// Component
+// ---------------
+export const Layout = ({ children, areas, space = 0 }: LayoutProps) => {
+  return (
+    <div
+      className={cn('grid', gapSpace[space])}
+      style={{ gridTemplateAreas: parseGridAreas(areas) }}
+    >
+      {children}
+    </div>
+  );
+};
+
+Layout.Slot = Slot;

packages/components/src/Layout/LayoutSlot.tsx

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+
+// Props
+// ---------------
+export interface SlotProps {
+  name: string;
+  children?: ReactNode;
+}
+
+// Components
+// ---------------
+export const Slot = ({ name, children }: SlotProps) => (
+  <div style={{ gridArea: name }}>{children}</div>
+);