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",
 };

components/ui/Select.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { SelectHTMLAttributes, forwardRef } from "react";
+
+interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+  label?: string;
+  error?: string;
+}
+
+const Select = forwardRef<HTMLSelectElement, SelectProps>(
+  ({ label, error, className = "", children, ...props }, ref) => {
+    return (
+      <div className="w-full">
+        {label && (
+          <label className="block text-sm font-bold text-pixel-gold mb-2">
+            {label}
+          </label>
+        )}
+        <select
+          ref={ref}
+          className={`w-full p-2 bg-black/60 border border-pixel-gold/30 rounded text-gray-300 focus:outline-none focus:ring-2 focus:ring-pixel-gold/50 focus:border-pixel-gold transition ${className} ${
+            error ? "border-red-500" : ""
+          }`}
+          {...props}
+        >
+          {children}
+        </select>
+        {error && (
+          <p className="mt-1 text-xs text-red-400">{error}</p>
+        )}
+      </div>
+    );
+  }
+);
+
+Select.displayName = "Select";
+
+export default Select;
+

components/ui/index.ts

@@ -2,6 +2,7 @@ export { default as Avatar } from "./Avatar";
 export { default as Button } from "./Button";
 export { default as Input } from "./Input";
 export { default as Textarea } from "./Textarea";
+export { default as Select } from "./Select";
 export { default as Card } from "./Card";
 export { default as Modal } from "./Modal";
 export { default as Badge } from "./Badge";