nextui/apps/docs/content/components/dropdown/single-selection.ts
2023-06-23 19:57:30 -03:00

46 lines
1.2 KiB
TypeScript

const App = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react";
export default function App() {
const [selectedKeys, setSelectedKeys] = React.useState(new Set(["text"]));
const selectedValue = React.useMemo(
() => Array.from(selectedKeys).join(", ").replaceAll("_", " "),
[selectedKeys]
);
return (
<Dropdown>
<DropdownTrigger>
<Button
variant="bordered"
className="capitalize"
>
{selectedValue}
</Button>
</DropdownTrigger>
<DropdownMenu
aria-label="Single selection actions"
variant="flat"
disallowEmptySelection
selectionMode="single"
selectedKeys={selectedKeys}
onSelectionChange={setSelectedKeys}
>
<DropdownItem key="text">Text</DropdownItem>
<DropdownItem key="number">Number</DropdownItem>
<DropdownItem key="date">Date</DropdownItem>
<DropdownItem key="single_date">Single Date</DropdownItem>
<DropdownItem key="iteration">Iteration</DropdownItem>
</DropdownMenu>
</Dropdown>
);
}`;
const react = {
"/App.jsx": App,
};
export default {
...react,
};