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
56 lines
1.5 KiB
TypeScript
56 lines
1.5 KiB
TypeScript
import type * as React from "react";
|
|
import { CopyIcon, GlobeIcon, MagnifyingGlassIcon } from "@phosphor-icons/react";
|
|
import {
|
|
InputGroup,
|
|
InputGroupAddon,
|
|
InputGroupButton,
|
|
InputGroupInput,
|
|
InputGroupText,
|
|
InputGroupTextarea,
|
|
} from "@reactive-resume/ui/components/input-group";
|
|
|
|
const wrap: React.CSSProperties = { display: "flex", flexDirection: "column", gap: 16, padding: 16, width: 380 };
|
|
|
|
export const Addons = () => (
|
|
<div style={wrap}>
|
|
<InputGroup>
|
|
<InputGroupAddon>
|
|
<MagnifyingGlassIcon />
|
|
</InputGroupAddon>
|
|
<InputGroupInput placeholder="Search resumes" defaultValue="Product Designer" />
|
|
</InputGroup>
|
|
|
|
<InputGroup>
|
|
<InputGroupAddon>
|
|
<GlobeIcon />
|
|
<InputGroupText>rxresu.me/u/</InputGroupText>
|
|
</InputGroupAddon>
|
|
<InputGroupInput defaultValue="jordan-rivera" />
|
|
</InputGroup>
|
|
|
|
<InputGroup>
|
|
<InputGroupInput readOnly defaultValue="rxr_live_9f3c8a21bd47e50a" />
|
|
<InputGroupAddon align="inline-end">
|
|
<InputGroupButton size="icon-sm" aria-label="Copy API key">
|
|
<CopyIcon />
|
|
</InputGroupButton>
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
</div>
|
|
);
|
|
|
|
export const WithTextarea = () => (
|
|
<div style={wrap}>
|
|
<InputGroup>
|
|
<InputGroupTextarea
|
|
rows={3}
|
|
defaultValue="Senior product designer focused on design systems, accessibility, and shipping polished interfaces."
|
|
/>
|
|
<InputGroupAddon align="block-end">
|
|
<InputGroupText>240 characters left</InputGroupText>
|
|
<InputGroupButton style={{ marginLeft: "auto" }}>Generate with AI</InputGroupButton>
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
</div>
|
|
);
|