mirror of
https://github.com/AmruthPillai/Reactive-Resume.git
synced 2026-07-24 00:43:29 +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
40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
import type * as React from "react";
|
|
import { CheckCircleIcon, SparkleIcon, WarningCircleIcon } from "@phosphor-icons/react";
|
|
import { Marker, MarkerContent, MarkerIcon } from "@reactive-resume/ui/components/marker";
|
|
|
|
const wrap: React.CSSProperties = { display: "flex", flexDirection: "column", gap: 12, padding: 16, width: 360 };
|
|
|
|
export const Statuses = () => (
|
|
<div style={wrap}>
|
|
<Marker style={{ width: "fit-content", borderRadius: 8, padding: "12px 16px", background: "var(--muted)" }}>
|
|
<MarkerIcon>
|
|
<SparkleIcon />
|
|
</MarkerIcon>
|
|
<MarkerContent>Tailoring your resume…</MarkerContent>
|
|
</Marker>
|
|
<Marker style={{ width: "fit-content" }}>
|
|
<MarkerIcon>
|
|
<CheckCircleIcon />
|
|
</MarkerIcon>
|
|
<MarkerContent>Applied 4 edits to your resume</MarkerContent>
|
|
</Marker>
|
|
<Marker style={{ width: "fit-content" }}>
|
|
<MarkerIcon>
|
|
<WarningCircleIcon />
|
|
</MarkerIcon>
|
|
<MarkerContent>Couldn't reach the AI provider</MarkerContent>
|
|
</Marker>
|
|
</div>
|
|
);
|
|
|
|
export const Dividers = () => (
|
|
<div style={wrap}>
|
|
<Marker variant="separator">
|
|
<MarkerContent>Today</MarkerContent>
|
|
</Marker>
|
|
<Marker variant="border">
|
|
<MarkerContent>Conversation history</MarkerContent>
|
|
</Marker>
|
|
</div>
|
|
);
|