({ id, name, source })
| 9 | }; |
| 10 | |
| 11 | export const Example: FC<Props> = ({ id, name, source }) => { |
| 12 | const [preview, setPreview] = useState(true); |
| 13 | |
| 14 | return ( |
| 15 | <VStack id={id} className={['m-24', 'max-md:m-16', 'rounded-sm', 'border', 'bg-background', 'overflow-hidden']}> |
| 16 | <HStack |
| 17 | alignVertical="center" |
| 18 | alignHorizontal="between" |
| 19 | className={['p-16', 'gap-8', 'border-b', 'bg-background-variant']} |
| 20 | > |
| 21 | <Body size="md" className={['font-medium', 'text-foreground']}> |
| 22 | {name} |
| 23 | </Body> |
| 24 | <Segment |
| 25 | size="md" |
| 26 | options={[ |
| 27 | { label: 'Renderer', value: true }, |
| 28 | { label: 'Editor', value: false }, |
| 29 | ]} |
| 30 | value={preview} |
| 31 | onChange={setPreview} |
| 32 | /> |
| 33 | </HStack> |
| 34 | <SourceProvider source={source}> |
| 35 | {preview ? ( |
| 36 | <SourceRenderer /> |
| 37 | ) : ( |
| 38 | <> |
| 39 | <VStack className={['flex', 'max-lg:hidden', 'aspect-3/2', 'overflow-scroll']}> |
| 40 | <SourceEditor /> |
| 41 | </VStack> |
| 42 | <VStack className={['hidden', 'max-lg:flex']}> |
| 43 | <Playground plain={true} /> |
| 44 | </VStack> |
| 45 | </> |
| 46 | )} |
| 47 | </SourceProvider> |
| 48 | </VStack> |
| 49 | ); |
| 50 | }; |
nothing calls this directly
no outgoing calls
no test coverage detected