Ajout d'une barre de recherche pour interroger Wikipedia avec un form…

src/App.css

@@ -2,6 +2,62 @@
   text-align: center;
 }
 
+.search-bar-container {
+  background-color: #1a1a2e;
+  padding: 15px 0;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.wikipedia-search {
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+  max-width: 600px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+.search-input {
+  flex: 1;
+  padding: 10px 15px;
+  border: 2px solid #61dafb;
+  border-radius: 5px;
+  font-size: 1rem;
+  background-color: white;
+  color: #282c34;
+  transition: border-color 0.3s;
+}
+
+.search-input:focus {
+  outline: none;
+  border-color: #ff6b6b;
+  box-shadow: 0 0 5px rgba(97, 218, 251, 0.3);
+}
+
+.search-button {
+  padding: 10px 25px;
+  background-color: #61dafb;
+  color: #282c34;
+  border: none;
+  border-radius: 5px;
+  font-size: 1rem;
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color 0.3s, transform 0.2s;
+}
+
+.search-button:hover {
+  background-color: #4fa8c5;
+  transform: scale(1.05);
+}
+
+.search-button:active {
+  transform: scale(0.98);
+}
+
 .App-logo {
   height: 40vmin;
   pointer-events: none;

src/App.jsx

@@ -1,8 +1,34 @@
 import './App.css';
+import { useState } from 'react';
 
 function App() {
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const handleSearch = (e) => {
+    e.preventDefault();
+    if (searchQuery.trim()) {
+      window.open(
+        `https://wikipedia.org/wiki/${encodeURIComponent(searchQuery)}`,
+        '_blank'
+      );
+      setSearchQuery('');
+    }
+  };
+
   return (
     <div className="App">
+      <div className="search-bar-container">
+        <form onSubmit={handleSearch} className="wikipedia-search">
+          <input
+            type="text"
+            placeholder="Rechercher sur Wikipedia..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="search-input"
+          />
+          <button type="submit" className="search-button">Rechercher</button>
+        </form>
+      </div>
       <header className="App-header">
         <img src="Octocat.png" className="App-logo" alt="logo" />
         <p>