Initial commit

docs/components/preview.md

@@ -0,0 +1,97 @@
+- Home
+- Components
+- Preview
+
+# Preview
+
+The Preview component is used throughout the documentation to display components alongside their code examples. It supports flexible layouts for showcasing components in different arrangements.
+
+## FormLayout Options
+
+## Default Layout
+
+By default, the Preview component displays components horizontally with code below:
+
+```
+<Button>Default Layout</Button>
+```
+
+### Left Layout
+
+Use left prop to position the component on the left side with a fixed width:
+
+```
+<Button>Left Layout</Button>
+```
+
+### Right Layout
+
+Use right prop to position the component on the right side with a fixed width:
+
+```
+<Button>Right Layout</Button>
+```
+
+### Custom Width
+
+You can specify custom widths for left or right layouts:
+
+```
+<Button>Custom Width (300px)</Button>
+```
+
+```
+<Button>Custom Width (150px)</Button>
+```
+
+## Props
+
+### Required Props
+
+
+Prop	Type	Description
+children	ReactNode	Required. The code example content to display. Typically contains a markdown code block with syntax highlighting.
+component	ReactNode	Required. The actual component or JSX element to render in the preview panel.
+
+### Layout Props
+
+
+Prop	Type	Default	Description
+left	boolean | number	undefined	Positions the component on the left side with code on the right. If true, uses default width of 200px. If a number, uses that value as width in pixels.
+right	boolean | number	undefined	Positions the component on the right side with code on the left. If true, uses default width of 200px. If a number, uses that value as width in pixels.
+
+### Code Block Props
+
+
+Prop	Type	Default	Description
+lines	number	undefined	Fixed height in lines. If collapsed=true, shows this many lines when collapsed. If collapsed=false, uses this as max height with scroll.
+collapsed	boolean	false	Enable collapse/expand button functionality.
+startCollapsed	boolean	false	Start in collapsed state (requires collapsed=true).
+maxLines	number	undefined	When expanded, max lines before adding scroll. Only works with collapsed=true.
+
+### Default Values
+
+The Preview component uses these constants for default widths:
+
+- Default left width: 200px (when left={true})
+- Default right width: 200px (when right={true})
+
+### Layout Behavior
+
+- Default layout (no left or right prop): Component displays above the code block in a horizontal stack
+- Left layout (left prop): Component panel on left (fixed width), code panel on right (flexible width)
+- Right layout (right prop): Code panel on left (flexible width), component panel on right (fixed width)
+- Mutual exclusivity: Only use either left OR right, never both simultaneously
+
+## Usage Notes
+
+- Only use either left OR right prop, not both
+- When no layout prop is provided, uses the default horizontal layout
+- The Preview component handles responsive behavior and code block styling automatically
+- Default widths are 200px for both left and right layouts
+- Code blocks automatically include copy buttons
+- Use collapsed={true} to enable collapse/expand functionality
+- Use lines={n} for fixed height or collapsed display height
+- Use maxLines={n} with collapsed={true} to control expanded height
+- Use startCollapsed={true} to begin in collapsed state
+