Status Dot

import React from "react";
import { StatusDot } from "@/components/ui/status-dot";

export const Default = () => (
    <div className="flex flex-col gap-4">
        <div className="font-bold text-xl dark:text-white">Default</div>
        <StatusDot state="QUEUED" />
        <StatusDot state="BUILDING" />
        <StatusDot state="ERROR" />
        <StatusDot state="READY" />
        <StatusDot state="CANCELED" />
    </div>
);


export const Label = () => (
    <div className="flex flex-col gap-4">
        <div className="font-bold text-xl dark:text-white">Label</div>
        <StatusDot label state="QUEUED" />
        <StatusDot label state="BUILDING" />
        <StatusDot label state="ERROR" />
        <StatusDot label state="READY" />
        <StatusDot label state="CANCELED" />
    </div>
);