Untitled

import { useState } from "react";

export default function XPTracker() {
      const [points, setPoints] = useState(0);
        const LEVEL_SIZE = 196;
          const MAX_LEVEL = 75;
            const MAX_POINTS = LEVEL_SIZE * MAX_LEVEL;

              const level = Math.min(Math.floor(points / LEVEL_SIZE), MAX_LEVEL);
                const progress = level < MAX_LEVEL ? points % LEVEL_SIZE : LEVEL_SIZE;
                  const progressPercent = (progress / LEVEL_SIZE) * 100;

                    return (
                            <div className="min-h-screen flex flex-col items-center justify-center bg-gradient-to-br from-purple-600 to-blue-500 text-white p-6">
                                  <div className="w-full max-w-md bg-white/10 backdrop-blur-md rounded-2xl p-6 shadow-lg">
                                          <h1 className="text-2xl font-bold mb-4 text-center">XP & Level Tracker</h1>

                                                  <div className="mb-6">
                                                            <label className="block text-sm mb-2">Add Points:</label>
                                                                      <input
                                                                                  type="number"
                                                                                              value={points}
                                                                                                          onChange={(e) => setPoints(Math.max(0, Math.min(Number(e.target.value), MAX_POINTS)))}
                                                                                                                      className="w-full px-3 py-2 rounded-lg text-black"
                                                                                                                                />
                                                                                                                                        </div>

                                                                                                                                                <div className="mb-4 text-center">
                                                                                                                                                          <p className="text-lg font-semibold">Level: {level}</p>
                                                                                                                                                                    <p className="text-sm text-gray-200">
                                                                                                                                                                                {progress} / {LEVEL_SIZE} XP to next level
                                                                                                                                                                                          </p>
                                                                                                                                                                                                  </div>

                                                                                                                                                                                                          <div className="w-full bg-gray-300 rounded-full h-4 overflow-hidden">
                                                                                                                                                                                                                    <div
                                                                                                                                                                                                                                className="bg-green-400 h-4"
                                                                                                                                                                                                                                            style={{ width: `${progressPercent}%` }}
                                                                                                                                                                                                                                                      ></div>
                                                                                                                                                                                                                                                              </div>

                                                                                                                                                                                                                                                                      <div className="mt-6 text-center text-sm text-gray-300">
                                                                                                                                                                                                                                                                                Max Level: {MAX_LEVEL} (14,700 XP)
                                                                                                                                                                                                                                                                                        </div>
                                                                                                                                                                                                                                                                                              </div>
                                                                                                                                                                                                                                                                                                  </div>
                    );
}
                    )
}