Refactor ChallengesSection component to utilize initial challenges and users data: Replace fetching logic with props for challenges and users, streamline challenge creation with a dedicated form component, and enhance UI for better user experience.

components/ui/Badge.tsx

@@ -5,7 +5,7 @@ import { HTMLAttributes, ReactNode } from "react";
 interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
   children: ReactNode;
   variant?: "default" | "success" | "warning" | "danger" | "info";
-  size?: "sm" | "md";
+  size?: "xs" | "sm" | "md";
 }
 
 const variantClasses = {
@@ -17,6 +17,7 @@ const variantClasses = {
 };
 
 const sizeClasses = {
+  xs: "px-1.5 py-0.5 text-[9px] sm:text-[10px]",
   sm: "px-2 py-1 text-[10px] sm:text-xs",
   md: "px-3 py-1 text-xs",
 };