StoryLand: Kids' Story Sharing

\n Write Your Story 📝\n

\n setNewStory(prev => ({ ...prev, title: e.target.value }))}\n style={{\n width: \"100%\",\n padding: \"10px\",\n marginBottom: \"10px\",\n borderRadius: \"5px\",\n border: \"1px solid #ddd\",\n }}\n />\n {\n setNewStory(prev => ({ ...prev, content: e.target.value }));\n setWordCount(countWords(e.target.value));\n }}\n style={{\n width: \"100%\",\n minHeight: \"300px\",\n padding: \"10px\",\n marginBottom: \"10px\",\n borderRadius: \"5px\",\n border: \"1px solid #ddd\",\n }}\n />\n

\n Age Group:\n \n setNewStory(prev => ({\n ...prev,\n ageGroup: e.target.value as Story[\"ageGroup\"],\n }))}\n style={{\n padding: \"5px\",\n borderRadius: \"5px\",\n border: \"1px solid #ddd\",\n }}\n >\n \n \n \n \n \n

Word Count: {wordCount}/1000

\n \n {isSubmitting ? \"Submitting...\" : \"Submit Story\"}\n \n \n )}\n\n {currentTab === \"read\" && (\n

\n \n 📚 Recent Stories\n \n {stories.map(story => (\n setSelectedStory(story)}\n style={{ cursor: \"pointer\" }}\n >\n \n

{story.title}

By {story.author}

{story.content.slice(0, 200)}...

\n Age Group: {story.ageGroup}\n ❤️ {story.likes} Likes\n

\n \n ))}\n \n )}\n\n {/* Authentication Modal */}\n {showAuthModal && (\n setShowAuthModal(false)}\n >\n e.stopPropagation()}\n >\n

{authMode === \"login\" ? \"Login\" : \"Register\"}

\n setAuthCredentials(prev => ({ ...prev, username: e.target.value }))}\n style={{ width: \"100%\", padding: \"10px\", margin: \"10px 0\" }}\n />\n setAuthCredentials(prev => ({ ...prev, password: e.target.value }))}\n style={{ width: \"100%\", padding: \"10px\", margin: \"10px 0\" }}\n />\n {authMode === \"register\" && (\n <>\n setAuthCredentials(prev => ({ ...prev, email: e.target.value }))}\n style={{ width: \"100%\", padding: \"10px\", margin: \"10px 0\" }}\n />\n setAuthCredentials(prev => ({ ...prev, age: e.target.value }))}\n style={{ width: \"100%\", padding: \"10px\", margin: \"10px 0\" }}\n />\n \n )}\n setAuthMode(prev => prev === \"login\" ? \"register\" : \"login\")}\n style={{\n backgroundColor: childFriendlyColors.primary,\n color: \"white\",\n border: \"none\",\n padding: \"10px\",\n borderRadius: \"5px\",\n marginRight: \"10px\",\n }}\n >\n Switch to {authMode === \"login\" ? \"Register\" : \"Login\"}\n \n \n {authMode === \"login\" ? \"Login\" : \"Register\"}\n \n \n \n )}\n\n {/* Story Modal */}\n {selectedStory && (\n setSelectedStory(null)}\n >\n e.stopPropagation()}\n >\n

{selectedStory.title}

By {selectedStory.author}

{selectedStory.content}

\n \n \n )}\n \n );\n}\n\n// Client-side rendering\nfunction client() {\n const root = document.getElementById(\"root\");\n if (root) {\n createRoot(root).render();\n }\n}\n\n// Ensure client-side rendering only happens in browser\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(request: Request): Promise {\n return new Response(\n `\n \n \n \n \n StoryLand: Kids' Story Sharing\n \n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"Content-Type\": \"text/html\",\n \"Cache-Control\": \"no-cache, no-store, must-revalidate\",\n },\n },\n );\n}","deleted","label",[99],"permalink","https://www.val.town/x/Habibti01/Book/code/main.tsx","extension","actionData","errors"]