Status Button

import StatusButton from "@/components/ruixen/status-button";
import { useState } from "react";
 
export default function App() {
  const [status, setStatus] = useState("offline");
 
  const handleToggle = () => {
    const statuses = ["offline", "idle", "live"];
    const currentIndex = statuses.indexOf(status);
    const nextIndex = (currentIndex + 1) % statuses.length;
    setStatus(statuses[nextIndex]);
  };
 
  return (
    <div className="space-y-4">
      <StatusButton label="Go Live" status={status} onClick={handleToggle} />
 
      <StatusButton
        label="Server Status"
        status="live"
        colors={{
          live: "bg-emerald-500",
          idle: "bg-amber-500",
          offline: "bg-red-500",
        }}
        size={16}
        pulseDuration={1.5}
      />
    </div>
  );
}

export type StatusType = "live" | "idle" | "offline" | string;

const customColors = {
  online: "bg-blue-500",
  away: "bg-orange-500",
  busy: "bg-red-600",
  offline: "bg-gray-400",
};
 
<StatusButton status="online" colors={customColors} />;