feat: added a timeline component

apps/registry/app/[username]/ProfileLayout.js

@@ -23,6 +23,7 @@ export default function Layout({ children, resume, username, session }) {
 
   const navLinks = [
     { href: `/${username}/dashboard`, label: 'Dashboard' },
+    { href: `/${username}/timeline`, label: 'Timeline' },
     { href: `/${username}/jobs`, label: 'Jobs' },
     { href: `/${username}/suggestions`, label: 'Suggestions' },
     { href: `/${username}/letter`, label: 'Letter' },

apps/registry/app/[username]/timeline/Timeline.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from '@repo/ui/components/ui/card';
+
+import {
+  Timeline,
+  TimelineContent,
+  TimelineDot,
+  TimelineHeading,
+  TimelineItem,
+  TimelineLine,
+} from '@repo/ui/components/ui/timeline';
+import { Briefcase } from 'lucide-react';
+
+const SimpleVerticalTimeline = ({ resume }) => {
+  const workExperiences = resume.work || [];
+
+  return (
+    <div className="min-h-screen p-8">
+      <Card className="mb-8">
+        <CardHeader>
+          <CardTitle className="text-xl font-semibold flex items-center">
+            <Briefcase className="w-5 h-5 mr-2" />
+            Career Timeline
+          </CardTitle>
+        </CardHeader>
+
+        <CardContent>
+          <div>
+            <Timeline positions="center">
+              {workExperiences.map((work, index) => {
+                const side = index % 2 === 0 ? 'left' : 'right';
+                const opposite = side === 'left' ? 'right' : 'left';
+                return (
+                  <TimelineItem key={index} status="done">
+                    <TimelineHeading className="text-xl" side={side}>
+                      {work.name}
+                    </TimelineHeading>
+                    <TimelineHeading side={opposite} variant="secondary">
+                      {work.startDate} - {work.endDate}
+                    </TimelineHeading>
+                    <TimelineDot status="done" />
+                    <TimelineLine done />
+                    <TimelineContent className="text-sm" side={side}>
+                      <span className="font-bold">{work.position}</span> <br />
+                      {work.summary}
+                    </TimelineContent>
+                  </TimelineItem>
+                );
+              })}
+
+              <TimelineItem>
+                <TimelineDot />
+                <TimelineHeading>Beginning!</TimelineHeading>
+              </TimelineItem>
+            </Timeline>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+export default SimpleVerticalTimeline;

apps/registry/app/[username]/dashboard2/page.js → apps/registry/app/[username]/timeline/page.js

@@ -3,20 +3,20 @@
 import React from 'react';
 import styled from 'styled-components';
 import { useProfileData } from '../ProfileContext';
-import ResumeDashboard from './Dashboard';
+import TimelineComponent from './Timeline';
 
 const Container = styled.div`
   font-size: 1.4rem;
 `;
 
-const Resumes = () => {
+const Timeline = () => {
   const { resume } = useProfileData();
 
   return (
     <Container>
-      <ResumeDashboard resume={resume} />
+      <TimelineComponent resume={resume} />
     </Container>
   );
 };
 
-export default Resumes;
+export default Timeline;

packages/ui/package.json

@@ -20,8 +20,10 @@
     "typescript": "^5.4.5"
   },
   "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-progress": "^1.1.0",
+    "@radix-ui/react-scroll-area": "^1.1.0",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tabs": "^1.1.0",
     "class-variance-authority": "^0.7.0",