Search App

\n setQuery(e.target.value)}\n placeholder=\"Search for anything, just empty string to see all results...\"\n style={styles.searchInput}\n />\n \n \n );\n}\n\nfunction SearchResultCard({ item }) {\n return (\n

\n #{item.id}\n

{item.title}

{item.body}

\n {item.footer}\n

\n 👍\n 💬\n 🔗\n

\n );\n}\n\nfunction SearchResults({ results }) {\n return (\n

Results

\n {results.map((item) => (\n \n ))}\n

\n );\n}\n\nfunction App() {\n const [searchResults, setSearchResults] = useState([]);\n\n const handleSearch = (query) => {\n const results = items.filter(item =>\n item.title.toLowerCase().includes(query.toLowerCase()) ||\n item.body.toLowerCase().includes(query.toLowerCase())\n );\n setSearchResults(results);\n };\n\n return (\n

\n \n

\n );\n}\n\nconst styles = {\n navbar: {\n backgroundColor: '#333',\n color: 'white',\n padding: '1rem',\n },\n navbarTitle: {\n margin: 0,\n },\n container: {\n display: 'flex',\n height: 'calc(100vh - 60px)', // Adjust based on navbar height\n },\n searchContainer: {\n width: '50%',\n padding: '2rem',\n },\n searchForm: {\n display: 'flex',\n marginBottom: '1rem',\n },\n searchInput: {\n flex: 1,\n padding: '0.5rem',\n fontSize: '1rem',\n },\n searchButton: {\n padding: '0.5rem 1rem',\n fontSize: '1rem',\n backgroundColor: '#007bff',\n color: 'white',\n border: 'none',\n cursor: 'pointer',\n },\n resultsPanel: {\n width: '50%',\n backgroundColor: '#f8f9fa',\n padding: '1rem',\n overflowY: 'auto',\n },\n resultsPanelTitle: {\n marginTop: 0,\n },\n card: {\n backgroundColor: 'white',\n borderRadius: '4px',\n boxShadow: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',\n marginBottom: '1rem',\n padding: '1rem',\n },\n cardHeader: {\n display: 'flex',\n alignItems: 'center',\n marginBottom: '0.5rem',\n },\n cardId: {\n backgroundColor: '#007bff',\n color: 'white',\n borderRadius: '50%',\n padding: '0.2rem 0.5rem',\n marginRight: '0.5rem',\n fontSize: '0.8rem',\n },\n cardTitle: {\n margin: 0,\n },\n cardBody: {\n marginBottom: '0.5rem',\n },\n cardFooter: {\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n borderTop: '1px solid #eee',\n paddingTop: '0.5rem',\n },\n cardActions: {\n display: 'flex',\n },\n actionIcon: {\n marginLeft: '0.5rem',\n cursor: 'pointer',\n },\n};\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") { client(); }\n\nasync function server(request: Request): Promise {\n return new Response(`\n \n \n Search App\n \n \n \n \n

\n \n

View source: ${import.meta.url.replace(\"esm.town\", \"val.town\")}

\n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n });\n}\n\nconst css = `\nbody {\n margin: 0;\n font-family: system-ui, sans-serif;\n}\n`;\n\nexport default server;","deleted","label",[99],"permalink","https://www.val.town/x/breeze4/bigFuchsiaHalibut/code/main.tsx","extension","actionData","errors"]