8bit Mana Bar

"use client";

import ManaBar from "@/components/ui/8bit-mana-bar";

export default function Default() {
  return (
    <div className="flex w-full min-h-screen items-center justify-center bg-background p-8 retro">
      <div className="md:min-w-[300px] min-w-[200px] flex flex-col gap-8">
        <div>
          <p className="text-sm text-muted-foreground mb-2">Default mana bar</p>
          <div className="flex justify-between text-sm mb-2 retro">
            <span>Mana</span>
            <span>75%</span>
          </div>
          <ManaBar value={75} />
        </div>
        <div>
          <p className="text-sm text-muted-foreground mb-2">Retro mana bar</p>
          <div className="flex justify-between text-sm mb-2 retro">
            <span>Mana</span>
            <span>45%</span>
          </div>
          <ManaBar value={45} variant="retro" />
        </div>
      </div>
    </div>
  );
}