upcoming tournament page, minor changes

2025-09-09 23:20:19 -05:00
parent c5d69f1a19
commit c74da09bde
29 changed files with 1125 additions and 46 deletions
--- a/src/features/teams/components/team-form/team-color-picker.tsx
+++ b/src/features/teams/components/team-form/team-color-picker.tsx
@@ -0,0 +1,77 @@
+import { ColorPicker, TextInput, Stack, Group, ColorSwatch, Text } from '@mantine/core';
+import React, { useState, useCallback, useMemo } from 'react';
+
+interface TeamColorPickerProps {
+  value: string;
+  onChange: (value: string) => void;
+  label?: string;
+}
+
+const TeamColorPicker: React.FC<TeamColorPickerProps> = ({
+  value,
+  onChange,
+  label = "Select Color"
+}) => {
+  const [customHex, setCustomHex] = useState(value || '');
+
+  const isValidHex = useMemo(() => {
+    const hexRegex = /^#[0-9A-F]{6}$/i;
+    return hexRegex.test(customHex);
+  }, [customHex]);
+
+  const handleColorChange = useCallback((color: string) => {
+    setCustomHex(color);
+    onChange(color);
+  }, [onChange]);
+
+  const handleHexInputChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    const hex = event.currentTarget.value;
+    setCustomHex(hex);
+    
+    if (/^#[0-9A-F]{6}$/i.test(hex)) {
+      onChange(hex);
+    }
+  }, [onChange]);
+
+  const presetColors = [
+    '#FF0000', '#00FF00', '#0000FF', '#FFFF00', 
+    '#FF00FF', '#00FFFF', '#FFA500', '#800080',
+    '#008000', '#000080', '#800000', '#808000'
+  ];
+
+  return (
+    <Stack gap="md" p="md">
+      <Text fw={500}>{label}</Text>
+      
+      <ColorPicker
+        value={value || '#000000'}
+        onChange={handleColorChange}
+        format="hex"
+        swatches={presetColors}
+        withPicker={true}
+        fullWidth
+      />
+
+      <Group gap="xs" align="flex-end">
+        <TextInput
+          style={{ flex: 1 }}
+          label="Custom Hex Code"
+          placeholder="#FF0000"
+          value={customHex}
+          onChange={handleHexInputChange}
+          error={customHex && !isValidHex ? 'Invalid hex color format' : undefined}
+        />
+        
+        {isValidHex && (
+          <ColorSwatch
+            color={customHex}
+            size={36}
+            style={{ marginBottom: customHex && !isValidHex ? 24 : 0 }}
+          />
+        )}
+      </Group>
+    </Stack>
+  );
+};
+
+export default TeamColorPicker;