41 lines
969 B
TypeScript
41 lines
969 B
TypeScript
import { ComponentPropsWithoutRef } from 'react'
|
|
import {
|
|
Button,
|
|
Label,
|
|
ListBox,
|
|
ListBoxItem,
|
|
Popover,
|
|
Select,
|
|
SelectValue,
|
|
} from 'react-aria-components'
|
|
|
|
import { themes } from '../../.storybook/preview'
|
|
|
|
type ThemeSwitcherProps = Pick<
|
|
ComponentPropsWithoutRef<typeof Select>,
|
|
'defaultSelectedKey' | 'onSelectionChange'
|
|
>
|
|
|
|
export function ThemeSwitcher(props: ThemeSwitcherProps) {
|
|
return (
|
|
<Select {...props}>
|
|
<Label>Theme: </Label>
|
|
<Button>
|
|
<SelectValue />
|
|
<span aria-hidden="true">▼</span>
|
|
</Button>
|
|
<Popover style={{ border: 'solid 1px #000', background: '#fff' }}>
|
|
<ListBox>
|
|
{Array.from(Object.entries(themes.themes)).map(([label, key]) => {
|
|
return (
|
|
<ListBoxItem key={key} id={key} style={{ padding: '0.5em' }}>
|
|
{label}
|
|
</ListBoxItem>
|
|
)
|
|
})}
|
|
</ListBox>
|
|
</Popover>
|
|
</Select>
|
|
)
|
|
}
|