{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "timeline-03",
  "title": "Timeline 03",
  "description": "A simple timeline block with icons",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "badge"
  ],
  "files": [
    {
      "path": "src/registry/blocks/radix/timeline-03/components/timeline.tsx",
      "content": "import { Bot, Bug, Building2, Calendar, Database } from \"lucide-react\";\nimport { Badge } from \"@/registry/bases/radix/ui/badge\";\n\nconst experiences = [\n  {\n    title: \"Senior Full Stack Developer\",\n    company: \"TechCorp Solutions\",\n    period: \"2023 - Present\",\n    description:\n      \"Led the development of enterprise-scale web applications, mentored junior developers, and implemented best practices for code quality and performance optimization.\",\n    technologies: [\"React\", \"Node.js\", \"TypeScript\", \"AWS\", \"MongoDB\"],\n    icon: Bot,\n  },\n  {\n    title: \"Full Stack Developer\",\n    company: \"Digital Innovations Inc\",\n    period: \"2021 - 2023\",\n    description:\n      \"Developed and maintained multiple client projects, implemented responsive designs, and integrated third-party APIs for enhanced functionality.\",\n    technologies: [\"React\", \"Express.js\", \"PostgreSQL\", \"Docker\", \"Redis\"],\n    icon: Database,\n  },\n  {\n    title: \"Frontend Developer\",\n    company: \"WebTech Studios\",\n    period: \"2018 - 2021\",\n    description:\n      \"Created responsive and interactive user interfaces, collaborated with designers, and optimized application performance.\",\n    technologies: [\"React\", \"JavaScript\", \"SASS\", \"Webpack\", \"Jest\"],\n    icon: Bug,\n  },\n];\n\nexport default function Timeline() {\n  return (\n    <div className=\"mx-auto max-w-(--breakpoint-sm) px-6 py-12 md:py-20\">\n      <div className=\"relative ml-3\">\n        {/* Timeline line */}\n        <div className=\"absolute inset-y-0 left-0 border-l-2\" />\n\n        {experiences.map(\n          (\n            { company, description, period, technologies, title, icon: Icon },\n            index\n          ) => (\n            <div className=\"relative pb-12 pl-10 last:pb-0\" key={index}>\n              {/* Timeline Icon */}\n              <div className=\"absolute left-px flex h-9 w-9 -translate-x-1/2 items-center justify-center rounded-full bg-background\">\n                <Icon className=\"h-5 w-5\" />\n              </div>\n\n              {/* Content */}\n              <div className=\"space-y-3\">\n                <div className=\"flex items-center gap-2.5\">\n                  <div className=\"flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-accent\">\n                    <Building2 className=\"h-5 w-5 text-muted-foreground\" />\n                  </div>\n                  <span className=\"font-medium text-base\">{company}</span>\n                </div>\n                <div>\n                  <h3 className=\"font-medium text-xl tracking-[-0.01em]\">\n                    {title}\n                  </h3>\n                  <div className=\"mt-2 flex items-center gap-2 text-sm\">\n                    <Calendar className=\"h-4 w-4\" />\n                    <span>{period}</span>\n                  </div>\n                </div>\n                <p className=\"text-pretty text-muted-foreground text-sm sm:text-base\">\n                  {description}\n                </p>\n                <div className=\"flex flex-wrap gap-2\">\n                  {technologies.map((tech) => (\n                    <Badge\n                      className=\"rounded-full\"\n                      key={tech}\n                      variant=\"secondary\"\n                    >\n                      {tech}\n                    </Badge>\n                  ))}\n                </div>\n              </div>\n            </div>\n          )\n        )}\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:block"
}