24 lines
725 B
TypeScript
24 lines
725 B
TypeScript
|
import React, { ReactNode } from 'react';
|
||
|
|
import { Box, Text, Scroll } from 'folds';
|
||
|
|
import { CutoutCard } from '../cutout-card';
|
||
|
|
import * as css from './styles.css';
|
||
|
|
|
||
|
|
export function PickerColumn({ title, children }: { title: string; children: ReactNode }) {
|
||
|
|
return (
|
||
|
|
<Box direction="Column" gap="100">
|
||
|
|
<Text className={css.PickerColumnLabel} size="L400">
|
||
|
|
{title}
|
||
|
|
</Text>
|
||
|
|
<Box grow="Yes">
|
||
|
|
<CutoutCard variant="Background">
|
||
|
|
<Scroll variant="Background" size="300" hideTrack>
|
||
|
|
<Box className={css.PickerColumnContent} direction="Column" gap="100">
|
||
|
|
{children}
|
||
|
|
</Box>
|
||
|
|
</Scroll>
|
||
|
|
</CutoutCard>
|
||
|
|
</Box>
|
||
|
|
</Box>
|
||
|
|
);
|
||
|
|
}
|