{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"marketing-careers-job-listings","type":"registry:block","title":"Job Listings","files":[{"path":"components/blocks/marketing/careers/job-listings.tsx","content":"import * as React from 'react';\nimport { Badge } from '@/components/ui/badge';\nimport { Button } from '@/components/ui/button';\nimport {\n  Card,\n  CardContent,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/components/ui/card';\nimport { Input } from '@/components/ui/input';\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';\nimport { cn } from '@/lib/utils';\nimport {\n  ChevronRightIcon,\n  Search,\n  MapPinIcon,\n  BriefcaseIcon,\n  ClockIcon,\n} from 'lucide-react';\n\ninterface JobPosition {\n  id: string;\n  title: string;\n  department: string;\n  location: string;\n  locationType: 'remote' | 'hybrid' | 'onsite';\n  employmentType: 'full-time' | 'part-time' | 'contract';\n  postedDate: string;\n  description: string;\n  requirements: string[];\n  salaryRange?: string;\n  featured?: boolean;\n}\n\nexport type LocationType = 'remote' | 'hybrid' | 'onsite';\nexport type EmploymentType =\n  | 'full-time'\n  | 'part-time'\n  | 'contract'\n  | 'internship';\n\nexport default function JobListings() {\n  const [searchQuery, setSearchQuery] = React.useState('');\n  const [activeLocation, setActiveLocation] = React.useState<string | null>(\n    null\n  );\n  const [activeDepartment, setActiveDepartment] = React.useState<string | null>(\n    null\n  );\n\n  // Sample job data\n  const jobs: JobPosition[] = [\n    {\n      id: '1',\n      title: 'Senior Frontend Developer',\n      department: 'Engineering',\n      location: 'San Francisco, CA',\n      locationType: 'hybrid',\n      employmentType: 'full-time',\n      postedDate: '2023-06-15',\n      description:\n        \"We're looking for a Senior Frontend Developer to join our team and help build our next-generation web applications. You'll be responsible for architecting and implementing UI components, optimizing performance, and mentoring junior developers.\",\n      requirements: [\n        '5+ years of experience with modern JavaScript frameworks (React, Vue, Angular)',\n        'Strong knowledge of TypeScript, HTML and CSS',\n        'Experience with state management solutions',\n        'Understanding of web accessibility standards',\n        'Excellent communication skills',\n      ],\n      salaryRange: '$120,000 - $150,000',\n      featured: true,\n    },\n    {\n      id: '2',\n      title: 'Product Designer',\n      department: 'Design',\n      location: 'New York, NY',\n      locationType: 'onsite',\n      employmentType: 'full-time',\n      postedDate: '2023-06-20',\n      description:\n        \"We are seeking a creative Product Designer to join our growing design team. You'll collaborate with product managers, engineers, and other designers to create intuitive and visually appealing user experiences for our products.\",\n      requirements: [\n        '3+ years of experience in product design',\n        'Proficiency in design tools like Figma and Adobe Creative Suite',\n        'Experience with user research and usability testing',\n        'Strong portfolio showcasing your design process',\n        'Excellent problem-solving skills',\n      ],\n      salaryRange: '$90,000 - $120,000',\n      featured: true,\n    },\n    {\n      id: '3',\n      title: 'DevOps Engineer',\n      department: 'Engineering',\n      location: 'Remote',\n      locationType: 'remote',\n      employmentType: 'full-time',\n      postedDate: '2023-06-25',\n      description:\n        \"We're looking for a DevOps Engineer to help us build and maintain our cloud infrastructure. You'll work closely with our development team to implement CI/CD pipelines, optimize system performance, and ensure high availability of our services.\",\n      requirements: [\n        '4+ years of experience in DevOps or system administration',\n        'Experience with AWS, GCP, or Azure',\n        'Knowledge of container orchestration (Kubernetes, Docker)',\n        'Experience with infrastructure as code (Terraform, CloudFormation)',\n        'Strong scripting skills (Bash, Python)',\n      ],\n      salaryRange: '$110,000 - $140,000',\n    },\n    {\n      id: '4',\n      title: 'Content Marketing Manager',\n      department: 'Marketing',\n      location: 'Chicago, IL',\n      locationType: 'hybrid',\n      employmentType: 'full-time',\n      postedDate: '2023-07-01',\n      description:\n        \"We're seeking a Content Marketing Manager to develop and execute our content strategy. You'll create compelling content for various channels, manage our editorial calendar, and analyze content performance to drive engagement and conversions.\",\n      requirements: [\n        '3+ years of experience in content marketing',\n        'Excellent writing and editing skills',\n        'Experience with SEO and content analytics',\n        'Strong project management abilities',\n        'Knowledge of content management systems',\n      ],\n      salaryRange: '$80,000 - $100,000',\n    },\n    {\n      id: '5',\n      title: 'Data Scientist',\n      department: 'Data',\n      location: 'Remote',\n      locationType: 'remote',\n      employmentType: 'full-time',\n      postedDate: '2023-07-05',\n      description:\n        \"We're looking for a Data Scientist to help us extract insights from our vast amounts of data. You'll develop machine learning models, conduct statistical analyses, and work with product teams to implement data-driven features.\",\n      requirements: [\n        'MSc or PhD in Computer Science, Statistics, or related field',\n        '3+ years of experience in data science or machine learning',\n        'Proficiency in Python and data science libraries (NumPy, Pandas, Scikit-learn)',\n        'Experience with SQL and database systems',\n        'Strong communication skills to explain complex concepts to non-technical stakeholders',\n      ],\n      salaryRange: '$130,000 - $160,000',\n      featured: true,\n    },\n    {\n      id: '6',\n      title: 'Customer Success Manager',\n      department: 'Customer Success',\n      location: 'Austin, TX',\n      locationType: 'onsite',\n      employmentType: 'full-time',\n      postedDate: '2023-07-10',\n      description:\n        \"We're looking for a Customer Success Manager to ensure our customers achieve their business goals using our product. You'll manage customer relationships, drive product adoption, and work cross-functionally to address customer needs.\",\n      requirements: [\n        '3+ years of experience in customer success or account management',\n        'Strong interpersonal and communication skills',\n        'Problem-solving abilities and attention to detail',\n        'Experience with CRM software',\n        'Ability to prioritize and manage multiple customers',\n      ],\n      salaryRange: '$75,000 - $95,000',\n    },\n    {\n      id: '7',\n      title: 'Backend Developer',\n      department: 'Engineering',\n      location: 'Remote',\n      locationType: 'remote',\n      employmentType: 'full-time',\n      postedDate: '2023-07-15',\n      description:\n        \"We're seeking a skilled Backend Developer to help build and scale our API services. You'll design and implement efficient, secure, and reliable backend systems that power our applications.\",\n      requirements: [\n        '4+ years of experience in backend development',\n        'Proficiency in at least one backend language (Node.js, Python, Go, etc.)',\n        'Experience with relational and NoSQL databases',\n        'Knowledge of API design and development',\n        'Understanding of distributed systems and microservices architecture',\n      ],\n      salaryRange: '$110,000 - $140,000',\n    },\n    {\n      id: '8',\n      title: 'QA Engineer',\n      department: 'Engineering',\n      location: 'Seattle, WA',\n      locationType: 'hybrid',\n      employmentType: 'full-time',\n      postedDate: '2023-07-20',\n      description:\n        \"We're looking for a QA Engineer to ensure the quality of our products. You'll design and execute test plans, automate testing processes, and collaborate with developers to identify and resolve issues.\",\n      requirements: [\n        '3+ years of experience in software testing',\n        'Experience with test automation frameworks',\n        'Knowledge of testing methodologies',\n        'Attention to detail and analytical thinking',\n        'Good understanding of the software development lifecycle',\n      ],\n      salaryRange: '$90,000 - $110,000',\n    },\n  ];\n\n  // Extract unique departments and locations for filters\n  const departments = Array.from(new Set(jobs.map((job) => job.department)));\n  const locations = Array.from(new Set(jobs.map((job) => job.location)));\n\n  const locationTypeIcons: Record<string, React.ReactNode> = {\n    remote: (\n      <Badge\n        variant=\"outline\"\n        className=\"rounded-full border-green-200 bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400\"\n      >\n        Remote\n      </Badge>\n    ),\n    hybrid: (\n      <Badge\n        variant=\"outline\"\n        className=\"rounded-full border-blue-200 bg-blue-100 text-blue-800 dark:bg-blue-900/20 dark:text-blue-400\"\n      >\n        Hybrid\n      </Badge>\n    ),\n    onsite: (\n      <Badge\n        variant=\"outline\"\n        className=\"rounded-full border-orange-200 bg-orange-100 text-orange-800 dark:bg-orange-900/20 dark:text-orange-400\"\n      >\n        On-site\n      </Badge>\n    ),\n  };\n\n  // Calculate days ago for a job posting\n  const calculateDaysAgo = (dateString: string) => {\n    const postedDate = new Date(dateString);\n    const currentDate = new Date();\n    const differenceInTime = currentDate.getTime() - postedDate.getTime();\n    const differenceInDays = Math.floor(differenceInTime / (1000 * 3600 * 24));\n\n    if (differenceInDays === 0) {\n      return 'Today';\n    } else if (differenceInDays === 1) {\n      return 'Yesterday';\n    } else {\n      return `${differenceInDays} days ago`;\n    }\n  };\n\n  // Filter jobs based on search query and selected filters\n  const filteredJobs = React.useMemo(() => {\n    return jobs.filter((job) => {\n      // Search filter\n      const matchesSearch =\n        searchQuery === '' ||\n        job.title.toLowerCase().includes(searchQuery.toLowerCase()) ||\n        job.description.toLowerCase().includes(searchQuery.toLowerCase()) ||\n        job.department.toLowerCase().includes(searchQuery.toLowerCase());\n\n      // Department filter\n      const matchesDepartment =\n        activeDepartment === null || job.department === activeDepartment;\n\n      // Location filter\n      const matchesLocation =\n        activeLocation === null || job.location === activeLocation;\n\n      return matchesSearch && matchesDepartment && matchesLocation;\n    });\n  }, [jobs, searchQuery, activeDepartment, activeLocation]);\n\n  return (\n    <div className=\"container mx-auto px-4 py-6 md:py-8\">\n      <div className=\"mb-6 text-center md:mb-10\">\n        <h2 className=\"mb-2 text-2xl font-bold tracking-tight md:text-3xl\">\n          Join Our Team\n        </h2>\n        <p className=\"text-muted-foreground mx-auto max-w-2xl text-sm md:text-base\">\n          We&apos;re looking for passionate people to join us on our mission.\n          Check out our open positions and find your dream job.\n        </p>\n      </div>\n\n      <div className=\"grid gap-6 lg:grid-cols-[280px_1fr]\">\n        {/* Filters sidebar */}\n        <div className=\"space-y-4 md:space-y-6\">\n          <div>\n            <div className=\"relative\">\n              <Search className=\"text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2\" />\n              <Input\n                placeholder=\"Search jobs...\"\n                className=\"pl-10\"\n                value={searchQuery}\n                onChange={(e) => setSearchQuery(e.target.value)}\n              />\n            </div>\n          </div>\n\n          <div className=\"grid grid-cols-2 gap-4 lg:grid-cols-1 lg:gap-0\">\n            <div>\n              <h3 className=\"mb-2 text-sm font-semibold\">Departments</h3>\n              <ul className=\"space-y-1\">\n                <li>\n                  <Button\n                    variant=\"ghost\"\n                    className={cn(\n                      'w-full justify-start px-2 text-sm font-normal',\n                      activeDepartment === null ? 'bg-muted' : ''\n                    )}\n                    onClick={() => setActiveDepartment(null)}\n                  >\n                    All Departments\n                  </Button>\n                </li>\n                {departments.map((department) => (\n                  <li key={department}>\n                    <Button\n                      variant=\"ghost\"\n                      className={cn(\n                        'w-full justify-start px-2 text-sm font-normal',\n                        activeDepartment === department ? 'bg-muted' : ''\n                      )}\n                      onClick={() => setActiveDepartment(department)}\n                    >\n                      {department}\n                    </Button>\n                  </li>\n                ))}\n              </ul>\n            </div>\n\n            <div className=\"lg:mt-4\">\n              <h3 className=\"mb-2 text-sm font-semibold\">Locations</h3>\n              <ul className=\"space-y-1\">\n                <li>\n                  <Button\n                    variant=\"ghost\"\n                    className={cn(\n                      'w-full justify-start px-2 text-sm font-normal',\n                      activeLocation === null ? 'bg-muted' : ''\n                    )}\n                    onClick={() => setActiveLocation(null)}\n                  >\n                    All Locations\n                  </Button>\n                </li>\n                {locations.map((location) => (\n                  <li key={location}>\n                    <Button\n                      variant=\"ghost\"\n                      className={cn(\n                        'w-full justify-start px-2 text-sm font-normal',\n                        activeLocation === location ? 'bg-muted' : ''\n                      )}\n                      onClick={() => setActiveLocation(location)}\n                    >\n                      {location}\n                    </Button>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          </div>\n        </div>\n\n        {/* Jobs list */}\n        <div>\n          <Tabs defaultValue=\"all\" className=\"w-full\">\n            <div className=\"mb-4 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\n              <TabsList className=\"w-full sm:w-auto\">\n                <TabsTrigger value=\"all\" className=\"flex-1 sm:flex-initial\">\n                  All Jobs\n                </TabsTrigger>\n                <TabsTrigger\n                  value=\"featured\"\n                  className=\"flex-1 sm:flex-initial\"\n                >\n                  Featured\n                </TabsTrigger>\n                <TabsTrigger value=\"remote\" className=\"flex-1 sm:flex-initial\">\n                  Remote\n                </TabsTrigger>\n              </TabsList>\n              <p className=\"text-muted-foreground text-sm\">\n                {filteredJobs.length} jobs found\n              </p>\n            </div>\n\n            <TabsContent value=\"all\" className=\"space-y-4\">\n              {filteredJobs.length === 0 ? (\n                <div className=\"py-10 text-center\">\n                  <p className=\"text-muted-foreground\">\n                    No jobs found matching your criteria.\n                  </p>\n                  <Button\n                    variant=\"outline\"\n                    className=\"mt-4\"\n                    onClick={() => {\n                      setSearchQuery('');\n                      setActiveDepartment(null);\n                      setActiveLocation(null);\n                    }}\n                  >\n                    Reset Filters\n                  </Button>\n                </div>\n              ) : (\n                filteredJobs.map((job) => <JobCard key={job.id} job={job} />)\n              )}\n            </TabsContent>\n\n            <TabsContent value=\"featured\" className=\"space-y-4\">\n              {filteredJobs.filter((j) => j.featured).length === 0 ? (\n                <div className=\"py-10 text-center\">\n                  <p className=\"text-muted-foreground\">\n                    No featured jobs found matching your criteria.\n                  </p>\n                  <Button\n                    variant=\"outline\"\n                    className=\"mt-4\"\n                    onClick={() => {\n                      setSearchQuery('');\n                      setActiveDepartment(null);\n                      setActiveLocation(null);\n                    }}\n                  >\n                    Reset Filters\n                  </Button>\n                </div>\n              ) : (\n                filteredJobs\n                  .filter((job) => job.featured)\n                  .map((job) => <JobCard key={job.id} job={job} />)\n              )}\n            </TabsContent>\n\n            <TabsContent value=\"remote\" className=\"space-y-4\">\n              {filteredJobs.filter((j) => j.locationType === 'remote')\n                .length === 0 ? (\n                <div className=\"py-10 text-center\">\n                  <p className=\"text-muted-foreground\">\n                    No remote jobs found matching your criteria.\n                  </p>\n                  <Button\n                    variant=\"outline\"\n                    className=\"mt-4\"\n                    onClick={() => {\n                      setSearchQuery('');\n                      setActiveDepartment(null);\n                      setActiveLocation(null);\n                    }}\n                  >\n                    Reset Filters\n                  </Button>\n                </div>\n              ) : (\n                filteredJobs\n                  .filter((job) => job.locationType === 'remote')\n                  .map((job) => <JobCard key={job.id} job={job} />)\n              )}\n            </TabsContent>\n          </Tabs>\n        </div>\n      </div>\n    </div>\n  );\n\n  function JobCard({ job }: { job: JobPosition }) {\n    const [expanded, setExpanded] = React.useState(false);\n\n    return (\n      <Card\n        className={cn(\n          'overflow-hidden transition-all',\n          job.featured ? 'border-primary/20' : ''\n        )}\n      >\n        <CardHeader className=\"\">\n          <div className=\"flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:justify-between\">\n            <div>\n              <CardTitle className=\"text-lg sm:text-xl\">\n                {job.title}\n                {job.featured && (\n                  <Badge className=\"ml-2 font-medium\">Featured</Badge>\n                )}\n              </CardTitle>\n              <div className=\"text-muted-foreground mt-1 flex flex-wrap items-center gap-2 text-xs sm:text-sm\">\n                <span className=\"flex items-center\">\n                  <BriefcaseIcon className=\"mr-1 h-3 w-3 sm:h-3.5 sm:w-3.5\" />\n                  {job.department}\n                </span>\n                <span className=\"flex items-center\">\n                  <MapPinIcon className=\"mr-1 h-3 w-3 sm:h-3.5 sm:w-3.5\" />\n                  {job.location}\n                </span>\n                <span className=\"flex items-center\">\n                  <ClockIcon className=\"mr-1 h-3 w-3 sm:h-3.5 sm:w-3.5\" />\n                  {calculateDaysAgo(job.postedDate)}\n                </span>\n              </div>\n            </div>\n            <div className=\"mt-2 flex items-center gap-2 sm:mt-0\">\n              {locationTypeIcons[job.locationType]}\n              <Badge\n                variant=\"outline\"\n                className=\"text-xs font-normal sm:text-sm\"\n              >\n                {job.employmentType === 'full-time'\n                  ? 'Full-time'\n                  : job.employmentType === 'part-time'\n                    ? 'Part-time'\n                    : 'Contract'}\n              </Badge>\n            </div>\n          </div>\n        </CardHeader>\n        <CardContent className=\"\">\n          <div\n            className={cn(\n              'relative text-xs sm:text-sm',\n              !expanded && 'max-h-16 overflow-hidden sm:max-h-24'\n            )}\n          >\n            <p>{job.description}</p>\n            {!expanded && (\n              <div className=\"from-card absolute right-0 bottom-0 left-0 h-12 bg-gradient-to-t to-transparent sm:h-16\"></div>\n            )}\n          </div>\n          {expanded && (\n            <div className=\"mt-4\">\n              <h4 className=\"mb-2 text-sm font-medium\">Requirements</h4>\n              <ul className=\"list-disc space-y-1 pl-5 text-xs sm:text-sm\">\n                {job.requirements.map((req, index) => (\n                  <li key={index}>{req}</li>\n                ))}\n              </ul>\n              {job.salaryRange && (\n                <p className=\"mt-4 text-sm font-medium\">\n                  Salary Range:{' '}\n                  <span className=\"text-muted-foreground\">\n                    {job.salaryRange}\n                  </span>\n                </p>\n              )}\n            </div>\n          )}\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            className=\"text-muted-foreground mt-2 h-auto p-0 text-xs sm:text-sm\"\n            onClick={() => setExpanded(!expanded)}\n          >\n            {expanded ? 'Show less' : 'Show more'}\n          </Button>\n        </CardContent>\n        <CardFooter className=\"flex flex-col gap-2 sm:flex-row sm:justify-between\">\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full sm:w-auto\">\n            Apply Now\n            <ChevronRightIcon className=\"ml-1 h-4 w-4\" />\n          </Button>\n          <Button variant=\"ghost\" size=\"sm\" className=\"w-full sm:w-auto\">\n            Share\n          </Button>\n        </CardFooter>\n      </Card>\n    );\n  }\n}\n","type":"registry:component","target":"components/blocks/marketing/careers/job-listings.tsx"},{"path":"components/ui/badge.tsx","content":"import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst badgeVariants = cva(\n  \"group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n        secondary:\n          \"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80\",\n        destructive:\n          \"bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20\",\n        outline:\n          \"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Badge({\n  className,\n  variant = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"span\"> &\n  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"span\"\n\n  return (\n    <Comp\n      data-slot=\"badge\"\n      data-variant={variant}\n      className={cn(badgeVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nexport { Badge, badgeVariants }\n","type":"registry:ui","target":"components/ui/badge.tsx"},{"path":"components/ui/button.tsx","content":"import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n  \"group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/80\",\n        outline:\n          \"border-border bg-background shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50\",\n        destructive:\n          \"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default:\n          \"h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        xs: \"h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5\",\n        lg: \"h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        icon: \"size-9\",\n        \"icon-xs\":\n          \"size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\":\n          \"size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md\",\n        \"icon-lg\": \"size-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean\n  }) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n","type":"registry:ui","target":"components/ui/button.tsx"},{"path":"components/ui/card.tsx","content":"import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Card({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & { size?: \"default\" | \"sm\" }) {\n  return (\n    <div\n      data-slot=\"card\"\n      data-size={size}\n      className={cn(\n        \"group/card flex flex-col gap-6 overflow-hidden rounded-xl bg-card py-6 text-sm text-card-foreground shadow-xs ring-1 ring-foreground/10 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-6 group-data-[size=sm]/card:px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-6 group-data-[size=sm]/card:[.border-b]:pb-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\n        \"font-heading text-base leading-normal font-medium group-data-[size=sm]/card:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-6 group-data-[size=sm]/card:px-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\n        \"flex items-center rounded-b-xl px-6 group-data-[size=sm]/card:px-4 [.border-t]:pt-6 group-data-[size=sm]/card:[.border-t]:pt-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n}\n","type":"registry:ui","target":"components/ui/card.tsx"},{"path":"components/ui/input.tsx","content":"import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        \"h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n","type":"registry:ui","target":"components/ui/input.tsx"},{"path":"components/ui/tabs.tsx","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Tabs as TabsPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Tabs({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Root>) {\n  return (\n    <TabsPrimitive.Root\n      data-slot=\"tabs\"\n      data-orientation={orientation}\n      className={cn(\n        \"group/tabs flex gap-2 data-horizontal:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst tabsListVariants = cva(\n  \"group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-9 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-muted\",\n        line: \"gap-1 bg-transparent\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction TabsList({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.List> &\n  VariantProps<typeof tabsListVariants>) {\n  return (\n    <TabsPrimitive.List\n      data-slot=\"tabs-list\"\n      data-variant={variant}\n      className={cn(tabsListVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction TabsTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {\n  return (\n    <TabsPrimitive.Trigger\n      data-slot=\"tabs-trigger\"\n      className={cn(\n        \"relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        \"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent\",\n        \"data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground\",\n        \"after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TabsContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Content>) {\n  return (\n    <TabsPrimitive.Content\n      data-slot=\"tabs-content\"\n      className={cn(\"flex-1 text-sm outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }\n","type":"registry:ui","target":"components/ui/tabs.tsx"}],"description":"A clean list of job listings with title, location, and a quick apply link. Helps candidates skim available roles and pick one to pursue today.","dependencies":["class-variance-authority","lucide-react","radix-ui"]}