mirror of
https://github.com/AmruthPillai/Reactive-Resume.git
synced 2026-07-24 17:03:55 +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
42 lines
1.2 KiB
TypeScript
42 lines
1.2 KiB
TypeScript
import type * as React from "react";
|
|
import { Skeleton } from "@reactive-resume/ui/components/skeleton";
|
|
|
|
const pad: React.CSSProperties = { padding: 20 };
|
|
|
|
export const TextLines = () => (
|
|
<div style={{ ...pad, display: "flex", flexDirection: "column", gap: 10, width: 320 }}>
|
|
<Skeleton style={{ height: 12, width: "70%" }} />
|
|
<Skeleton style={{ height: 12, width: "100%" }} />
|
|
<Skeleton style={{ height: 12, width: "90%" }} />
|
|
<Skeleton style={{ height: 12, width: "40%" }} />
|
|
</div>
|
|
);
|
|
|
|
export const ProfileHeader = () => (
|
|
<div style={{ ...pad, display: "flex", alignItems: "center", gap: 14 }}>
|
|
<Skeleton style={{ height: 48, width: 48, borderRadius: "9999px" }} />
|
|
<div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
|
|
<Skeleton style={{ height: 14, width: 160 }} />
|
|
<Skeleton style={{ height: 12, width: 100 }} />
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
export const ResumeCard = () => (
|
|
<div
|
|
style={{
|
|
...pad,
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
gap: 12,
|
|
width: 220,
|
|
border: "1px solid var(--border)",
|
|
borderRadius: 12,
|
|
}}
|
|
>
|
|
<Skeleton style={{ height: 140, width: "100%" }} />
|
|
<Skeleton style={{ height: 14, width: "60%" }} />
|
|
<Skeleton style={{ height: 12, width: "40%" }} />
|
|
</div>
|
|
);
|