Updated sign up page

Author: catheriinelu

src/App.tsx

@@ -2,7 +2,6 @@ import { Routes, Route, Link, useLocation } from 'react-router';
 import Signup from './pages/Signup';
 import Preferences from './pages/Preferences';
 import Home from './pages/home/Home';
-import Signup from './pages/Signup';
 import Explore from './pages/Explore';
 import Chat from './pages/Chat';
 import { Rocket } from 'lucide-react';
@@ -19,7 +18,7 @@ function App() {
           <Rocket className="inline-block mr-2" size={24} style={{ verticalAlign: 'text-bottom', color: 'var(--color-secondary)' }} />
           SSTRUK
         </Link>
-        {!isHomePage && (
+        {!hideExploreLink && (
           <div style={{ display: 'flex', gap: '16px' }}>
             <Link to="/explore" className="btn-outline" style={{ padding: '6px 16px', fontSize: '0.9rem' }}>Explore</Link>
           </div>
@@ -28,10 +27,9 @@ function App() {
 
       <main className="main-content">
         <Routes>
-          <Route path="/" element={<Signup />} />
-          <Route path="/preferences" element={<Preferences />} />
           <Route path="/" element={<Home />} />
           <Route path="/signup" element={<Signup />} />
+          <Route path="/preferences" element={<Preferences />} />
           <Route path="/explore" element={<Explore />} />
           <Route path="/chat/:id" element={<Chat />} />
         </Routes>

src/context/AppContext.tsx

@@ -7,6 +7,7 @@ export interface UserPreferences {
   species: string;
   planet: string;
   bio: string;
+  interests: string[];
   limbs: number;
   alienType: string;
   size: string;

src/pages/Preferences.tsx

@@ -46,7 +46,7 @@ export default function Preferences() {
             <h3 style={{ color: 'var(--color-secondary)', marginBottom: '16px', fontSize: '1.2rem', borderBottom: '1px solid rgba(255,255,255,0.1)', paddingBottom: '8px' }}>Biological Preferences</h3>
 
             <div style={{ marginBottom: '16px' }}>
-              <label style={{ display: 'block', marginBottom: '8px', fontSize: '0.9rem' }}>Preferred Species</label>
+              <label style={{ display: 'block', marginBottom: '8px', fontSize: '0.9rem' }}>Preferred Biological Type</label>
               <select name="alienType" value={formData.alienType} onChange={handleChange}>
                 <option value="Human">Human</option>
                 <option value="Alien">Alien</option>

src/pages/Signup.tsx

@@ -17,6 +17,7 @@ export default function Signup() {
     species: preferences?.species || 'Human',
     planet: preferences?.planet || '',
     bio: preferences?.bio || '',
+    interests: preferences?.interests || [],
     profilePic: preferences?.profilePic || '',
     // Default preferences for now, will be updated on the next page
     limbs: preferences?.limbs || 4,
@@ -25,6 +26,8 @@ export default function Signup() {
     maxDistanceAU: preferences?.maxDistanceAU || 10,
     goals: preferences?.goals || 'Long term fusion',
   });
+  const [interestInput, setInterestInput] = useState('');
+  const interestSuggestions = ['Stargazing', 'Volcano Diving', 'Heavy Metal (Literally)', 'Asteroid Mining'];
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
@@ -40,6 +43,30 @@ export default function Signup() {
     }));
   };
 
+  const addInterest = (value: string) => {
+    const trimmed = value.trim();
+    if (!trimmed || formData.interests.includes(trimmed) || formData.interests.length >= 3) return;
+    setFormData(prev => ({
+      ...prev,
+      interests: [...prev.interests, trimmed]
+    }));
+    setInterestInput('');
+  };
+
+  const removeInterest = (value: string) => {
+    setFormData(prev => ({
+      ...prev,
+      interests: prev.interests.filter(item => item !== value)
+    }));
+  };
+
+  const handleInterestKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      addInterest(interestInput);
+    }
+  };
+
   const handlePhotoClick = () => {
     // Only open the file dialog if we don't already have a photo, 
     // or if they click the overlay. (Actually, clicking the overlay could mean changing photo)
@@ -170,12 +197,7 @@ export default function Signup() {
             </div>
             <div>
               <label style={{ display: 'block', marginBottom: '8px', fontSize: '0.9rem' }}>Species:</label>
-              <select name="species" value={formData.species} onChange={handleChange}>
-                <option value="Human">Human</option>
-                <option value="Alien">Alien</option>
-                <option value="Hybrid">Hybrid</option>
-                <option value="Open to all">Open to all</option>
-              </select>
+              <input type="text" name="species" value={formData.species} onChange={handleChange} placeholder="Type your species" />
             </div>
           </div>
 
@@ -203,6 +225,60 @@ export default function Signup() {
               }} 
             />
           </div>
+
+          <div>
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '8px' }}>
+              <label style={{ fontSize: '0.9rem' }}>Interests:</label>
+              <span style={{ fontSize: '0.8rem', color: 'rgba(234, 222, 218, 0.7)' }}>Up to 3</span>
+            </div>
+            <input
+              type="text"
+              value={interestInput}
+              onChange={e => setInterestInput(e.target.value)}
+              onKeyDown={handleInterestKeyDown}
+              placeholder="Type an interest and press Enter"
+            />
+            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px', margin: '12px 0' }}>
+              {formData.interests.map(interest => (
+                <button
+                  type="button"
+                  key={interest}
+                  onClick={() => removeInterest(interest)}
+                  style={{
+                    padding: '8px 12px',
+                    borderRadius: '999px',
+                    border: '1px solid rgba(255,255,255,0.2)',
+                    background: 'rgba(255,255,255,0.08)',
+                    color: 'white',
+                    cursor: 'pointer'
+                  }}
+                >
+                  {interest} ×
+                </button>
+              ))}
+            </div>
+            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
+              {interestSuggestions
+                .filter(suggestion => !formData.interests.includes(suggestion))
+                .map(suggestion => (
+                  <button
+                    type="button"
+                    key={suggestion}
+                    onClick={() => addInterest(suggestion)}
+                    style={{
+                      padding: '8px 12px',
+                      borderRadius: '999px',
+                      border: '1px solid rgba(255,255,255,0.2)',
+                      background: 'rgba(255,255,255,0.05)',
+                      color: 'rgba(234, 222, 218, 0.9)',
+                      cursor: 'pointer'
+                    }}
+                  >
+                    {suggestion}
+                  </button>
+              ))}
+            </div>
+          </div>
 
           <div style={{ marginTop: '16px' }}>
             <button type="submit" className="btn-primary" style={{ width: '100%' }}>Next</button>