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
49 lines
1.6 KiB
TypeScript
49 lines
1.6 KiB
TypeScript
import type * as React from "react";
|
|
import { Bubble, BubbleContent, BubbleGroup, BubbleReactions } from "@reactive-resume/ui/components/bubble";
|
|
|
|
const wrap: React.CSSProperties = { display: "flex", flexDirection: "column", gap: 8, padding: 16, width: 420 };
|
|
|
|
export const Conversation = () => (
|
|
<div style={wrap}>
|
|
<BubbleGroup>
|
|
<Bubble align="end">
|
|
<BubbleContent>Can you make my summary sound more senior without exaggerating?</BubbleContent>
|
|
</Bubble>
|
|
<Bubble variant="muted" align="start">
|
|
<BubbleContent>
|
|
I tightened it to lead with scope and outcomes. Want me to mirror that tone in your experience bullets too?
|
|
</BubbleContent>
|
|
</Bubble>
|
|
<Bubble align="end">
|
|
<BubbleContent>Yes, keep it concise.</BubbleContent>
|
|
</Bubble>
|
|
</BubbleGroup>
|
|
</div>
|
|
);
|
|
|
|
export const Variants = () => (
|
|
<div style={wrap}>
|
|
<Bubble variant="default" align="end">
|
|
<BubbleContent>Applied 3 edits to your resume.</BubbleContent>
|
|
</Bubble>
|
|
<Bubble variant="tinted" align="start">
|
|
<BubbleContent>I emphasized measurable launch outcomes in your last role.</BubbleContent>
|
|
</Bubble>
|
|
<Bubble variant="outline" align="start">
|
|
<BubbleContent>Draft saved — publish when you're ready.</BubbleContent>
|
|
</Bubble>
|
|
<Bubble variant="destructive" align="start">
|
|
<BubbleContent>Couldn't reach the AI provider. Retry?</BubbleContent>
|
|
</Bubble>
|
|
</div>
|
|
);
|
|
|
|
export const WithReactions = () => (
|
|
<div style={{ padding: 24, width: 420 }}>
|
|
<Bubble variant="secondary" align="start">
|
|
<BubbleContent>Rewrote your headline to target a Senior Product Manager role.</BubbleContent>
|
|
<BubbleReactions>👍 2</BubbleReactions>
|
|
</Bubble>
|
|
</div>
|
|
);
|