Update index.html
Browse files- index.html +24 -1
index.html
CHANGED
@@ -21,6 +21,7 @@
|
|
21 |
useState
|
22 |
} = React;
|
23 |
function App() {
|
|
|
24 |
const [videos, setVideos] = useState([]);
|
25 |
const [teamDatasets, setTeamDatasets] = useState({});
|
26 |
useEffect(() => {
|
@@ -86,14 +87,36 @@
|
|
86 |
"π Worldwide", React.createElement("br", null),
|
87 |
"π
June 2025, 14 at 09:00 AM (UTC+2) β June 2025, 15 at 06:00 PM (UTC+2)"
|
88 |
),
|
|
|
89 |
React.createElement("div", {
|
90 |
className: "flex flex-wrap justify-center items-center gap-8 mb-10"
|
91 |
},
|
92 |
),
|
93 |
|
94 |
React.createElement("div", {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
95 |
className: "columns-1 sm:columns-2 lg:columns-3 gap-4 space-y-4"
|
96 |
-
}, videos
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
97 |
React.createElement("div", {
|
98 |
key: i,
|
99 |
className: "break-inside-avoid bg-white rounded-2xl shadow-md overflow-hidden"
|
|
|
21 |
useState
|
22 |
} = React;
|
23 |
function App() {
|
24 |
+
const [searchQuery, setSearchQuery] = useState("");
|
25 |
const [videos, setVideos] = useState([]);
|
26 |
const [teamDatasets, setTeamDatasets] = useState({});
|
27 |
useEffect(() => {
|
|
|
87 |
"π Worldwide", React.createElement("br", null),
|
88 |
"π
June 2025, 14 at 09:00 AM (UTC+2) β June 2025, 15 at 06:00 PM (UTC+2)"
|
89 |
),
|
90 |
+
|
91 |
React.createElement("div", {
|
92 |
className: "flex flex-wrap justify-center items-center gap-8 mb-10"
|
93 |
},
|
94 |
),
|
95 |
|
96 |
React.createElement("div", {
|
97 |
+
className: "flex justify-center mb-6"
|
98 |
+
},
|
99 |
+
|
100 |
+
React.createElement("input", {
|
101 |
+
type: "text",
|
102 |
+
placeholder: "Search videosβ¦",
|
103 |
+
className: "px-4 py-2 w-full max-w-md border rounded-md shadow-md",
|
104 |
+
value: searchQuery,
|
105 |
+
onChange: (e) => setSearchQuery(e.target.value.toLowerCase())
|
106 |
+
})
|
107 |
+
)
|
108 |
+
|
109 |
+
React.createElement("div", {
|
110 |
className: "columns-1 sm:columns-2 lg:columns-3 gap-4 space-y-4"
|
111 |
+
}, videos
|
112 |
+
.filter(video => {
|
113 |
+
return (
|
114 |
+
video.label.toLowerCase().includes(searchQuery) ||
|
115 |
+
video.url.toLowerCase().includes(searchQuery)
|
116 |
+
);
|
117 |
+
})
|
118 |
+
.map((video, i) =>
|
119 |
+
|
120 |
React.createElement("div", {
|
121 |
key: i,
|
122 |
className: "break-inside-avoid bg-white rounded-2xl shadow-md overflow-hidden"
|