/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState, useEffect, useRef } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; // [Previous code remains the same, with modifications to ORIENTATIONS and PRONOUNS] const ORIENTATIONS = [ 'Straight ❤️', 'Gay 🏳️‍🌈', 'Lesbian 💕', 'Bisexual 💗', 'Pansexual 💛', 'Asexual 🤍', 'Questioning 🤔', 'Prefer not to say 🤫' ]; const PRONOUNS = [ 'He/Him 👨', 'She/Her 👩', 'They/Them 👥', 'Ze/Zir 🌈', 'Other 🤷', 'Prefer not to say 🤐' ]; const GENDERS = [ 'Male 👨', 'Female 👩', 'Non-Binary 🌈', 'Transgender 🏳️‍⚧️', 'Other 🤷', 'Prefer not to say 🤐' ]; // [Rest of the previous constants remain the same] // Modify the ProfileSetupScreen to include gender selection function ProfileSetupScreen({ profileData, setProfileData, setScreen, profileStep, setProfileStep }) { // [Previous implementation remains the same, with an additional case in renderProfileStep] const renderProfileStep = () => { switch(profileStep) { // [Previous cases remain the same] case 2: return (

Your Identity

setProfileStep(3)}> Continue

); // [Rest of the implementation remains the same] } }; // [Rest of the component remains the same] } // Modify the HomeMatchScreen to filter matches based on orientation and gender function HomeMatchScreen({ profileData }) { // Expanded match pool with gender and orientation information const [matches, setMatches] = useState([ { id: 1, name: 'Emma', age: 17, gender: 'Female 👩', interests: ['Music 🎵', 'Art 🎨'], location: 'Nearby', image: 'https://maxm-imggenurl.web.val.run/teen-profile-female-1' }, { id: 2, name: 'Sophia', age: 16, gender: 'Female 👩', interests: ['Sports ⚽', 'Photography 📷'], location: 'Nearby', image: 'https://maxm-imggenurl.web.val.run/teen-profile-female-2' }, { id: 3, name: 'Olivia', age: 17, gender: 'Female 👩', interests: ['Gaming 🎮', 'Technology 💻'], location: 'Nearby', image: 'https://maxm-imggenurl.web.val.run/teen-profile-female-3' } ]); // Filter matches based on user's orientation and gender const filteredMatches = matches.filter(match => { // For a straight male, show only females if (profileData.orientation === 'Straight ❤️' && profileData.gender === 'Male 👨') { return match.gender === 'Female 👩'; } // Add more orientation-specific filtering as needed return true; }); const [currentMatchIndex, setCurrentMatchIndex] = useState(0); const handleSwipe = (action) => { console.log(`${action} for ${filteredMatches[currentMatchIndex].name}`); if (currentMatchIndex < filteredMatches.length - 1) { setCurrentMatchIndex(currentMatchIndex + 1); } }; const currentMatch = filteredMatches[currentMatchIndex]; // [Rest of the HomeMatchScreen implementation remains the same] return (

Your Matches

{filteredMatches.length > 0 ? ( <>

{currentMatch.name}, {currentMatch.age}

Shared Interests: {currentMatch.interests.join(', ')}

handleSwipe('Pass')} style={{ backgroundColor: COLORS.softGray, color: COLORS.text, padding: '10px 20px' }} > Pass 🚫 handleSwipe('Like')} style={{ backgroundColor: COLORS.accent, padding: '10px 20px' }} > Like ❤️ handleSwipe('Super Like')} style={{ backgroundColor: COLORS.primary, padding: '10px 20px' }} > Super Like ⭐

) : (

No matches found. Try expanding your preferences!

)}

); } // Modify the VibeCommunityApp to pass profileData to HomeMatchScreen function VibeCommunityApp() { const [currentScreen, setCurrentScreen] = useState('welcome'); const [profileStep, setProfileStep] = useState(0); const [profileData, setProfileData] = useState({ name: '', age: '', gender: '', pronouns: '', orientation: '', interests: [], school: '', location: '' }); const renderScreen = () => { switch(currentScreen) { case 'welcome': return ; case 'profile-setup': return ; case 'home': return ; // [Rest of the implementation remains the same] } }; // [Rest of the VibeCommunityApp remains the same] } // [Rest of the code remains unchanged]

inspiringAquaToad

Version 8