Raid Instance Creator working

src/components/personCharacter/PersonCharacterSelector.tsx

@@ -0,0 +1,76 @@
+import { PersonCharacter } from "@/interface/PersonCharacter";
+import { useEffect, useState } from "react";
+
+
+export default function PersonCharacterSelector({
+	personCharacters,
+	selectedCharacterId,
+	onChange
+}:{
+	personCharacters: PersonCharacter[];
+	selectedCharacterId?: string;
+	onChange?: (characterId: string | undefined) => void;
+}){
+	const [ currentlySelectedCharacterId, setCurrentlySelectedCharacterId ] = useState(selectedCharacterId);
+	const selectorId = crypto.randomUUID().replaceAll("-", "");
+
+
+	useEffect(() => {
+		setCurrentlySelectedCharacterId(selectedCharacterId);
+	}, [ selectedCharacterId ]);
+
+
+	const updateInput = (newCharacterId?: string) => {
+		if(newCharacterId === currentlySelectedCharacterId){
+			setCurrentlySelectedCharacterId(undefined);
+			onChange?.(undefined);
+		}
+		else{
+			setCurrentlySelectedCharacterId(newCharacterId);
+			onChange?.(newCharacterId);
+		}
+	}
+
+
+	return (
+		<div
+			className="flex flex-row flex-wrap items-center justify-center space-x-8"
+			style={{flex: "0 0 33.333333333%"}}
+		>
+			{
+				personCharacters.map((ch) => (
+					<div
+						key={ch.personCharacterId}
+						className="flex flex-row flex-nowrap"
+					>
+						<input
+							type="radio"
+							id={`personCharacter${selectorId}Selector`}
+							name="character"
+							value={ch.personCharacterId}
+							checked={ch.personCharacterId === currentlySelectedCharacterId}
+							onChange={() => {}}
+							onClick={() => updateInput(ch.personCharacterId)}
+						/>
+						<label
+							className="ml-2"
+							htmlFor={`personCharacter${selectorId}Selector`}
+						>
+							<div
+								className="flex flex-row flex-nowrap"
+							>
+								{
+									<img
+										className="mr-2 max-h-8 max-w-8"
+										src={`${import.meta.env.VITE_ICON_URL}/gameClass/id/${ch.gameClassId}`}
+									/>
+								}
+								{ch.characterName}
+							</div>
+						</label>
+					</div>
+				))
+			}
+		</div>
+	);
+}

src/components/personCharacter/RatingSelector.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import NumberInput from "../input/NumberInput";
 
 export default function RatingSelector({
 	rating,
@@ -8,6 +9,7 @@ export default function RatingSelector({
 	onChange?: (rating?: number) => void;
 }){
 	const ratings = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+	const selectorId = crypto.randomUUID().replaceAll("-", "");
 	const [ currentRating, setCurrentRating ] = useState(rating);
 
 
@@ -20,6 +22,19 @@ export default function RatingSelector({
 	}, [ currentRating, onChange ]);
 
 
+	return (
+		<div>
+			<NumberInput
+				id={`characterRatingSelector${selectorId}`}
+				label="Rating"
+				value={currentRating}
+				onChange={(value) => setCurrentRating(value)}
+				min={0}
+				max={10}
+			/>
+		</div>
+	);
+
 	return (
 		<div>
 			<label>