XP Progress Bar

import React from "@rbxts/react";
import { useTheme } from "@robloxui/theme";

interface XPProgressBarProps {
  currentXP: number;
  xpToLevel: number;
  level: number;
}

export function XPProgressBar({ currentXP, xpToLevel, level }: XPProgressBarProps) {
  const { colors } = useTheme();
  const progress = math.clamp(currentXP / xpToLevel, 0, 1);

  return (
    <frame BackgroundColor3={colors.bgSecondary} Size={new UDim2(0, 300, 0, 28)}>
      <uicorner CornerRadius={new UDim(0, 14)} />
      <frame BackgroundColor3={colors.primary} Size={new UDim2(progress, 0, 1, 0)}>
        <uicorner CornerRadius={new UDim(0, 14)} />
        <uigradient Rotation={90} Color={new ColorSequence([new ColorSequenceKeypoint(0, colors.primary), new ColorSequenceKeypoint(1, colors["primary-light"])])} />
      </frame>
      <textlabel Text={`Lv. ${level} — ${currentXP} / ${xpToLevel} XP`} TextColor3={colors.textPrimary} BackgroundTransparency={1} Size={new UDim2(1, 0, 1, 0)} TextXAlignment={"Center"} />
    </frame>
  );
}