mirror of
https://github.com/AmruthPillai/Reactive-Resume.git
synced 2026-07-16 16:19:47 +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
66 lines
1.8 KiB
TypeScript
66 lines
1.8 KiB
TypeScript
import type * as React from "react";
|
|
import { SparkleIcon, UserIcon } from "@phosphor-icons/react";
|
|
import { Bubble, BubbleContent } from "@reactive-resume/ui/components/bubble";
|
|
import {
|
|
Message,
|
|
MessageAvatar,
|
|
MessageContent,
|
|
MessageFooter,
|
|
MessageGroup,
|
|
MessageHeader,
|
|
} from "@reactive-resume/ui/components/message";
|
|
|
|
const avatar: React.CSSProperties = { display: "flex", alignItems: "center", justifyContent: "center", padding: 8 };
|
|
|
|
export const Conversation = () => (
|
|
<div style={{ display: "flex", padding: 16, width: 460 }}>
|
|
<MessageGroup style={{ width: "100%" }}>
|
|
<Message align="end">
|
|
<MessageAvatar>
|
|
<span style={avatar}>
|
|
<UserIcon />
|
|
</span>
|
|
</MessageAvatar>
|
|
<MessageContent>
|
|
<Bubble align="end">
|
|
<BubbleContent>Tailor my resume for a product manager role.</BubbleContent>
|
|
</Bubble>
|
|
</MessageContent>
|
|
</Message>
|
|
<Message align="start">
|
|
<MessageAvatar>
|
|
<span style={avatar}>
|
|
<SparkleIcon />
|
|
</span>
|
|
</MessageAvatar>
|
|
<MessageContent>
|
|
<Bubble variant="muted" align="start">
|
|
<BubbleContent>
|
|
Done — I emphasized roadmap ownership and stakeholder communication in your summary.
|
|
</BubbleContent>
|
|
</Bubble>
|
|
</MessageContent>
|
|
</Message>
|
|
</MessageGroup>
|
|
</div>
|
|
);
|
|
|
|
export const WithMeta = () => (
|
|
<div style={{ display: "flex", padding: 16, width: 460 }}>
|
|
<Message align="start">
|
|
<MessageAvatar>
|
|
<span style={avatar}>
|
|
<SparkleIcon />
|
|
</span>
|
|
</MessageAvatar>
|
|
<MessageContent>
|
|
<MessageHeader>Reactive AI</MessageHeader>
|
|
<Bubble variant="tinted" align="start">
|
|
<BubbleContent>I found 4 weak bullets and rewrote them with stronger verbs and metrics.</BubbleContent>
|
|
</Bubble>
|
|
<MessageFooter>Just now · applied 4 edits</MessageFooter>
|
|
</MessageContent>
|
|
</Message>
|
|
</div>
|
|
);
|