mirror of
https://github.com/AmruthPillai/Reactive-Resume.git
synced 2026-07-16 07:58:10 +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
52 lines
1.3 KiB
TypeScript
52 lines
1.3 KiB
TypeScript
import type * as React from "react";
|
|
import { ArrowRightIcon, PlusIcon, TrashIcon } from "@phosphor-icons/react";
|
|
import { Button } from "@reactive-resume/ui/components/button";
|
|
|
|
const row: React.CSSProperties = { display: "flex", flexWrap: "wrap", alignItems: "center", gap: 12, padding: 16 };
|
|
|
|
export const Variants = () => (
|
|
<div style={row}>
|
|
<Button>Save changes</Button>
|
|
<Button variant="secondary">Secondary</Button>
|
|
<Button variant="outline">Outline</Button>
|
|
<Button variant="ghost">Ghost</Button>
|
|
<Button variant="destructive">Delete</Button>
|
|
<Button variant="link">Learn more</Button>
|
|
</div>
|
|
);
|
|
|
|
export const Sizes = () => (
|
|
<div style={row}>
|
|
<Button size="xs">Extra small</Button>
|
|
<Button size="sm">Small</Button>
|
|
<Button size="default">Default</Button>
|
|
<Button size="lg">Large</Button>
|
|
</div>
|
|
);
|
|
|
|
export const WithIcons = () => (
|
|
<div style={row}>
|
|
<Button>
|
|
<PlusIcon /> Add section
|
|
</Button>
|
|
<Button variant="outline">
|
|
Continue <ArrowRightIcon />
|
|
</Button>
|
|
<Button variant="destructive">
|
|
<TrashIcon /> Remove
|
|
</Button>
|
|
<Button size="icon" variant="outline" aria-label="Add section">
|
|
<PlusIcon />
|
|
</Button>
|
|
</div>
|
|
);
|
|
|
|
export const Disabled = () => (
|
|
<div style={row}>
|
|
<Button disabled>Saving…</Button>
|
|
<Button variant="outline" disabled>
|
|
Disabled
|
|
</Button>
|
|
</div>
|
|
);
|