#28 Projects

src/projects/6. Search Icon Project/index.js

@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+import { FaSearch } from 'react-icons/fa';
+import './style.css';
+
+function Learn_6() {
+  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 Learn_6;

src/projects/6. Search Icon Project/style.css

@@ -0,0 +1,33 @@
+* {
+    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);
+}

src/projects/index.js

@@ -1,17 +1,19 @@
 import React from 'react';
 
 //* PROJECT
-// import Project_10 from './10.E-Commerce-Advance-Filtering';
 // import Project_3 from './3. Meals API Project';
-import Project_4 from './4. Calculator';
+// import Project_4 from './4. Calculator';
 // import Project_5 from './5. Color Toggler';
+// import Project_6 from './6. Search Icon Project';
+// import Project_10 from './10.E-Commerce-Advance-Filtering';
 
 const Projects = () => {
   return (
     <>
       {/* <Project_3 /> */}
-      <Project_4 />
+      {/* <Project_4 /> */}
       {/* <Project_5 /> */}
+      {/* <Project_6 /> */}
       {/* <Project_10 /> */}
     </>
   );