Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/lowmess/lameass.recipes. A recipe site, but without the ads and 3,000 word essays lameass.recipes
nextjs sanity-io theme-ui typescript
Something went wrong. Try again.
1.1 kB · 49 lines
TSX
at main
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950import * as React from 'react'import { Flex } from 'theme-ui'import { ResponsiveStyleValue } from '@theme-ui/css'import { BoxProps } from '@theme-ui/components'
type Direction = 'vertical' | 'horizontal'
interface StackProps extends BoxProps { direction?: Direction | Direction[] gap?: ResponsiveStyleValue<number>}
export const Stack: React.FC<StackProps> = ({ direction = 'vertical', gap = 0, sx, children, ...props}) => { const directionToFlow = (flowDirection: Direction): string => flowDirection === 'vertical' ? 'column nowrap' : 'row wrap'
const flexFlow = Array.isArray(direction) ? direction.map(directionToFlow) : directionToFlow(direction)
return ( <Flex sx={{ flexFlow, gap, ...sx, }} {...props} > {children} </Flex> )}
type DirectionalStackProps = Omit<StackProps, 'direction'>
export const VStack: React.FC<DirectionalStackProps> = (props) => ( <Stack {...props} direction="vertical" />)
export const HStack: React.FC<DirectionalStackProps> = (props) => ( <Stack {...props} direction="horizontal" />)