XP bar

"use client";

import { useState } from "react";
import { CruiseButton } from "@/components/cruise/button";
import { CruiseXpBar } from "@/components/cruise/xp-bar";

export default function XpBarExample() {
  const [health, setHealth] = useState(80);
  return (
    <div className="flex flex-col gap-5">
      <CruiseXpBar kind="xp" level={7} value={1240} max={2000} />
      <CruiseXpBar kind="health" value={health} max={100} />
      <CruiseXpBar kind="mana" value={45} max={60} />
      <div className="flex flex-wrap gap-3">
        <CruiseButton variant="danger" onClick={() => setHealth((h) => Math.max(0, h - 20))}>
          Take a hit
        </CruiseButton>
        <CruiseButton variant="success" onClick={() => setHealth(100)}>
          Heal
        </CruiseButton>
      </div>
    </div>
  );
}