1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
/**
* 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 (
<nav style={styles.navbar}>
<h1 style={styles.navbarTitle}>Search App</h1>
</nav>
);
}
function SearchBar({ onSearch }) {
const [query, setQuery] = useState("");
const handleSubmit = (e) => {
e.preventDefault();
onSearch(query);
};
return (
<form onSubmit={handleSubmit} style={styles.searchForm}>
<input
type="text"
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder="Search for anything, just empty string to see all results..."
style={styles.searchInput}
/>
<button type="submit" style={styles.searchButton}>Search</button>
</form>
);
}
function SearchResultCard({ item }) {
return (
<div style={styles.card}>
<div style={styles.cardHeader}>
<span style={styles.cardId}>#{item.id}</span>
<h3 style={styles.cardTitle}>{item.title}</h3>
</div>
<p style={styles.cardBody}>{item.body}</p>
<div style={styles.cardFooter}>
<span>{item.footer}</span>
<div style={styles.cardActions}>
<span style={styles.actionIcon}>👍</span>
<span style={styles.actionIcon}>💬</span>
<span style={styles.actionIcon}>🔗</span>
</div>
</div>
</div>
);
}
function SearchResults({ results }) {
return (
<div style={styles.resultsPanel}>
<h2 style={styles.resultsPanelTitle}>Results</h2>
{results.map((item) => (
<SearchResultCard key={item.id} item={item} />
))}
</div>
);
}
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 (
<div>
<Navbar />
<div style={styles.container}>
<div style={styles.searchContainer}>
<SearchBar onSearch={handleSearch} />
</div>
<SearchResults results={searchResults} />
</div>