Skip to content

Commit

Permalink
Merge pull request #705 from Ojas-Arora/portal
Browse files Browse the repository at this point in the history 
Type Icon
  • Loading branch information
@SUGAM-ARORA
SUGAM-ARORA authored Aug 9, 2024
2 parents 92259d6 + 7139a33 commit 4629dba
Show file tree
Hide file tree
Showing 6 changed files with 278 additions and 193 deletions.
23 changes: 23 additions & 0 deletions src/Components/MainContainer.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
57 changes: 54 additions & 3 deletions src/Components/MainContainer.js
View file
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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"});

Expand All @@ -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);
Expand Down Expand Up @@ -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")}
Expand Down Expand Up @@ -195,7 +246,7 @@ function MainContainer() {
{activeButton === "Feed" ? (
<CardMain sortProjects={sortProjects}/>
) : (
<Popular /> // Use the Popular component here
<Popular />
)}
</main>
</div>
Expand Down
198 changes: 97 additions & 101 deletions src/Components/cart/cart.js
View file
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Loading

0 comments on commit 4629dba

Please sign in to comment.