mirror of
https://github.com/AmruthPillai/Reactive-Resume.git
synced 2026-07-21 15:33:30 +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 { BriefcaseIcon, GraduationCapIcon, SparkleIcon } from "@phosphor-icons/react";
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@reactive-resume/ui/components/tabs";
|
|
|
|
const wrap: React.CSSProperties = { width: 460, padding: 16 };
|
|
const panel: React.CSSProperties = { padding: "12px 4px", lineHeight: 1.6 };
|
|
|
|
export const ResumeSections = () => (
|
|
<div style={wrap}>
|
|
<Tabs defaultValue="experience">
|
|
<TabsList>
|
|
<TabsTrigger value="experience">
|
|
<BriefcaseIcon /> Experience
|
|
</TabsTrigger>
|
|
<TabsTrigger value="education">
|
|
<GraduationCapIcon /> Education
|
|
</TabsTrigger>
|
|
<TabsTrigger value="skills">
|
|
<SparkleIcon /> Skills
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
<TabsContent value="experience" style={panel}>
|
|
<strong>Staff Engineer · Vercel</strong>
|
|
<div>Owned the edge runtime rollout serving 2B requests per day.</div>
|
|
</TabsContent>
|
|
<TabsContent value="education" style={panel}>
|
|
<strong>M.S. Computer Science · Carnegie Mellon</strong>
|
|
<div>Focus on distributed systems and human-computer interaction.</div>
|
|
</TabsContent>
|
|
<TabsContent value="skills" style={panel}>
|
|
<strong>Core stack</strong>
|
|
<div>TypeScript, React, Go, PostgreSQL, and Kubernetes.</div>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
);
|
|
|
|
export const LineVariant = () => (
|
|
<div style={wrap}>
|
|
<Tabs defaultValue="preview">
|
|
<TabsList variant="line">
|
|
<TabsTrigger value="preview">Preview</TabsTrigger>
|
|
<TabsTrigger value="share">Share</TabsTrigger>
|
|
<TabsTrigger value="export">Export</TabsTrigger>
|
|
</TabsList>
|
|
<TabsContent value="preview" style={panel}>
|
|
Your resume renders live as you edit each section.
|
|
</TabsContent>
|
|
<TabsContent value="share" style={panel}>
|
|
Publish a public link at reactive-resume.app/u/your-name.
|
|
</TabsContent>
|
|
<TabsContent value="export" style={panel}>
|
|
Download a print-ready PDF or DOCX in one click.
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
);
|