People tab working

src/components/personCharacter/RatingSelector.tsx

@@ -0,0 +1,43 @@
+import { useEffect, useState } from "react";
+
+export default function RatingSelector({
+	rating,
+	onChange
+}:{
+	rating?: number;
+	onChange?: (rating?: number) => void;
+}){
+	const ratings = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+	const [ currentRating, setCurrentRating ] = useState(rating);
+
+
+	useEffect(() => {
+		setCurrentRating(rating);
+	}, [ rating, setCurrentRating ]);
+
+	useEffect(() => {
+		onChange?.(currentRating);
+	}, [ currentRating, onChange ]);
+
+
+	return (
+		<div>
+			<select
+				onChange={(e) => setCurrentRating(parseInt(e.target.value))}
+				value={currentRating}
+			>
+				<option value={undefined}></option>
+				{
+					ratings.map((rating) => (
+						<option
+							key={rating}
+							value={rating}
+						>
+							{rating}
+						</option>
+					))
+				}
+			</select>
+		</div>
+	);
+}