Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 | import React from "react";
import { Button, ButtonGroup } from "~components/button";
import { SaveButton } from "~components/save-button";
import { Text } from "~components/text";
import { View } from "~components/view";
import { Group, Section } from "./showcase-section";
const variants = [
"flat",
"solid",
"bordered",
"light",
"faded",
"shadow",
"ghost",
] as const;
const colors = [
"default",
"primary",
"secondary",
"success",
"warning",
"danger",
] as const;
const ButtonExample = () => {
const [presses, setPresses] = React.useState(0);
return (
<Section title="Button">
<View className="grid grid-cols-2 gap-2 sm:grid-cols-4 lg:grid-cols-7">
{colors.flatMap((color) =>
variants.map((variant) => (
<Button
key={`${color}-${variant}`}
color={color}
variant={variant}
onPress={() => setPresses((count) => count + 1)}
>
{`${color} / ${variant}`}
</Button>
)),
)}
</View>
<View className="flex flex-row flex-wrap gap-2">
<Button isDisabled>Disabled</Button>
<Button isLoading>Loading</Button>
</View>
<Text>Presses: {presses}</Text>
</Section>
);
};
const ButtonGroupShowcase = () => (
<Section title="ButtonGroup">
<Text>Primary / solid</Text>
<ButtonGroup color="primary">
<Button>First</Button>
<Button>Second</Button>
<Button>Third</Button>
<Button>Fourth</Button>
</ButtonGroup>
<Text>Secondary / bordered</Text>
<ButtonGroup variant="bordered" color="secondary">
<Button>First</Button>
<Button>Second</Button>
<Button>Third</Button>
<Button>Fourth</Button>
</ButtonGroup>
<Text>Danger / flat / disabled</Text>
<ButtonGroup variant="flat" color="danger" isDisabled>
<Button>First</Button>
<Button>Second</Button>
<Button>Third</Button>
<Button>Fourth</Button>
</ButtonGroup>
</Section>
);
const SaveButtonShowcase = () => {
const [saves, setSaves] = React.useState(0);
return (
<Section title="SaveButton">
<SaveButton title="Save" onPress={() => setSaves((count) => count + 1)} />
<Text>Saves: {saves}</Text>
</Section>
);
};
export const ButtonShowcase = () => (
<Group title="Button">
<ButtonExample />
<ButtonGroupShowcase />
<SaveButtonShowcase />
</Group>
);
|