mirror of
https://github.com/AmruthPillai/Reactive-Resume.git
synced 2026-07-13 22:37:14 +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
68 lines
1.9 KiB
TypeScript
68 lines
1.9 KiB
TypeScript
import type * as React from "react";
|
|
import {
|
|
AlignCenterHorizontalIcon,
|
|
AlignLeftIcon,
|
|
AlignRightIcon,
|
|
ArrowClockwiseIcon,
|
|
ArrowCounterClockwiseIcon,
|
|
TextBIcon,
|
|
TextItalicIcon,
|
|
TextUnderlineIcon,
|
|
} from "@phosphor-icons/react";
|
|
import { Button } from "@reactive-resume/ui/components/button";
|
|
import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText } from "@reactive-resume/ui/components/button-group";
|
|
|
|
const wrap: React.CSSProperties = { display: "flex", flexDirection: "column", gap: 16, padding: 16 };
|
|
|
|
export const Formatting = () => (
|
|
<div style={wrap}>
|
|
<ButtonGroup>
|
|
<Button variant="outline" size="icon" aria-label="Bold">
|
|
<TextBIcon />
|
|
</Button>
|
|
<Button variant="outline" size="icon" aria-label="Italic">
|
|
<TextItalicIcon />
|
|
</Button>
|
|
<Button variant="outline" size="icon" aria-label="Underline">
|
|
<TextUnderlineIcon />
|
|
</Button>
|
|
<ButtonGroupSeparator />
|
|
<Button variant="outline" size="icon" aria-label="Align left">
|
|
<AlignLeftIcon />
|
|
</Button>
|
|
<Button variant="outline" size="icon" aria-label="Align center">
|
|
<AlignCenterHorizontalIcon />
|
|
</Button>
|
|
<Button variant="outline" size="icon" aria-label="Align right">
|
|
<AlignRightIcon />
|
|
</Button>
|
|
</ButtonGroup>
|
|
|
|
<ButtonGroup>
|
|
<Button variant="outline">
|
|
<ArrowCounterClockwiseIcon /> Undo
|
|
</Button>
|
|
<Button variant="outline">
|
|
<ArrowClockwiseIcon /> Redo
|
|
</Button>
|
|
</ButtonGroup>
|
|
</div>
|
|
);
|
|
|
|
export const WithText = () => (
|
|
<div style={wrap}>
|
|
<ButtonGroup>
|
|
<ButtonGroupText>Zoom</ButtonGroupText>
|
|
<Button variant="outline">50%</Button>
|
|
<Button variant="outline">100%</Button>
|
|
<Button variant="outline">150%</Button>
|
|
</ButtonGroup>
|
|
|
|
<ButtonGroup orientation="vertical">
|
|
<Button variant="outline">Export PDF</Button>
|
|
<Button variant="outline">Export DOCX</Button>
|
|
<Button variant="outline">Copy link</Button>
|
|
</ButtonGroup>
|
|
</div>
|
|
);
|