Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fixed the hamburger icon #306

Merged
merged 3 commits into from
Jan 13, 2025
+342 −54
Merged

fixed the hamburger icon #306

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
130f00d
updating
arjunmishraaa Jan 11, 2025
0e0382f
updated pull
arjunmishraaa Jan 11, 2025
981e2a4
hamburger fixd
arjunmishraaa Jan 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
132 changes: 132 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

247 changes: 194 additions & 53 deletions src/Pages/profile.js
View file
Original file line number Diff line number Diff line change
@@ -1,100 +1,241 @@
import React from 'react';
import { useSelector } from 'react-redux';
import styled from 'styled-components';
import React, { useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import styled, { createGlobalStyle } from 'styled-components';
import { motion } from 'framer-motion';
import Button from '../componets/Button'; // Corrected import statement

// Global Styles
const GlobalStyle = createGlobalStyle`
body {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
background-color: ${(props) => (props.darkMode ? '#121212' : '#f4f4f4')};
color: ${(props) => (props.darkMode ? '#fff' : '#333')};
transition: all 0.3s ease;
}
`;

const ProfileContainer = styled.div`
padding: 4rem 2rem;
max-width: 800px;
max-width: 900px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
`;

const Title = styled(motion.h1)`
font-size: 2.5rem;
font-size: 2.8rem;
font-weight: 600;
margin-bottom: 2rem;
text-align: center;
margin-top: 4rem;
color: ${(props) => (props.darkMode ? '#fff' : '#333')};
margin-top: 2rem;
`;

const ProfileInfo = styled(motion.div)`
background-color: white;
background-color: ${(props) => (props.darkMode ? '#1f1f1f' : '#ffffff')};
padding: 2rem;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border-radius: 12px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 600px;
text-align: center;
margin-bottom: 2rem;
`;

const ProfilePicture = styled.div`
width: 120px;
height: 120px;
border-radius: 50%;
margin-bottom: 1.5rem;
background-image: url(${(props) => props.src || '/images/placeholder-avatar.png'});
background-size: cover;
background-position: center;
background-color: ${(props) => (props.src ? 'transparent' : '#dcdcdc')};
`;

const InfoItem = styled.div`
margin-bottom: 1rem;
margin-bottom: 1.5rem;
font-size: 1.1rem;
`;

const Label = styled.span`
font-weight: bold;
font-weight: 500;
margin-right: 0.5rem;
color: ${(props) => (props.darkMode ? '#bbb' : '#555')};
`;

const OrderHistory = styled(motion.div)`
width: 100%;
margin-top: 2rem;
padding: 2rem;
background-color: ${(props) => (props.darkMode ? '#1f1f1f' : '#fff')};
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
`;

const Order = styled.div`
background-color: white;
padding: 1rem;
background-color: ${(props) => (props.darkMode ? '#333' : '#fff')};
padding: 1.2rem;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin-bottom: 1rem;
&:hover {
transform: translateY(-4px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
cursor: pointer;
}
`;

const DarkModeToggle = styled.button`
position: fixed;
top: 20px;
right: 20px;
background: ${(props) => (props.darkMode ? '#fff' : '#333')};
color: ${(props) => (props.darkMode ? '#333' : '#fff')};
border: none;
padding: 10px 15px;
border-radius: 50%;
font-size: 1.5rem;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
&:hover {
opacity: 0.8;
}
`;

// Button Component
const Button = styled.button`
background-color: ${(props) => (props.primary ? '#007bff' : '#ccc')};
color: ${(props) => (props.primary ? '#fff' : '#333')};
font-size: 1.1rem;
padding: 0.8rem 1.5rem;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
&:hover {
background-color: ${(props) => (props.primary ? '#0056b3' : '#bbb')};
transform: translateY(-2px);
}
`;

const Input = styled.input`
width: 100%;
padding: 10px;
margin-top: 10px;
border-radius: 8px;
border: 1px solid ${(props) => (props.darkMode ? '#555' : '#ccc')};
background-color: ${(props) => (props.darkMode ? '#333' : '#fff')};
color: ${(props) => (props.darkMode ? '#fff' : '#333')};
font-size: 1rem;
outline: none;
transition: all 0.3s ease;
`;

function Profile() {
const UserData = JSON.parse(localStorage.getItem('user'));
const user = useSelector((state) => state.auth.user);
const dispatch = useDispatch();
const [darkMode, setDarkMode] = useState(false);

const [editing, setEditing] = useState(false);
const [name, setName] = useState(user?.username || '');
const [email, setEmail] = useState(user?.email || '');

// Mock order history data
const orderHistory = [
{ id: 1, date: '2023-05-01', total: 15.99 },
{ id: 2, date: '2023-05-15', total: 24.99 },
{ id: 3, date: '2023-05-30', total: 19.99 },
];

const handleSave = () => {
// You can dispatch an action to update the user information here
// Example: dispatch(updateUser({ name, email }));
setEditing(false);
};

return (
<ProfileContainer>
<Title
initial={{ opacity: 0, y: -50 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
>
Your Profile
</Title>
<ProfileInfo
initial={{ opacity: 0, y: 50 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: 0.2 }}
>
<InfoItem>
<Label>Name:</Label>
{UserData.username || 'N/A'}
</InfoItem>
<InfoItem>
<Label>Email:</Label>
{UserData.email || 'N/A'}
</InfoItem>
<Button primary>Edit Profile</Button>
</ProfileInfo>
<OrderHistory
initial={{ opacity: 0, y: 50 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: 0.4 }}
>
<h2>Order History</h2>
{orderHistory.map((order) => (
<Order key={order.id}>
<p>Order ID: {order.id}</p>
<p>Date: {order.date}</p>
<p>Total: ${order.total.toFixed(2)}</p>
</Order>
))}
</OrderHistory>
</ProfileContainer>
<>
<GlobalStyle darkMode={darkMode} />
<DarkModeToggle darkMode={darkMode} onClick={() => setDarkMode(!darkMode)}>
{darkMode ? '🌙' : '🌞'}
</DarkModeToggle>
<ProfileContainer>
<Title
initial={{ opacity: 0, y: -50 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
darkMode={darkMode}
>
Your Profile
</Title>
<ProfileInfo
initial={{ opacity: 0, y: 50 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: 0.2 }}
darkMode={darkMode}
>
<ProfilePicture src={user?.profilePicture} />
{editing ? (
<>
<InfoItem>
<Label darkMode={darkMode}>Name:</Label>
<Input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
darkMode={darkMode}
/>
</InfoItem>
<InfoItem>
<Label darkMode={darkMode}>Email:</Label>
<Input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
darkMode={darkMode}
/>
</InfoItem>
<Button primary onClick={handleSave}>
Save
</Button>
</>
) : (
<>
<InfoItem>
<Label darkMode={darkMode}>Name:</Label>
{user?.username || 'N/A'}
</InfoItem>
<InfoItem>
<Label darkMode={darkMode}>Email:</Label>
{user?.email || 'N/A'}
</InfoItem>
<Button onClick={() => setEditing(true)}>Edit Profile</Button>
</>
)}
</ProfileInfo>
<OrderHistory
initial={{ opacity: 0, y: 50 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: 0.4 }}
darkMode={darkMode}
>
<h2>Order History</h2>
{orderHistory.map((order) => (
<Order key={order.id} darkMode={darkMode}>
<p><strong>Order ID:</strong> {order.id}</p>
<p><strong>Date:</strong> {order.date}</p>
<p><strong>Total:</strong> ${order.total.toFixed(2)}</p>
</Order>
))}
</OrderHistory>
</ProfileContainer>
</>

);
}

17 changes: 16 additions & 1 deletion src/componets/Navbar.js
View file
Original file line number Diff line number Diff line change
@@ -168,10 +168,24 @@ const MobileMenuButton = styled(motion.button)`
border-radius: 8px;
transition: all 0.3s ease;
@media (max-width: 768px) {
/* Default styling for mobile */
@media (max-width: 1024px) {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
}
@media (max-width: 768px) {
font-size: 1.3rem;
}
@media (max-width: 480px) {
font-size: 1.2rem;
padding: 0.4rem;
}
&:hover {
@@ -180,6 +194,7 @@ const MobileMenuButton = styled(motion.button)`
}
`;


const MobileMenu = styled(motion.div)`
position: fixed;
top: 72px;