Status

import { Status } from "@/registry/sase/status";

export function StatusDemo() {
  return (
    <div className="flex flex-wrap gap-2">
      <Status variant="not-started" />
      <Status variant="in-progress" />
      <Status variant="in-review" />
      <Status variant="done" />
    </div>
  );
}

import { Status } from "@/registry/sase/status";

export function StatusCustomDemo() {
  return (
    <div className="flex flex-wrap gap-2">
      <Status variant="not-started">To Do</Status>
      <Status variant="in-progress">Working</Status>
      <Status variant="in-review">Reviewing</Status>
      <Status variant="done">Completed</Status>
    </div>
  );
}

import { Status } from "@/registry/sase/status";

export function StatusOutlinedDemo() {
  return (
    <div className="flex flex-wrap gap-2">
      <Status variant="not-started" outlined />
      <Status variant="in-progress" outlined />
      <Status variant="in-review" outlined />
      <Status variant="done" outlined />
    </div>
  );
}

import { Status } from "@/registry/sase/status";

export function StatusSizeDemo() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <Status variant="in-progress" /> {/* sm is the default size */}
      <Status variant="in-progress" size="md" />
      <Status variant="in-progress" size="lg" />
    </div>
  );
}

import { Status } from "@/registry/sase/status";

export function StatusBorderDemo() {
  return (
    <div className="flex flex-wrap gap-2">
      <Status variant="not-started" appearance="border" size="sm" />
      <Status variant="in-progress" appearance="border" size="sm" />
      <Status variant="in-review" appearance="border" size="sm" />
      <Status variant="done" appearance="border" size="sm" />
    </div>
  );
}

import { Status } from "@/registry/sase/status";

export function StatusPingDemo() {
  return (
    <div className="flex flex-wrap gap-2">
      <Status variant="not-started" appearance="ping" />
      <Status variant="in-progress" appearance="ping" />
      <Status variant="in-review" appearance="ping" />
      <Status variant="done" appearance="ping" />
    </div>
  );
}

import { Status } from "@/registry/sase/status";

export function StatusGradientDemo() {
  return (
    <div className="flex flex-wrap gap-2">
      <Status variant="not-started" appearance="gradient" />
      <Status variant="in-progress" appearance="gradient" />
      <Status variant="in-review" appearance="gradient" />
      <Status variant="done" appearance="gradient" />
    </div>
  );
}

import { Status } from "@/registry/sase/status";

export function StatusSimpleDemo() {
  return (
    <div className="space-y-4">
      <div className="flex flex-wrap gap-4">
        <Status variant="in-progress" className="bg-transparent px-0 py-0" />
        <Status variant="done" className="bg-transparent px-0 py-0" />
      </div>
      <div className="flex flex-wrap gap-4">
        <Status
          variant="in-review"
          outlined
          className="bg-transparent px-0 py-0"
        />
        <Status
          variant="not-started"
          outlined
          className="bg-transparent px-0 py-0"
        />
      </div>
    </div>
  );
}