{selectedVideo.title}

{selectedVideo.description}

\n \n

\n );\n };\n\n const renderResourceDetails = () => {\n if (!selectedResource) return null;\n\n return (\n

\n \n

{selectedResource.title}

{selectedResource.description}

\n {selectedResource.detailedContent.map((section, index) => (\n

{section.title}

{section.description}

Recommended Exercises:

{exercise}

\n ))}\n

\n );\n };\n\n const renderDashboard = () => (\n

Daily Affirmation

{affirmation}

😂 Mood Lifters

\n {funnyVideos.map(video => (\n

setSelectedVideo(video)}\n >\n

{video.title}

\n ))}\n

🌈 Mental Health Resources

\n {mentalHealthResources.map(resource => (\n

setSelectedResource(resource)}\n >\n

{resource.icon}

{resource.title}

{resource.description}

\n ))}\n

\n );\n\n const renderServiceProviders = () => {\n const filteredProviders = serviceProviders.filter(provider => \n provider.name.toLowerCase().includes(searchTerm.toLowerCase()) ||\n provider.profession.toLowerCase().includes(searchTerm.toLowerCase())\n );\n\n return (\n

Find a Service Provider

\n setSearchTerm(e.target.value)}\n style={styles.searchInput}\n />\n

\n {filteredProviders.map(provider => (\n

{provider.name}

{provider.profession}

Specialization: {provider.specialization}

Availability: {provider.availability}

Rate: {provider.rate}

\n \n

\n ))}\n

\n );\n };\n\n return (\n

CommuniZEN

\n \n

\n {activeSection === 'dashboard' && (\n selectedVideo ? renderVideoPlayer() : \n selectedResource ? renderResourceDetails() : \n renderDashboard()\n )}\n {activeSection === 'providers' && renderServiceProviders()}\n

\n );\n}\n\nconst styles = {\n appContainer: {\n fontFamily: \"'Helvetica Neue', Arial, sans-serif\",\n backgroundColor: '#f0f6ff',\n minHeight: '100vh',\n color: '#2c3e50'\n },\n header: {\n backgroundColor: '#ffffff',\n padding: '20px',\n boxShadow: '0 2px 10px rgba(0,0,0,0.05)',\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center'\n },\n navigation: {\n display: 'flex',\n gap: '15px'\n },\n navButton: {\n background: 'transparent',\n border: 'none',\n color: '#5a7795',\n cursor: 'pointer',\n padding: '10px 15px',\n borderRadius: '20px',\n transition: 'all 0.3s ease'\n },\n activeNavButton: {\n backgroundColor: '#e6f2ff',\n color: '#2c7be5'\n },\n mainContent: {\n padding: '20px',\n maxWidth: '1200px',\n margin: '0 auto'\n },\n affirmationBanner: {\n backgroundColor: '#e6f2ff',\n borderRadius: '15px',\n padding: '20px',\n marginBottom: '20px',\n textAlign: 'center'\n },\n dashboardCard: {\n backgroundColor: 'white',\n borderRadius: '15px',\n padding: '20px',\n marginBottom: '20px',\n boxShadow: '0 4px 15px rgba(0,0,0,0.1)'\n },\n videoScrollContainer: {\n display: 'flex',\n overflowX: 'auto',\n gap: '15px',\n padding: '10px'\n },\n videoThumbnail: {\n cursor: 'pointer',\n minWidth: '200px',\n borderRadius: '10px',\n overflow: 'hidden',\n transition: 'transform 0.3s ease'\n },\n thumbnailImage: {\n width: '100%',\n height: '150px',\n objectFit: 'cover'\n },\n videoPlayerContainer: {\n textAlign: 'center',\n padding: '20px'\n },\n videoPlayer: {\n maxWidth: '100%',\n borderRadius: '15px',\n boxShadow: '0 4px 15px rgba(0,0,0,0.1)'\n },\n resourcesGrid: {\n display: 'grid',\n gridTemplateColumns: '1fr 1fr 1fr',\n gap: '15px'\n },\n resourceCard: {\n backgroundColor: '#f9f9f9',\n borderRadius: '15px',\n padding: '20px',\n textAlign: 'center',\n cursor: 'pointer',\n boxShadow: '0 4px 15px rgba(0,0,0,0.05)'\n },\n resourceIcon: {\n fontSize: '3rem',\n marginBottom: '10px'\n },\n serviceProvidersContainer: {\n padding: '20px'\n },\n searchInput: {\n width: '100%',\n padding: '10px',\n marginBottom: '20px',\n borderRadius: '5px',\n border: '1px solid #e0e0e0'\n },\n providerGrid: {\n display: 'grid',\n gridTemplateColumns: '1fr 1fr 1fr',\n gap: '20px'\n },\n providerCard: {\n backgroundColor: 'white',\n borderRadius: '15px',\n padding: '20px',\n boxShadow: '0 4px 15px rgba(0,0,0,0.1)',\n textAlign: 'center'\n },\n primaryButton: {\n backgroundColor: '#2c7be5',\n color: 'white',\n border: 'none',\n padding: '10px 20px',\n borderRadius: '20px',\n cursor: 'pointer'\n },\n secondaryButton: {\n backgroundColor: '#f0f0f0',\n color: '#2c3e50',\n border: 'none',\n padding: '10px 20px',\n borderRadius: '20px',\n cursor: 'pointer',\n marginLeft: '10px'\n },\n bookSessionButton: {\n backgroundColor: '#2c7be5',\n color: 'white',\n border: 'none',\n padding: '10px 20px',\n borderRadius: '20px',\n cursor: 'pointer'\n }\n};\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") { \n client(); \n}\n\nexport default async function server(request: Request): Promise {\n return new Response(`\n \n \n CommuniZEN - Mental Wellness Platform\n \n 🧘\">\n \n \n

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