mirror of
https://github.com/AmruthPillai/Reactive-Resume.git
synced 2026-07-24 08:54:05 +10:00
Amruth Pillai
6e7fc68068
- Add `import type * as React from "react"` to the 26 previews that reference `React.CSSProperties` under the automatic JSX runtime (React isn't a global type namespace there, so the annotation was unresolved standalone). - Accordion preview: use `multiple` instead of `openMultiple` — @base-ui/react 1.6 renamed the prop, so the multi-open cell wasn't actually multi-open. Skipped CodeRabbit's BrandIcon dark-mode note: the preview renders in the default light card (the dark <img> is hidden there); per-theme sources would need component support it doesn't expose. Claude-Session: https://claude.ai/code/session_01R8Aq8F1nTuvJwfut7g3DVE
72 lines
1.4 KiB
TypeScript
72 lines
1.4 KiB
TypeScript
import type * as React from "react";
|
|
import { CheckIcon } from "@phosphor-icons/react";
|
|
import {
|
|
Avatar,
|
|
AvatarBadge,
|
|
AvatarFallback,
|
|
AvatarGroup,
|
|
AvatarGroupCount,
|
|
} from "@reactive-resume/ui/components/avatar";
|
|
|
|
const row: React.CSSProperties = { display: "flex", alignItems: "center", gap: 16, padding: 20 };
|
|
|
|
export const Fallback = () => (
|
|
<div style={row}>
|
|
<Avatar>
|
|
<AvatarFallback>AP</AvatarFallback>
|
|
</Avatar>
|
|
<Avatar>
|
|
<AvatarFallback>JD</AvatarFallback>
|
|
</Avatar>
|
|
<Avatar>
|
|
<AvatarFallback>MK</AvatarFallback>
|
|
</Avatar>
|
|
</div>
|
|
);
|
|
|
|
export const WithStatus = () => (
|
|
<div style={row}>
|
|
<Avatar>
|
|
<AvatarFallback>AP</AvatarFallback>
|
|
<AvatarBadge>
|
|
<CheckIcon weight="bold" />
|
|
</AvatarBadge>
|
|
</Avatar>
|
|
<Avatar size="lg">
|
|
<AvatarFallback>SR</AvatarFallback>
|
|
<AvatarBadge />
|
|
</Avatar>
|
|
</div>
|
|
);
|
|
|
|
export const Sizes = () => (
|
|
<div style={row}>
|
|
<Avatar size="sm">
|
|
<AvatarFallback>AP</AvatarFallback>
|
|
</Avatar>
|
|
<Avatar size="default">
|
|
<AvatarFallback>AP</AvatarFallback>
|
|
</Avatar>
|
|
<Avatar size="lg">
|
|
<AvatarFallback>AP</AvatarFallback>
|
|
</Avatar>
|
|
</div>
|
|
);
|
|
|
|
export const Group = () => (
|
|
<div style={row}>
|
|
<AvatarGroup>
|
|
<Avatar>
|
|
<AvatarFallback>AP</AvatarFallback>
|
|
</Avatar>
|
|
<Avatar>
|
|
<AvatarFallback>JD</AvatarFallback>
|
|
</Avatar>
|
|
<Avatar>
|
|
<AvatarFallback>MK</AvatarFallback>
|
|
</Avatar>
|
|
<AvatarGroupCount>+5</AvatarGroupCount>
|
|
</AvatarGroup>
|
|
</div>
|
|
);
|