Status Card

import { StatusCard } from "@/registry/sase/status-card";

export function StatusCardDemo() {
  return (
    <div className="space-y-3 max-w-md">
      <StatusCard variant="in-progress" />
      <StatusCard variant="not-started" />
      <StatusCard variant="in-review" />
      <StatusCard variant="done" />
    </div>
  );
}

"use client";

import { StatusCard } from "@/registry/sase/status-card";

export function StatusCardTimeline() {
  const timeline = [
    {
      variant: "done" as const,
      label: "Project Initialization",
      description:
        "Repository setup, dependencies installed, and initial project structure created.",
      timestamp: "Dec 1, 2024",
    },
    {
      variant: "done" as const,
      label: "Design System Setup",
      description:
        "Configured theme tokens, color palette, and typography system with Tailwind CSS.",
      timestamp: "Dec 3, 2024",
    },
    {
      variant: "done" as const,
      label: "Component Library Integration",
      description:
        "Integrated shadcn/ui components and customized base components for the project.",
      timestamp: "Dec 6, 2024",
    },
    {
      variant: "in-review" as const,
      label: "Dashboard Implementation",
      description:
        "Built responsive dashboard with charts, tables, and data visualization components.",
      timestamp: "Dec 10, 2024",
    },
    {
      variant: "in-progress" as const,
      label: "API Integration",
      description:
        "Connecting frontend to REST API endpoints, implementing data fetching and caching.",
      timestamp: "Dec 12, 2024",
    },
    {
      variant: "not-started" as const,
      label: "Authentication Flow",
      description:
        "Implement user authentication with JWT tokens, protected routes, and role management.",
      timestamp: "Scheduled",
    },
  ];

  return (
    <div className="relative w-full max-w-3xl">
      {/* Timeline connector line */}
      <div className="absolute left-6 top-8 bottom-8 w-px bg-linear-to-b from-slate-200 via-slate-300 to-slate-200 dark:from-slate-700 dark:via-slate-600 dark:to-slate-700" />

      <div className="relative space-y-6">
        {timeline.map((item, index) => (
          <div key={index} className="relative pl-14">
            {/* Timeline dot positioned absolutely */}
            {item.variant === "in-progress" ? (
              <div className="absolute left-[18px] top-6">
                <span className="relative flex size-4">
                  <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-amber-400 opacity-75" />
                  <span className="relative inline-flex size-4 rounded-full border-2 border-background bg-amber-500" />
                </span>
              </div>
            ) : (
              <div
                className={`absolute left-[18px] top-6 size-4 rounded-full border-2 border-background ${
                  item.variant === "done"
                    ? "bg-emerald-500"
                    : item.variant === "in-review"
                      ? "bg-purple-500"
                      : "bg-slate-300 dark:bg-slate-600"
                }`}
              />
            )}

            <StatusCard
              variant={item.variant}
              label={item.label}
              description={item.description}
              timestamp={item.timestamp}
            />
          </div>
        ))}
      </div>
    </div>
  );
}

"use client";

import { AlertCircle, FileCode, Layers, Palette } from "lucide-react";
import { StatusCard } from "@/registry/sase/status-card";

export function StatusCardBoard() {
  return (
    <div className="grid w-full max-w-4xl grid-cols-1 gap-4 md:grid-cols-2">
      <StatusCard
        variant="in-progress"
        icon={<FileCode className="size-5" />}
        label="Code Review"
        description="3 pull requests waiting for your review"
        timestamp="Updated 5m ago"
      />
      <StatusCard
        variant="in-review"
        icon={<Layers className="size-5" />}
        label="Feature Branch"
        description="New authentication system awaiting QA testing"
        timestamp="Updated 1h ago"
      />
      <StatusCard
        variant="done"
        icon={<Palette className="size-5" />}
        label="Design Updates"
        description="All design tokens successfully migrated to v2"
        timestamp="Completed today"
      />
      <StatusCard
        variant="not-started"
        icon={<AlertCircle className="size-5" />}
        label="Bug Fixes"
        description="5 issues scheduled for next sprint"
        timestamp="Starts Monday"
      />
    </div>
  );
}