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 | import React from "react";
import { Icon } from "~components/icons";
import { Switch } from "~components/switch";
import { Text } from "~components/text";
import { View } from "~components/view";
import { Group, Section } from "./showcase-section";
const SwitchShowcase = () => {
const [selected, setSelected] = React.useState<Record<string, boolean>>({
md: true,
});
return (
<Section title="Switch">
<View className="flex flex-row flex-wrap items-center gap-3">
{(["sm", "md", "lg"] as const).map((size) => (
<View key={size} className="flex items-center gap-1">
<Switch
aria-label={`${size} switch`}
size={size}
isSelected={Boolean(selected[size])}
onValueChange={(value) =>
setSelected((previous) => ({ ...previous, [size]: value }))
}
/>
<Text>{size} size</Text>
</View>
))}
<View className="flex items-center gap-1">
<Switch
aria-label="Switch with icon"
isSelected={Boolean(selected.icon)}
thumbIcon={<Icon name="sun" className="size-4" />}
onValueChange={(value) =>
setSelected((previous) => ({ ...previous, icon: value }))
}
/>
<Text>With thumb icon</Text>
</View>
<View className="flex items-center gap-1">
<Switch aria-label="Disabled switch" isSelected isDisabled />
<Text>Disabled</Text>
</View>
<View className="flex items-center gap-1">
<Switch aria-label="Read-only switch" isSelected isReadOnly />
<Text>Read-only</Text>
</View>
</View>
</Section>
);
};
export const SwitchesShowcase = () => (
<Group title="Switches">
<SwitchShowcase />
</Group>
);
|