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 | import { Avatar, AvatarGroup } from "~components/avatar";
import { Text } from "~components/text";
import { User } from "~components/user";
import { View } from "~components/view";
import { Group, Section } from "./showcase-section";
const AvatarShowcase = () => (
<Section title="Avatar">
<View className="flex flex-row flex-wrap items-center gap-3">
{(["sm", "md", "lg"] as const).map((size) => (
<Avatar key={size} hashId={size} size={size} />
))}
<Avatar hashId="dimmed" dimmed />
</View>
</Section>
);
const AvatarGroupShowcase = () => (
<Section title="AvatarGroup">
<AvatarGroup size="sm">
{["Ada", "Lin", "Sam"].map((name) => (
<Avatar key={name} hashId={name} />
))}
</AvatarGroup>
</Section>
);
const BeamAvatarShowcase = () => (
<Section title="BeamAvatar">
<Avatar hashId="generated-beam" />
<Text>Generated fallback avatar</Text>
</Section>
);
const UserExample = () => (
<Section title="User">
<User
name="Ada"
description="With generated avatar"
avatarProps={{ hashId: "Ada" }}
/>
<User name="Lin" description="Without avatar" />
</Section>
);
export const UserShowcase = () => (
<Group title="User">
<AvatarShowcase />
<AvatarGroupShowcase />
<BeamAvatarShowcase />
<UserExample />
</Group>
);
|