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/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;
+