Tiny Bot Keycap Button

import { TinyRobotKeycapButton } from "@/components/ui/tiny-bot-keycap-button"

export default function TinyRobotKeycapButtonDemo() {
  return (
    <div className="min-h-svh bg-[#080b12] px-5 py-10 text-white sm:px-8">
      <main className="mx-auto max-w-5xl">
        <h1 className="text-center font-mono text-sm tracking-[0.18em] text-white/70 uppercase">
          Tiny Bot Keycaps
        </h1>

        <section className="grid min-h-[340px] place-items-center">
          <TinyRobotKeycapButton label="Execute" />
        </section>

        <section className="grid gap-3 sm:grid-cols-3">
          <div className="grid min-h-64 place-items-center bg-white/[0.025]">
            <TinyRobotKeycapButton
              accentColor="#a78bfa"
              cameraZoom={38}
              eyeColor="#c4b5fd"
              keycapColor="#29243a"
              label="Hacker mode"
              robotColor="#d8d2e8"
            />
          </div>

          <div className="grid min-h-64 place-items-center bg-white/[0.025]">
            <TinyRobotKeycapButton
              accentColor="#f59e0b"
              cameraZoom={38}
              eyeColor="#fbbf24"
              keycapColor="#382d20"
              label="Rover mode"
              robotColor="#ded6c5"
            />
          </div>

          <div className="grid min-h-64 place-items-center bg-white/[0.025]">
            <TinyRobotKeycapButton
              cameraZoom={38}
              disabled
              label="Robot offline"
            />
          </div>
        </section>
      </main>
    </div>
  )
}