mirror of
https://github.com/AmruthPillai/Reactive-Resume.git
synced 2026-07-20 23:13:23 +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
41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
import type * as React from "react";
|
|
import { Input } from "@reactive-resume/ui/components/input";
|
|
import { Label } from "@reactive-resume/ui/components/label";
|
|
|
|
const field: React.CSSProperties = { display: "flex", flexDirection: "column", gap: 6, padding: 16, width: 320 };
|
|
|
|
export const Default = () => (
|
|
<div style={field}>
|
|
<Label htmlFor="full-name">Full name</Label>
|
|
<Input id="full-name" defaultValue="Ada Lovelace" />
|
|
</div>
|
|
);
|
|
|
|
export const Placeholder = () => (
|
|
<div style={field}>
|
|
<Label htmlFor="headline">Headline</Label>
|
|
<Input id="headline" placeholder="e.g. Senior Software Engineer" />
|
|
</div>
|
|
);
|
|
|
|
export const Email = () => (
|
|
<div style={field}>
|
|
<Label htmlFor="email">Email</Label>
|
|
<Input id="email" type="email" defaultValue="ada@analyticalengine.dev" />
|
|
</div>
|
|
);
|
|
|
|
export const Invalid = () => (
|
|
<div style={field}>
|
|
<Label htmlFor="website">Website</Label>
|
|
<Input id="website" aria-invalid defaultValue="not-a-valid-url" />
|
|
</div>
|
|
);
|
|
|
|
export const Disabled = () => (
|
|
<div style={field}>
|
|
<Label htmlFor="username">Username</Label>
|
|
<Input id="username" disabled defaultValue="ada.lovelace" />
|
|
</div>
|
|
);
|