Первый коммит после распаковки архива

src/CharacterSelect.js

@@ -0,0 +1,95 @@
+import React, { useState } from 'react';
+
+const avatars = {
+  male: [
+    { name: 'Мужчина 1', url: 'https://models.readyplayer.me/68013c216026f5144dce1613.glb' },
+    { name: 'Мужчина 2', url: 'https://models.readyplayer.me/68013cf0647a08a2e39f842d.glb' },
+  ],
+  female: [
+    { name: 'Женщина 1', url: '/avatars/female1.glb' },
+    { name: 'Женщина 2', url: '/avatars/female2.glb' },
+  ],
+};
+
+export default function CharacterSelect({ onSelect }) {
+  const [gender, setGender] = useState(null);
+
+  const handleGenderSelect = (selected) => setGender(selected);
+
+  return (
+    <div style={styles.wrapper}>
+      {!gender ? (
+        <div style={styles.genderBlock}>
+          <h2>Выберите пол</h2>
+          <button onClick={() => handleGenderSelect('male')} style={styles.button}>Мужчина</button>
+          <button onClick={() => handleGenderSelect('female')} style={styles.button}>Женщина</button>
+        </div>
+      ) : (
+        <div style={styles.avatarBlock}>
+          <h2>Выберите персонажа</h2>
+          <div style={styles.grid}>
+            {avatars[gender].map((a) => (
+              <div key={a.url} style={styles.avatarCard} onClick={() => onSelect(a.url, gender)}>
+                <p>{a.name}</p>
+                <model-viewer
+                  src={a.url}
+                  camera-controls
+                  style={{ width: '150px', height: '200px' }}
+                />
+              </div>
+            ))}
+          </div>
+          <button onClick={() => setGender(null)} style={styles.back}>Назад</button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+const styles = {
+  wrapper: {
+    width: '100vw',
+    height: '100vh',
+    background: '#111',
+    color: '#fff',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  genderBlock: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '20px',
+  },
+  avatarBlock: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+  },
+  grid: {
+    display: 'flex',
+    gap: '30px',
+    marginTop: '20px',
+  },
+  avatarCard: {
+    cursor: 'pointer',
+    textAlign: 'center',
+  },
+  button: {
+    fontSize: '18px',
+    padding: '10px 20px',
+    background: '#222',
+    color: '#fff',
+    border: '1px solid #555',
+    borderRadius: '8px',
+  },
+  back: {
+    marginTop: '20px',
+    fontSize: '16px',
+    background: 'transparent',
+    border: 'none',
+    color: '#aaa',
+    cursor: 'pointer',
+  },
+};