update

mostlyali07 · Sep 7, 2023 · bd82de1 · bd82de1
1 parent def1ab0
commit bd82de1
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 8 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules/
diff --git a/src/components/Category.jsx b/src/components/Category.jsx
@@ -6,22 +6,22 @@ import { NavLink } from "react-router-dom";
 function Category() {
     return (
         <List>
-            <NavLink to={"/cuisine/Italian"}>
+            <SLink to={"/cuisine/Italian"}>
                 <FaPizzaSlice />
                 <h4>Italian</h4>
-            </NavLink>
-            <NavLink to={"/cuisine/American"}>
+            </SLink>
+            <SLink to={"/cuisine/American"}>
                 <FaHamburger />
                 <h4>American</h4>
-            </NavLink>
-            <NavLink to={"/cuisine/Thai"}>
+            </SLink>
+            <SLink to={"/cuisine/Thai"}>
                 <GiNoodles />
                 <h4>Thai</h4>
-            </NavLink>
-            <NavLink to={"/cuisine/Japanese"}>
+            </SLink>
+            <SLink to={"/cuisine/Japanese"}>
                 <GiChopsticks />
                 <h4>Japanese</h4>
-            </NavLink>
+            </SLink>
         </List>
     )
 }
@@ -32,6 +32,42 @@ display: flex;
 justify-content: center ;
 margin: 2rem 0rem;
 `
+const SLink = styled(NavLink)`
+display: flex;
+flex-direction: column;
+justify-content: center;
+align-items: center;
+border-radius: 50%;
+margin-right: 2rem;
+text-decoration: none;
+background: linear-gradient(35deg, #494949, #313131);
+width: 6rem;
+height: 6rem;
+cursor: pointer;
+transform: scale(0.8);
+
+h4{
+    color: white;
+    font-size: 0.8rem;
+}
+
+svg{
+    color:#fff;
+    font-size: 1.5rem;
+}
+
+&.active{
+    background: linear-gradient(to right, #f27121, #e94057);
+
+    svg{
+        color: white;
+    }
+
+    h4{
+        color: white;
+    }
+}
 
+`;
 export default Category