Complete 08. Hidden Search Bar

Author: DevHanza

08. Hidden-Search-Bar/README.md

@@ -1,12 +0,0 @@
-# React + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend using TypeScript and enable type-aware lint rules. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.

08. Hidden-Search-Bar/package-lock.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "react-icons": "^5.5.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",

08. Hidden-Search-Bar/package.json

@@ -1 +1,12 @@
-rfce
+import React from "react";
+import HiddenSearchBar from "./HiddenSearchBar";
+
+function App() {
+  return (
+    <div>
+      <HiddenSearchBar />
+    </div>
+  );
+}
+
+export default App;

08. Hidden-Search-Bar/src/App.jsx

@@ -0,0 +1,32 @@
+import React, { useState } from "react";
+import { FaSearch } from "react-icons/fa";
+
+function HiddenSearchBar() {
+  const [showInput, setShowInput] = useState(false);
+  const [bgColor, setBgColor] = useState("white");
+
+  const handleClick = (e) => {
+    setBgColor("#1a1a1a");
+
+    if (e.target.className === "container") {
+      setShowInput(false);
+      setBgColor("#fff");
+    }
+  };
+
+  return (
+    <section
+      className="container"
+      style={{ backgroundColor: bgColor }}
+      onClick={handleClick}
+    >
+      {showInput ? (
+        <input type="text" placeholder="Search..." />
+      ) : (
+        <FaSearch onClick={() => setShowInput(true)} />
+      )}
+    </section>
+  );
+}
+
+export default HiddenSearchBar;

08. Hidden-Search-Bar/src/HiddenSearchBar.jsx

@@ -0,0 +1,34 @@
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+section {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  transition: 0.7s ease;
+}
+
+button {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  padding: 10px 20px;
+  background: transparent;
+  cursor: pointer;
+}
+
+input {
+  padding: 13px 12px;
+  background: transparent;
+  outline: none;
+  border: 1px solid #fff;
+  color: #fff;
+  border-radius: 2px;
+  box-shadow: 2px 2px 2px 1px rgb(35, 35, 35);
+}