mirror of
https://github.com/AmruthPillai/Reactive-Resume.git
synced 2026-07-25 01:15:26 +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
85 lines
2.4 KiB
TypeScript
85 lines
2.4 KiB
TypeScript
import type * as React from "react";
|
|
import { DownloadSimpleIcon, FileDocIcon, FilePdfIcon, TrashIcon, WarningIcon } from "@phosphor-icons/react";
|
|
import {
|
|
Attachment,
|
|
AttachmentAction,
|
|
AttachmentActions,
|
|
AttachmentContent,
|
|
AttachmentDescription,
|
|
AttachmentGroup,
|
|
AttachmentMedia,
|
|
AttachmentTitle,
|
|
} from "@reactive-resume/ui/components/attachment";
|
|
|
|
const wrap: React.CSSProperties = { display: "flex", flexDirection: "column", gap: 12, padding: 16, width: 360 };
|
|
|
|
export const WithActions = () => (
|
|
<div style={wrap}>
|
|
<Attachment>
|
|
<AttachmentMedia>
|
|
<FilePdfIcon />
|
|
</AttachmentMedia>
|
|
<AttachmentContent>
|
|
<AttachmentTitle>Ansel_Bradford_Resume.pdf</AttachmentTitle>
|
|
<AttachmentDescription>248 KB · PDF</AttachmentDescription>
|
|
</AttachmentContent>
|
|
<AttachmentActions>
|
|
<AttachmentAction aria-label="Download">
|
|
<DownloadSimpleIcon />
|
|
</AttachmentAction>
|
|
<AttachmentAction aria-label="Remove">
|
|
<TrashIcon />
|
|
</AttachmentAction>
|
|
</AttachmentActions>
|
|
</Attachment>
|
|
</div>
|
|
);
|
|
|
|
export const States = () => (
|
|
<div style={wrap}>
|
|
<Attachment size="sm" state="uploading">
|
|
<AttachmentMedia>
|
|
<FileDocIcon />
|
|
</AttachmentMedia>
|
|
<AttachmentContent>
|
|
<AttachmentTitle>cover-letter.docx</AttachmentTitle>
|
|
<AttachmentDescription>Uploading…</AttachmentDescription>
|
|
</AttachmentContent>
|
|
</Attachment>
|
|
<Attachment size="sm" state="error">
|
|
<AttachmentMedia>
|
|
<WarningIcon />
|
|
</AttachmentMedia>
|
|
<AttachmentContent>
|
|
<AttachmentTitle>portfolio-2024.zip</AttachmentTitle>
|
|
<AttachmentDescription>Upload failed · file too large</AttachmentDescription>
|
|
</AttachmentContent>
|
|
</Attachment>
|
|
</div>
|
|
);
|
|
|
|
export const Group = () => (
|
|
<div style={{ padding: 16, width: 360 }}>
|
|
<AttachmentGroup>
|
|
<Attachment orientation="vertical" size="sm">
|
|
<AttachmentMedia>
|
|
<FilePdfIcon />
|
|
</AttachmentMedia>
|
|
<AttachmentContent>
|
|
<AttachmentTitle>Resume.pdf</AttachmentTitle>
|
|
<AttachmentDescription>248 KB</AttachmentDescription>
|
|
</AttachmentContent>
|
|
</Attachment>
|
|
<Attachment orientation="vertical" size="sm">
|
|
<AttachmentMedia>
|
|
<FileDocIcon />
|
|
</AttachmentMedia>
|
|
<AttachmentContent>
|
|
<AttachmentTitle>cover-letter.docx</AttachmentTitle>
|
|
<AttachmentDescription>19 KB</AttachmentDescription>
|
|
</AttachmentContent>
|
|
</Attachment>
|
|
</AttachmentGroup>
|
|
</div>
|
|
);
|