[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_157":158,"_159":160},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_86":-7,"_87":88,"_67":-7,"_89":-5,"_15":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":-5,"_100":-5,"_101":-5,"_102":20,"_103":104,"_105":41,"_106":-5,"_107":-5,"_108":109},"routes/_app.x.$handle.$name.remixes",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":22,"_23":22,"_24":-5},"handle","vawogbemi","name","inputtest","project",{"_25":26,"_13":14,"_27":28,"_29":-5,"_30":20,"_31":32,"_33":32,"_34":-5,"_35":-5,"_36":37,"_38":39,"_40":41,"_42":41,"_43":-5,"_44":22,"_45":46,"_47":-5,"_48":-5,"_49":-5,"_50":-5,"_51":52,"_53":52,"_54":55,"_56":55,"_57":55,"_58":52,"_59":52,"_60":61,"_62":63,"_64":65,"_66":20},"forks",[],"hasNext",false,"page",0,"forkCount","upstream","id","68a3fbf2-33b7-11f0-a9d2-9e149126039e","createdAt",["D",1747552327607],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","userId","2a463891-c041-4488-97d7-5c4873f793b2","pinnedFileId","8670ca8e-33b7-11f0-b90a-9e149126039e","pinPreview",true,"pinMigrated","screenshotVersion","likeCount","orgId","4bf34fc5-775b-4490-bd5b-9599385e237f","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_85":81},"org",{"_11":12,"_79":-5,"_80":81,"_36":37,"_82":83,"_84":20},"branch",{"_67":68,"_13":69,"_25":70,"_71":26,"_72":-5,"_73":-5,"_74":-5,"_75":-5,"_76":-5,"_77":14,"_78":12},"isOwned","version",3,"main","68a4511a-33b7-11f0-a9d2-9e149126039e","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://images.clerk.dev/oauth_github/img_2TXrDk0iTsMgo2T7z93Wn4eqcgK.jpeg","tier","free","canRestrictVals","profileImageUrl","branchName","path","","adoptOrgId",{"_25":26,"_13":14,"_27":153,"_29":-5,"_30":20,"_31":32,"_33":32,"_34":-5,"_35":-5,"_36":37,"_38":39,"_40":41,"_42":41,"_43":-5,"_44":22,"_45":46,"_47":-5,"_48":-5,"_49":-5,"_50":-5,"_51":52,"_53":52,"_54":55,"_56":55,"_57":55,"_58":52,"_59":52,"_60":154,"_62":155,"_64":156,"_66":20},"tree",[144,145],"files",[144,145],"counts",{"_135":22,"_136":121,"_17":22,"_137":138,"_139":140},"contents",[110,111],"file","upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_25":129,"_13":130,"_114":131,"_115":-5,"_116":70,"_117":68,"_119":41,"_27":132,"_67":22,"_122":99,"_124":133,"_126":20,"_127":-5,"_87":134},{"_25":112,"_13":113,"_114":39,"_115":-5,"_116":70,"_117":118,"_119":41,"_27":120,"_67":121,"_122":123,"_124":125,"_126":20,"_127":-5,"_87":128},"88e148ac-33b7-11f0-8fa9-9e149126039e","index.tsx","fileId","parentId","branchId","branchVersion",2,"latest",["D",1747552381692],1,"fileType","http","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport { renderToString } from \"https://esm.sh/react-dom@18.2.0/server\";\n\n// Simple search icon component\nconst IconSearch = ({ className }: { className?: string }) => (\n \n);\n\nconst SearchBar = ({ \n searchQuery, \n setSearchQuery, \n showBorder = true \n}: { \n searchQuery: string; \n setSearchQuery: (query: string) => void;\n showBorder?: boolean;\n}) => (\n \n

\n \n

\n setSearchQuery(e.target.value)}\n />\n \n);\n\nconst App = () => {\n const [searchQuery, setSearchQuery] = useState(\"\");\n const [results, setResults] = useState([]);\n\n const handleSearch = () => {\n // This is just a demo - in a real app, you'd fetch actual results\n if (searchQuery.trim() === \"\") {\n setResults([]);\n } else {\n setResults([\n `Result 1 for \"${searchQuery}\"`,\n `Result 2 for \"${searchQuery}\"`,\n `Result 3 for \"${searchQuery}\"`\n ]);\n }\n };\n\n return (\n

Search Demo

\n \n

\n {\n setSearchQuery(query);\n // Auto-search as user types\n setTimeout(handleSearch, 300);\n }} \n />\n \n

\n \n {results.length > 0 && (\n

Results

{result}

\n )}\n

\n );\n};\n\nexport default async function(req: Request) {\n const html = `\n \n \n \n \n \n Search Component Demo\n \n \n \n \n

${renderToString()}

\n \n \n \n \n \n \n `;\n\n return new Response(html, {\n headers: {\n \"Content-Type\": \"text/html\",\n },\n });\n}","deleted","label",[113],"8daa5040-33b7-11f0-afa5-9e149126039e","README.md","8daa50ea-33b7-11f0-afa5-9e149126039e",["D",1747552389721],"# SearchBar Component Demo\n\nThis is a simple HTTP val that demonstrates a SearchBar component with React.\n\n## Features\n\n- Responsive search bar component with icon\n- Real-time search results as you type\n- Server-side rendering with client-side hydration\n- TailwindCSS for styling\n\n## Component Props\n\nThe `SearchBar` component accepts the following props:\n\n- `searchQuery` (string): The current search query value\n- `setSearchQuery` (function): Callback function to update the search query\n- `showBorder` (boolean, optional): Whether to show the border styling (defaults to true)\n\n## Implementation Details\n\n- Uses React 18.2.0 for both server and client rendering\n- Includes a simple SVG search icon\n- Demonstrates basic state management with React hooks\n- Shows how to handle search input and display results\n\n## Usage\n\nAccess this val via HTTP to see the search component in action.",[130],"pulls","branches","envVars",{"_141":22,"_143":22},"connections",{"_141":22,"_142":22},"count","unfilledCount","emptyCount",{"_25":129,"_13":130,"_114":131,"_115":-5,"_116":70,"_117":68,"_119":41,"_27":150,"_67":22,"_122":99,"_124":133,"_126":20,"_127":-5,"_147":151,"_87":152},{"_25":112,"_13":113,"_114":39,"_115":-5,"_116":70,"_117":118,"_119":41,"_27":146,"_67":121,"_122":123,"_124":125,"_126":20,"_127":-5,"_147":148,"_87":149},["D",1747552381692],"children",[],[113],["D",1747552389721],[],[130],["D",1747552327607],{"_11":12,"_85":81},{"_11":12,"_79":-5,"_80":81,"_36":37,"_82":83,"_84":20},{"_67":68,"_13":69,"_25":70,"_71":26,"_72":-5,"_73":-5,"_74":-5,"_75":-5,"_76":-5,"_77":14,"_78":12},"ctx",{"_60":-5,"_107":190,"_191":192,"_193":194,"_195":20,"_196":20,"_197":20,"_198":41,"_199":-5,"_200":-7,"_201":-7,"_202":22,"_203":20,"_204":20,"_205":-5,"_206":20,"_207":20,"_208":20,"_209":-5},"ENV",{"_161":162,"_163":164,"_165":69,"_166":167,"_168":169,"_170":171,"_172":173,"_174":175,"_176":177,"_178":179,"_180":181,"_182":183,"_184":185,"_186":187,"_188":189},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","c73f21da490985bff19c279eb0e09db24d688e4f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Remixes