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
58 lines
2.0 KiB
TypeScript
58 lines
2.0 KiB
TypeScript
import type * as React from "react";
|
|
import { ResizableGroup, ResizablePanel, ResizableSeparator } from "@reactive-resume/ui/components/resizable";
|
|
|
|
const panelStyle: React.CSSProperties = { height: "100%", padding: 16, fontSize: 14, lineHeight: 1.6 };
|
|
const label: React.CSSProperties = {
|
|
fontSize: 11,
|
|
fontWeight: 600,
|
|
textTransform: "uppercase",
|
|
letterSpacing: "0.05em",
|
|
color: "var(--muted-foreground)",
|
|
marginBottom: 8,
|
|
};
|
|
|
|
export const BuilderLayout = () => (
|
|
<div style={{ height: 240, width: 460, border: "1px solid var(--border)", borderRadius: 8, overflow: "hidden" }}>
|
|
<ResizableGroup orientation="horizontal">
|
|
<ResizablePanel defaultSize={40}>
|
|
<div style={panelStyle}>
|
|
<div style={label}>Editor</div>
|
|
<div>Basics</div>
|
|
<div>Work Experience</div>
|
|
<div>Education</div>
|
|
<div>Skills</div>
|
|
</div>
|
|
</ResizablePanel>
|
|
<ResizableSeparator withHandle />
|
|
<ResizablePanel defaultSize={60}>
|
|
<div style={{ ...panelStyle, background: "var(--muted)" }}>
|
|
<div style={label}>Live Preview</div>
|
|
<div style={{ fontWeight: 600, fontSize: 16 }}>Jordan Rivera</div>
|
|
<div style={{ color: "var(--muted-foreground)" }}>Senior Product Designer</div>
|
|
</div>
|
|
</ResizablePanel>
|
|
</ResizableGroup>
|
|
</div>
|
|
);
|
|
|
|
export const VerticalSplit = () => (
|
|
<div style={{ height: 240, width: 300, border: "1px solid var(--border)", borderRadius: 8, overflow: "hidden" }}>
|
|
<ResizableGroup orientation="vertical">
|
|
<ResizablePanel defaultSize={50}>
|
|
<div style={panelStyle}>
|
|
<div style={label}>Summary</div>
|
|
<div>Eight years building design systems and shipping delightful product experiences.</div>
|
|
</div>
|
|
</ResizablePanel>
|
|
<ResizableSeparator withHandle />
|
|
<ResizablePanel defaultSize={50}>
|
|
<div style={{ ...panelStyle, background: "var(--muted)" }}>
|
|
<div style={label}>Contact</div>
|
|
<div>jordan.rivera@email.com</div>
|
|
<div>San Francisco, CA</div>
|
|
</div>
|
|
</ResizablePanel>
|
|
</ResizableGroup>
|
|
</div>
|
|
);
|