\n Vibe 💖\n

\n Find your vibe, your way 🌈\n

\n\n {!loginMethod && (\n <>\n setLoginMethod('signup')}\n style={{ width: '100%', marginBottom: '1rem' }}\n >\n Sign Up\n \n setLoginMethod('login')}\n variant=\"secondary\"\n style={{ width: '100%' }}\n >\n Log In\n \n \n )}\n\n {loginMethod === 'signup' && (\n

\n setScreen('profile-setup')}\n style={{ width: '100%', marginBottom: '1rem' }}\n >\n Sign Up with Email\n \n \n Sign Up with Phone\n \n \n Sign Up with Social Media\n \n

\n )}\n\n {loginMethod === 'login' && (\n

\n \n Log In with Email\n \n \n Log In with Phone\n \n \n Log In with Social Media\n \n

\n )}\n

\n );\n}\n\n// Profile Setup Screen\nfunction ProfileSetupScreen({ \n profileData, \n setProfileData, \n setScreen, \n profileStep, \n setProfileStep \n}) {\n const [profilePicture, setProfilePicture] = useState(null);\n const fileInputRef = useRef(null);\n\n const updateProfile = (field, value) => {\n setProfileData(prev => ({ ...prev, [field]: value }));\n };\n\n const handleProfilePictureUpload = (event) => {\n const file = event.target.files[0];\n if (file) {\n const reader = new FileReader();\n reader.onloadend = () => {\n setProfilePicture(reader.result);\n };\n reader.readAsDataURL(file);\n }\n };\n\n const ProgressIndicator = () => (\n

\n {[0, 1, 2, 3].map(step => (\n

\n ))}\n

\n );\n\n const renderProfileStep = () => {\n switch(profileStep) {\n case 0:\n return (\n

\n \n

Basic Info

\n updateProfile('name', e.target.value)}\n style={{\n width: '100%',\n padding: '12px',\n margin: '10px 0',\n borderRadius: '10px',\n border: `1px solid ${COLORS.lightAccent}`\n }}\n />\n updateProfile('age', e.target.value)}\n style={{\n width: '100%',\n padding: '12px',\n margin: '10px 0',\n borderRadius: '10px',\n border: `1px solid ${COLORS.lightAccent}`\n }}\n />\n setProfileStep(1)}>\n Next\n \n

\n );\n case 1:\n return (\n

\n \n

Profile Picture

fileInputRef.current.click()}\n style={{\n width: '200px',\n height: '200px',\n borderRadius: '50%',\n backgroundColor: COLORS.softGray,\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n margin: '0 auto',\n cursor: 'pointer'\n }}\n >\n {profilePicture ? (\n $\"Profile\"$ \n ) : (\n 📷 Upload Picture\n )}\n

\n \n setProfileStep(2)}\n style={{ marginTop: '20px' }}\n >\n Next\n \n

\n );\n case 2:\n return (\n

\n \n

Your Identity

\n \n \n setProfileStep(3)}>\n Continue\n \n

\n );\n case 3:\n return (\n

\n \n

Your Interests

\n \n updateProfile('location', e.target.value)}\n style={{\n width: '100%',\n padding: '12px',\n margin: '10px 0',\n borderRadius: '10px',\n border: `1px solid ${COLORS.lightAccent}`\n }}\n />\n

\n {INTERESTS.map(interest => (\n {\n const currentInterests = profileData.interests.includes(interest)\n ? profileData.interests.filter(i => i !== interest)\n : [...profileData.interests, interest];\n updateProfile('interests', currentInterests);\n }}\n style={{\n backgroundColor: profileData.interests.includes(interest) \n ? COLORS.primary \n : COLORS.softGray,\n color: profileData.interests.includes(interest) \n ? 'white' \n : COLORS.text,\n border: 'none',\n padding: '10px',\n borderRadius: '20px',\n margin: '5px'\n }}\n >\n {interest}\n \n ))}\n

\n setScreen('home')}\n style={{ marginTop: '20px' }}\n >\n Complete Profile\n \n

\n );\n default:\n return null;\n }\n };\n\n return (\n

\n {renderProfileStep()}\n

\n );\n}\n\n// Home/Match Screen\nfunction HomeMatchScreen() {\n const [matches, setMatches] = useState([\n { \n id: 1, \n name: 'Alex', \n age: 17, \n interests: ['Music 🎵', 'Gaming 🎮'], \n location: 'Nearby',\n image: 'https://maxm-imggenurl.web.val.run/teen-profile-1'\n },\n { \n id: 2, \n name: 'Jordan', \n age: 16, \n interests: ['Art 🎨', 'Photography 📷'], \n location: 'Nearby',\n image: 'https://maxm-imggenurl.web.val.run/teen-profile-2'\n }\n ]);\n\n const [currentMatchIndex, setCurrentMatchIndex] = useState(0);\n\n const handleSwipe = (action) => {\n console.log(`${action} for ${matches[currentMatchIndex].name}`);\n \n if (currentMatchIndex < matches.length - 1) {\n setCurrentMatchIndex(currentMatchIndex + 1);\n }\n };\n\n const currentMatch = matches[currentMatchIndex];\n\n return (\n

Your Matches

\n ${currentMatch.name}\n$ \n

{currentMatch.name}, {currentMatch.age}

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

\n\n

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

\n );\n}\n\n// Navigation Bar\nfunction NavBar({ currentScreen, setScreen }) {\n const navItems = [\n { screen: 'home', icon: '🏠', label: 'Home' },\n { screen: 'explore', icon: '🌍', label: 'Explore' },\n { screen: 'settings', icon: '⚙️', label: 'Settings' }\n ];\n\n return (\n

\n {navItems.map(item => (\n

setScreen(item.screen)}\n style={{\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n cursor: 'pointer',\n opacity: currentScreen === item.screen ? 1 : 0.5\n }}\n >\n {item.icon}\n \n {item.label}\n \n

\n ))}\n

\n );\n}\n\n// Main App Component\nfunction VibeCommunityApp() {\n const [currentScreen, setCurrentScreen] = useState('welcome');\n const [profileStep, setProfileStep] = useState(0);\n const [profileData, setProfileData] = useState({\n name: '',\n age: '',\n pronouns: '',\n orientation: '',\n interests: [],\n school: '',\n location: ''\n });\n\n const renderScreen = () => {\n switch(currentScreen) {\n case 'welcome':\n return ;\n case 'profile-setup':\n return ;\n case 'home':\n return ;\n case 'explore':\n return

Explore Screen

;\n case 'settings':\n return

Settings Screen

;\n default:\n return ;\n }\n };\n\n return (\n

\n {renderScreen()}\n {currentScreen !== 'welcome' && currentScreen !== 'profile-setup' && (\n \n )}\n

\n );\n}\n\n// Client-side Rendering\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\n// Render client-side code if in browser environment\nif (typeof document !== \"undefined\") { client(); }\n\n// Server-side Response\nexport default async function server(request: Request): Promise {\n return new Response(`\n \n \n Vibe Community\n \n \n \n \n \n

\n \n \n \n \n `, {\n headers: { \"content-type\": \"text/html\" }\n });\n}","deleted","label",[98],"permalink","https://www.val.town/x/priyanshu/sympatheticOliveWildcat/code/main.tsx","extension","actionData","errors"]