Search App

/** * This React app creates a search interface with a navbar and two equal-width panels. * It includes a search input on the left and displays search results as cards on the right. * The search functionality is simulated with a static list of items. */ /** @jsxImportSource https://esm.sh/react */ import React, { useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; // Simulated data for search results const items = [ { id: 1, title: "Apple", body: "A sweet, edible fruit produced by an apple tree.", footer: "Fruit" }, { id: 2, title: "Banana", body: "An elongated, edible fruit produced by several kinds of large herbaceous flowering plants.", footer: "Fruit" }, { id: 3, title: "Cherry", body: "A fruit of many plants of the genus Prunus, and is a fleshy drupe (stone fruit).", footer: "Fruit" }, { id: 4, title: "Date", body: "The fruit of the date palm tree, which is cultivated for its sweet fruit.", footer: "Fruit" }, { id: 5, title: "Elderberry", body: "The dark purple berry from various species of the elder plant.", footer: "Berry" }, ]; function Navbar() { return ( ); } function SearchBar({ onSearch }) { const [query, setQuery] = useState(""); const handleSubmit = (e) => { e.preventDefault(); onSearch(query); }; return ( ); } function SearchResultCard({ item }) { return (

#{item.id}

{item.title}

{item.body}

{item.footer}

👍 💬 🔗

); } function SearchResults({ results }) { return (

Results

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

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

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

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

`, { headers: { "content-type": "text/html", }, }); } const css = ` body { margin: 0; font-family: system-ui, sans-serif; } `; export default server;

bigFuchsiaHalibut

Versions

v0