Type Icon

src/Components/MainContainer.css

@@ -540,6 +540,29 @@
   text-decoration: underline;
 }
 
+.dropdown {
+  position: absolute;
+  background-color: #19162c;
+  gap:0px;
+  z-index: 1000; /* Make sure dropdown appears above other elements */
+  width: 100px;
+  border-radius: 5px;
+}
+
+.sub-dropdown{
+  position: absolute;
+  background-color: #19162c;
+  z-index: 1000; /* Make sure dropdown appears above other elements */
+  width: 100px;
+  gap:0px;
+  border-radius: 5px;
+}
+.dropdown-item{
+  width: 150px;
+  z-index: 1000;
+  gap:0px;
+}
+
 .contBox {
   position: relative;
   top: -290px;

src/Components/MainContainer.js

@@ -1,7 +1,7 @@
 import React, {useRef, useState, useEffect, useContext} from "react";
 import DefaultBanner from "../img/1.jpg";
 import CardMain from "./CardMain";
-import Popular from "./Popular"; // Correctly import Popular component
+import Popular from "./Popular";
 import "./MainContainer.css";
 import MainRightBottomCard from "./MainRightBottomCard";
 import MainRightTopCard from "./MainRightTopCard";
@@ -12,10 +12,14 @@ const MAX_IMAGE_SIZE = 2185200; // 2MB
 function MainContainer() {
   const imageUploadInputRef = useRef(null);
   const dropdownRef = useRef(null);
+  const typeDropdownRef = useRef(null);
   const [banner, setBanner] = useState(DefaultBanner);
   const [activeButton, setActiveButton] = useState("Feed");
   const [activeFilterButton, setActiveFilterButton] = useState("All");
   const [sortByOpen, setSortByOpen] = useState(false);
+  const [typeDropdownOpen, setTypeDropdownOpen] = useState(false);
+  const [projectSubDropdownOpen, setProjectSubDropdownOpen] = useState(false);
+  const [developerSubDropdownOpen, setDeveloperSubDropdownOpen] = useState(false); // State for Developer sub-dropdown
   const [nameDropdownOpen, setNameDropdownOpen] = useState(false);
   const [sortCriteria, setSortCriteria] = useState({key:"name", order: "asc"});
 
@@ -39,22 +43,38 @@ function MainContainer() {
     setActiveFilterButton(buttonName);
     if (buttonName === "Sort By") {
       setSortByOpen(!sortByOpen);
+    } else if (buttonName === "Type") {
+      setTypeDropdownOpen(!typeDropdownOpen);
     } else {
       setSortByOpen(false);
+      setTypeDropdownOpen(false);
     }
   };
 
+  const toggleProjectSubDropdown = () => {
+    setProjectSubDropdownOpen(!projectSubDropdownOpen);
+  };
+
+  const toggleDeveloperSubDropdown = () => {
+    setDeveloperSubDropdownOpen(!developerSubDropdownOpen); // Toggle Developer sub-dropdown
+  };
+
    const toggleNameDropdown = () => {
     setNameDropdownOpen(!nameDropdownOpen);
    };
 
-  // Close dropdown if clicked outside
+  // Close dropdowns if clicked outside
   useEffect(() => {
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         setSortByOpen(false);
         setNameDropdownOpen(false);
       }
+      if (typeDropdownRef.current && !typeDropdownRef.current.contains(event.target)) {
+        setTypeDropdownOpen(false);
+        setProjectSubDropdownOpen(false);
+        setDeveloperSubDropdownOpen(false); // Close Developer sub-dropdown
+      }
     };
 
     document.addEventListener("mousedown", handleClickOutside);
@@ -164,6 +184,37 @@ function MainContainer() {
               >
                 Type
               </button>
+              {typeDropdownOpen && (
+                <div className="dropdown" ref={typeDropdownRef}>
+                  <button className="dropdown-item" onClick={toggleProjectSubDropdown}>
+                    Project
+                  </button>
+                  {projectSubDropdownOpen && (
+                    <div className="sub-dropdown">
+                      <button className="dropdown-item">StockIT</button>
+                      <button className="dropdown-item">TakeNote</button>
+                      <button className="dropdown-item">TaRct</button>
+                      <button className="dropdown-item">To Do</button>
+                      <button className="dropdown-item">ArchiTect</button>
+                      <button className="dropdown-item">WeatherLy</button>
+                      <button className="dropdown-item">TypingTest</button>
+                      <button className="dropdown-item">Artisan</button>
+                      <button className="dropdown-item">ChrisClark</button>
+                      <button className="dropdown-item">ChrisMiller</button>
+                      <button className="dropdown-item">SearchEngine</button>
+                      <button className="dropdown-item">AIimage</button>
+                    </div>
+                  )}
+                  <button className="dropdown-item" onClick={toggleDeveloperSubDropdown}>
+                    Developer
+                  </button>
+                  {developerSubDropdownOpen && (
+                    <div className="sub-dropdown">
+                      <button className="dropdown-item">X</button>
+                    </div>
+                  )}
+                </div>
+              )}
               <button
                 className="button2"
                 onClick={() => toggleFilterButtonHandler("Sort By")}
@@ -195,7 +246,7 @@ function MainContainer() {
             {activeButton === "Feed" ? (
               <CardMain sortProjects={sortProjects}/>
             ) : (
-              <Popular /> // Use the Popular component here
+              <Popular />
             )}
           </main>
         </div>

src/Components/cart/cart.js

@@ -1,5 +1,5 @@
-import React, {useContext, useState} from 'react';
-import {Link, useNavigate} from "react-router-dom";
+import React, { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
 import homeIcon from '../../img/homeicon.png';
 import carticon from './12.png';
 import Card1 from "../../img/card1.jpg";
@@ -8,72 +8,68 @@ import Card3 from "../../img/card3.jpg";
 import Card4 from "../../img/card4.jpg";
 import Card5 from "../../img/card5.jpg";
 import Card6 from "../../img/card6.jpg";
-import {ThemeContext} from "../../App";
 
 const Cart = () => {
-
-    const {theme} = useContext(ThemeContext)
-
-    const initialItems = [
-        {id: 1, name: 'StockIT', price: 10, quantity: 0, image: Card1},
-        {id: 2, name: 'TakeNote', price: 12, quantity: 0, image: Card2},
-        {id: 3, name: 'TaRct', price: 21, quantity: 0, image: Card3},
-        {id: 4, name: 'To Do', price: 13, quantity: 0, image: Card4},
-        {id: 5, name: 'ArchiTect', price: 15, quantity: 0, image: Card5},
-        {id: 6, name: 'WeatherLy', price: 17, quantity: 0, image: Card6},
-        {id: 7, name: 'TypingTest', price: 11, quantity: 0, image: '/static/media/card7.b25b2be8caee889d6ad4.png'},
-        {id: 8, name: 'Artisan', price: 18, quantity: 0, image: '/static/media/card8.5c7a98cedad9864c46b7.png'},
-        {id: 9, name: 'BBlocks', price: 25, quantity: 0, image: '/static/media/card9.6d96022c8f0793e6dd91.png'},
-        {id: 10, name: 'ZzShoes', price: 19, quantity: 0, image: '/static/media/card10.a53e1291e52ef0a4c11c.png'},
-        {id: 11, name: 'SearchImage', price: 13, quantity: 0, image: '/static/media/card11.e2371ccc231824202cda.png'},
-        {id: 12, name: 'Alimage', price: 20, quantity: 0, image: '/static/media/card12.093d95181352dfd0126b.png'},
-    ];
-
-    const [cartItems, setCartItems] = useState(initialItems);
-    const [cartCount, setCartCount] = useState(
-        initialItems.reduce((total, item) => total + item.quantity, 0)
+  const initialItems = [
+    { id: 1, name: 'StockIT', price: 10, quantity: 0, image: Card1 },
+    { id: 2, name: 'TakeNote', price: 12, quantity: 0, image: Card2 },
+    { id: 3, name: 'TaRct', price: 21, quantity: 0, image: Card3 },
+    { id: 4, name: 'To Do', price: 13, quantity: 0, image: Card4 },
+    { id: 5, name: 'ArchiTect', price: 15, quantity: 0, image: Card5 },
+    { id: 6, name: 'WeatherLy', price: 17, quantity: 0, image: Card6 },
+    { id: 7, name: 'TypingTest', price: 11, quantity: 0, image: '/static/media/card7.b25b2be8caee889d6ad4.png' },
+    { id: 8, name: 'Artisan', price: 18, quantity: 0, image: '/static/media/card8.5c7a98cedad9864c46b7.png' },
+    { id: 9, name: 'BBlocks', price: 25, quantity: 0, image: '/static/media/card9.6d96022c8f0793e6dd91.png' },
+    { id: 10, name: 'ZzShoes', price: 19, quantity: 0, image: '/static/media/card10.a53e1291e52ef0a4c11c.png' },
+    { id: 11, name: 'SearchImage', price: 13, quantity: 0, image: '/static/media/card11.e2371ccc231824202cda.png' },
+    { id: 12, name: 'Alimage', price: 20, quantity: 0, image: '/static/media/card12.093d95181352dfd0126b.png' },
+  ];
+
+  const [cartItems, setCartItems] = useState(initialItems);
+  const [cartCount, setCartCount] = useState(
+    initialItems.reduce((total, item) => total + item.quantity, 0)
+  );
+
+  const addToCart = (itemId) => {
+    setCartItems((prevItems) =>
+      prevItems.map((item) =>
+        item.id === itemId
+          ? { ...item, quantity: item.quantity + 1 }
+          : item
+      )
     );
-
-    const addToCart = (itemId) => {
-        setCartItems((prevItems) =>
-            prevItems.map((item) =>
-                item.id === itemId
-                    ? {...item, quantity: item.quantity + 1}
-                    : item
-            )
-        );
-        setCartCount(cartCount + 1);
-    };
-
-    const removeFromCart = (itemId) => {
-        const item = cartItems.find((item) => item.id === itemId);
-        if (item && item.quantity > 0) {
-            setCartItems((prevItems) =>
-                prevItems.map((item) =>
-                    item.id === itemId
-                        ? {...item, quantity: item.quantity - 1}
-                        : item
-                )
-            );
-            setCartCount(cartCount - 1);
-        }
-    };
-
-    const navigate = useNavigate();
-
-    const signIn = () => {
-        navigate('/login'); // Navigate to the login page
-        window.scrollTo(0, 0);
-    };
-
-    const signUp = () => {
-        navigate('/login'); // Navigate to the login page
-        window.scrollTo(0, 0);
-    };
-
-    return (
-        <div className={`cart-container ${theme}`}>
-            <style>{`
+    setCartCount(cartCount + 1);
+  };
+
+  const removeFromCart = (itemId) => {
+    const item = cartItems.find((item) => item.id === itemId);
+    if (item && item.quantity > 0) {
+      setCartItems((prevItems) =>
+        prevItems.map((item) =>
+          item.id === itemId
+            ? { ...item, quantity: item.quantity - 1 }
+            : item
+        )
+      );
+      setCartCount(cartCount - 1);
+    }
+  };
+
+  const navigate = useNavigate();
+
+  const signIn = () => {
+    navigate('/login'); // Navigate to the login page
+    window.scrollTo(0, 0);
+  };
+
+  const signUp = () => {
+    navigate('/login'); // Navigate to the login page
+    window.scrollTo(0, 0);
+  };
+
+  return (
+    <div className="cart-container">
+      <style>{`
   body {
     font-family: Arial, sans-serif;
     margin: 0;
@@ -216,44 +212,44 @@ const Cart = () => {
   }
 `}</style>
 
-            <div className="cart-top">
-                <a href="/index.html">
-                    <img src={carticon} className="cart-icon" alt="Cart Icon"/>
-                </a>
-                <span className="cart-count">{cartCount}</span>
+      <div className="cart-top">
+        <Link to="/cart2">
+          <img src={carticon} className="cart-icon" alt="Cart Icon" />
+        </Link>
+        <span className="cart-count">{cartCount}</span>
+      </div>
+      <div className="card-container">
+        <Link to="/" className="home-link" style={{ marginRight: '10px', marginTop: '30px' }}>
+          <img src={homeIcon} alt="Home" className="home-icon" />
+        </Link>
+        {cartItems.map((item) => (
+          <div className="card" key={item.id}>
+            <img src={item.image} alt={item.name} />
+            <h3>{item.name}</h3>
+            <div className="price-quantity">
+              <div>
+                <span>Price</span>
+                <p>{item.price}</p>
+              </div>
+              <div>
+                <span>Quantity</span>
+                <p>{item.quantity}</p>
+              </div>
             </div>
-            <div className={`card-container ${theme}`}>
-                <Link to="/" className="home-link" style={{marginRight: '10px', marginTop: '30px'}}>
-                    <img src={homeIcon} alt="Home" className="home-icon"/>
-                </Link>
-                {cartItems.map((item) => (
-                    <div className="card" key={item.id}>
-                        <img src={item.image} alt={item.name}/>
-                        <h3>{item.name}</h3>
-                        <div className="price-quantity">
-                            <div>
-                                <span>Price</span>
-                                <p>{item.price}</p>
-                            </div>
-                            <div>
-                                <span>Quantity</span>
-                                <p>{item.quantity}</p>
-                            </div>
-                        </div>
-                        <div className="buttons">
-                            <button onClick={() => addToCart(item.id)}>Add to Cart</button>
-                            <button onClick={() => removeFromCart(item.id)}>Remove from Cart</button>
-                        </div>
-                    </div>
-                ))}
+            <div className="buttons">
+              <button onClick={() => addToCart(item.id)}>Add to Cart</button>
+              <button onClick={() => removeFromCart(item.id)}>Remove from Cart</button>
             </div>
-
-            <div className="cart-signin">
-                <button onClick={signIn}>Enter Your UniCollab Portal</button>
-                <button onClick={signUp}>Be Part of Our UniCollab Club</button>
-            </div>
-        </div>
-    );
+          </div>
+        ))}
+      </div>
+
+      <div className="cart-signin">
+        <button onClick={signIn}>Enter Your UniCollab Portal</button>
+        <button onClick={signUp}>Be Part of Our UniCollab Club</button>
+      </div>
+    </div>
+  );
 };
 
 export default Cart;