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 } 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";
@@ -11,10 +11,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"});
 
@@ -38,22 +42,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);
@@ -161,6 +181,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")}
@@ -192,7 +243,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, { useState } from 'react';
-import { Link } from "react-router-dom";
+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,7 +8,6 @@ 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 { useNavigate } from 'react-router-dom';
 
 const Cart = () => {
   const initialItems = [
@@ -214,9 +213,9 @@ const Cart = () => {
 `}</style>
 
       <div className="cart-top">
-        <a href="/index.html">
+        <Link to="/cart2">
           <img src={carticon} className="cart-icon" alt="Cart Icon" />
-        </a>
+        </Link>
         <span className="cart-count">{cartCount}</span>
       </div>
       <div className="card-container">

src/Components/cart/cart2.js

@@ -0,0 +1,102 @@
+import React, { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';  // Import Link from react-router-dom
+
+const ShoppingCart1 = () => {
+    const [cartItems, setCartItems] = useState([]);
+    const [totalItems, setTotalItems] = useState(0);
+    const [totalPrice, setTotalPrice] = useState(0);
+
+    useEffect(() => {
+        // Fetch cart items from localStorage
+        const storedItems = JSON.parse(localStorage.getItem('cartItems')) || [];
+        setCartItems(storedItems);
+
+        // Calculate total items and price
+        let itemsCount = 0;
+        let priceSum = 0;
+
+        storedItems.forEach(item => {
+            itemsCount += item.quantity;
+            priceSum += item.price * item.quantity;
+        });
+
+        setTotalItems(itemsCount);
+        setTotalPrice(priceSum);
+    }, []);
+
+    return (
+        <div 
+            className="container" 
+            style={{ 
+                display: 'flex', 
+                justifyContent: 'center', 
+                alignItems: 'flex-start', 
+                height: '100vh',
+                marginTop: '1px',
+                position: 'relative'
+            }}
+        >
+            {/* Link to Cart.js */}
+            <Link 
+                className="arrow" 
+                to="/cart"  // Use to="/cart" instead of href="/cart"
+                style={{
+                    position: 'absolute',
+                    top: '20px', // Adjust as needed
+                    left: '20px' // Adjust as needed
+                }}
+            >
+                <img 
+                    src="data:image/png;base64,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" 
+                    alt="back" 
+                />
+            </Link>
+
+            <div 
+                className="shopping-cart" 
+                style={{ 
+                    width: '1000px', 
+                    height: '300px',
+                    padding: '40px', 
+                    border: '1px solid #ccc', 
+                    borderRadius: '10px', 
+                    boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)', 
+                    backgroundColor: '#1f1c35', 
+                    textAlign: 'center', 
+                    color: '#fff'
+                }}
+            >
+                <h2>Your Cart</h2>
+                <div className="total" style={{ margin: '20px 0', fontSize: '18px' }}>
+                    Total Items: <span id="total-items">{totalItems}</span><br />
+                    Total Price: $<span id="total-price">{totalPrice.toFixed(2)}</span>
+                </div>
+                <div 
+                    style={{
+                        display: 'flex',
+                        justifyContent: 'center',
+                        marginTop: '20px'
+                    }}
+                >
+                    <button
+                        style={{
+                            padding: '15px 30px',
+                            backgroundColor: '#ff21bc', 
+                            color: '#fff',
+                            border: 'none',
+                            borderRadius: '5px',
+                            cursor: 'pointer',
+                            fontSize: '16px'
+                        }}
+                        onClick={() => alert('Proceed to Checkout')}
+                        disabled={totalItems === 0}
+                    >
+                        Proceed to Checkout
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ShoppingCart1;

src/configs/router.js

@@ -27,6 +27,7 @@ import ResetPassword from "../Components/auth/resetPassword/ResetPassword";
 import Freelancer from "../Components/FreeLancer/Freelancer";
 import Feedbackform from "../Components/feedback/feedbackform";
 import ShoppingCart from "../Components/cart/cart";
+import ShoppingCart1 from "../Components/cart/cart2.js";
 import Testimonials from "../Components/Testimonials/Testimonials";
 import Contributors from "../Components/Contributors";
 import Wallet from "../Components/wallet/Wallet";
@@ -61,6 +62,7 @@ const router = createBrowserRouter([
   { path: "/freelancer", element: <Freelancer /> },
   { path: "/feedback", element: <Feedbackform /> },
   { path: "/cart", element: <ShoppingCart /> },
+  { path: "/cart2", element: <ShoppingCart1 /> },
   { path: "/testimonials", element: <Testimonials /> },
   { path: "/contributors", element: <Contributors /> },
   { path: "/wallet", element: <Wallet /> },