| import React from "react"; |
|
|
| |
| |
| |
| export function Container({ |
| children, |
| maxWidth = "1280px", |
| padding = "0 var(--space-6)", |
| className = "", |
| style = {}, |
| ...props |
| }) { |
| return ( |
| <div |
| className={`layout-container ${className}`.trim()} |
| style={{ |
| width: "100%", |
| maxWidth, |
| margin: "0 auto", |
| padding, |
| boxSizing: "border-box", |
| ...style, |
| }} |
| {...props} |
| > |
| {children} |
| </div> |
| ); |
| } |
|
|
| |
| |
| |
| export function Grid({ |
| children, |
| cols = 12, |
| gap = "var(--space-4)", |
| responsiveCols = {}, // e.g. { sm: 1, md: 2, lg: 3 } |
| className = "", |
| style = {}, |
| ...props |
| }) { |
| const getGridTemplateColumns = () => { |
| if (typeof cols === "number") { |
| return `repeat(${cols}, minmax(0, 1fr))`; |
| } |
| return cols; |
| }; |
|
|
| return ( |
| <div |
| className={`layout-grid ${className}`.trim()} |
| style={{ |
| display: "grid", |
| gridTemplateColumns: getGridTemplateColumns(), |
| gap, |
| width: "100%", |
| boxSizing: "border-box", |
| ...style, |
| }} |
| {...props} |
| > |
| {children} |
| </div> |
| ); |
| } |
|
|
| |
| |
| |
| export function Flex({ |
| children, |
| direction = "row", |
| align = "center", |
| justify = "flex-start", |
| gap = "var(--space-4)", |
| wrap = "nowrap", |
| fullWidth = true, |
| className = "", |
| style = {}, |
| ...props |
| }) { |
| return ( |
| <div |
| className={`layout-flex ${className}`.trim()} |
| style={{ |
| display: "flex", |
| flexDirection: direction, |
| alignItems: align, |
| justifyContent: justify, |
| gap, |
| flexWrap: wrap, |
| width: fullWidth ? "100%" : "auto", |
| boxSizing: "border-box", |
| ...style, |
| }} |
| {...props} |
| > |
| {children} |
| </div> |
| ); |
| } |
|
|
| |
| |
| |
| export function Stack({ |
| children, |
| direction = "column", |
| gap = "var(--space-4)", |
| align = "stretch", |
| justify = "flex-start", |
| className = "", |
| style = {}, |
| ...props |
| }) { |
| return ( |
| <Flex |
| direction={direction} |
| align={align} |
| justify={justify} |
| gap={gap} |
| className={`layout-stack ${className}`.trim()} |
| style={style} |
| {...props} |
| > |
| {children} |
| </Flex> |
| ); |
| } |
|
|
| |
| |
| |
| export function Spacer({ |
| size = "var(--space-4)", |
| axis = "vertical", // vertical | horizontal |
| style = {}, |
| ...props |
| }) { |
| const isVertical = axis === "vertical"; |
| const spacingValue = typeof size === "number" ? `${size}px` : size; |
|
|
| return ( |
| <div |
| className="layout-spacer" |
| style={{ |
| width: isVertical ? "100%" : spacingValue, |
| height: isVertical ? spacingValue : "100%", |
| flexShrink: 0, |
| ...style, |
| }} |
| {...props} |
| /> |
| ); |
| } |
|
|
| export default { |
| Container, |
| Grid, |
| Flex, |
| Stack, |
| Spacer, |
| }; |
|
|
