Skip to content

Commit 0501a14

Browse files
Soliman3Soliman3
authored
Merge pull request #3 from Soliman3/develop
Pull develop
2 parents b1ccdde + 16208cb commit 0501a14

File tree

19 files changed

+344
-133
lines changed

19 files changed

+344
-133
lines changed

‎admin/.gitignore‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
/node_modules
55
/.pnp
66
.pnp.js
7-
7+
firebase.js
88
# testing
99
/coverage
1010

‎admin/src/pages/ProductSinglePage.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -331,7 +331,7 @@ export default function ProductSinglePage() {
331331
</ProductFormLeftItem>
332332
<ProductFormLeftItem>
333333
<ProductItemLabel>Categories</ProductItemLabel>
334-
<ProductItemInput type="text" placeholder="" name="category" onChange={handleCategories}/>
334+
<ProductItemInput type="text" placeholder={product.category} name="category" onChange={handleCategories}/>
335335
</ProductFormLeftItem>
336336
<ProductFormLeftItem>
337337
<ProductItemLabel>In Stock</ProductItemLabel>

‎client/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
"web-vitals": "^2.1.4"
2727
},
2828
"scripts": {
29-
"start": "react-scripts start",
29+
"start": "set PORT=3002 && react-scripts start",
3030
"build": "react-scripts build",
3131
"test": "react-scripts test",
3232
"eject": "react-scripts eject"

‎client/src/Data/categoriesData.js‎

Lines changed: 54 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,68 @@
1-
import OfferFirstSlide from '../images/2.png'
2-
import OfferSecondSlide from '../images/2.png'
3-
import OfferThirdSlide from '../images/2.png'
1+
import Mobiles from '../images/mobiles.jpg'
2+
import accessories from '../images/airpod.png'
3+
import appliances from '../images/homeAppliances.jpg'
4+
import Men from '../images/menWear.jpg'
5+
import Grocery from '../images/grocery.jpg'
6+
import Beauty from '../images/beauty.jpg'
7+
import Baby from '../images/baby.jpg'
8+
import Vega from '../images/veg.jpg'
9+
import KidsWear from '../images/kidsWear.jpg'
410

511
export const categories = [
612
{
713
id: 1,
8-
img: OfferFirstSlide,
9-
title: "MOBILE",
14+
img: Mobiles,
15+
title: "mobile",
1016
category: "mobile",
1117
},
1218
{
1319
id: 2,
14-
img: OfferSecondSlide,
15-
title: "Accessories",
20+
img: accessories,
21+
title: "accessories",
1622
category: "accessories",
1723
},
1824
{
1925
id: 3,
20-
img: OfferThirdSlide,
21-
title: "HOME APPLIANCE",
26+
img: appliances,
27+
title: "appliances",
2228
category: "appliances",
23-
}
29+
},
30+
{
31+
id: 4,
32+
img: Men,
33+
title: "Men",
34+
category: "Men",
35+
},
36+
{
37+
id: 5,
38+
img: Grocery,
39+
title: "grocery",
40+
category: "grocery",
41+
},
42+
{
43+
id: 6,
44+
img: Beauty,
45+
title: "beauty",
46+
category: "beauty",
47+
},
48+
{
49+
id: 7,
50+
img: Baby,
51+
title: "baby",
52+
category: "baby",
53+
},
54+
{
55+
id: 8,
56+
img: Vega,
57+
title: "fruits & veg",
58+
category: "fruits & veg",
59+
},
60+
{
61+
id: 9,
62+
img: KidsWear,
63+
title: "Kids Wear",
64+
category: "Kids Wear",
65+
},
66+
67+
2468
]

‎client/src/components/CategoryBar.jsx‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import React from 'react';
2+
import styled from 'styled-components';
3+
4+
// import icons from muiv5 library...
5+
import {ArrowDropDown} from '@mui/icons-material';
6+
7+
// Styling...
8+
const Container = styled.div`
9+
height: 50px;
10+
border-top: 0.25px solid #bee4f4;
11+
border-bottom: 0.25px solid #bee4f4;
12+
`
13+
const Wrapper = styled.div`
14+
height: 100%;
15+
display: flex;
16+
17+
`
18+
const LeftContainer = styled.div`
19+
flex: 1;
20+
align-items: center;
21+
padding: 15px;
22+
display: flex;
23+
justify-content: space-between;
24+
border-right: 0.25px solid #bee4f4;
25+
`
26+
const LeftContainerLabel = styled.span`
27+
font-size: 16px;
28+
font-weight: bold;
29+
`
30+
const LeftContainerIcon = styled.div`
31+
32+
`
33+
const RightContainer = styled.div`
34+
flex: 4;
35+
align-items: center;
36+
padding: 15px;
37+
display: flex;
38+
`
39+
const RightContainerItem = styled.span`
40+
font-size: 16px;
41+
margin-right: 25px;
42+
font-weight: bold;
43+
color: ${(props)=> props.type === 'vip' && 'red'};
44+
`
45+
46+
47+
export default function CategoryBar() {
48+
return (
49+
<Container>
50+
<Wrapper>
51+
<LeftContainer>
52+
<LeftContainerLabel>All Category</LeftContainerLabel>
53+
<LeftContainerIcon><ArrowDropDown style={{color: 'blue'}}/></LeftContainerIcon>
54+
</LeftContainer>
55+
<RightContainer>
56+
<RightContainerItem>Electronics</RightContainerItem>
57+
<RightContainerItem>Mobiles</RightContainerItem>
58+
<RightContainerItem>Men</RightContainerItem>
59+
<RightContainerItem>Women</RightContainerItem>
60+
<RightContainerItem>Home</RightContainerItem>
61+
<RightContainerItem>Beauty</RightContainerItem>
62+
<RightContainerItem>Babay & Toys</RightContainerItem>
63+
<RightContainerItem>Electronics</RightContainerItem>
64+
<RightContainerItem>Supermarket</RightContainerItem>
65+
<RightContainerItem type="vip">DEALS</RightContainerItem>
66+
67+
</RightContainer>
68+
</Wrapper>
69+
</Container>
70+
)
71+
}

‎client/src/components/CategoryHotProduct.jsx‎

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
import React from 'react';
2+
import styled from 'styled-components';
3+
import Mobile from '../images/mobiles.jpg'
4+
5+
// Styling...
6+
const Container = styled.div`
7+
display: flex;
8+
flex-direction: column;
9+
background-color: skyblue;
10+
width: 100%;
11+
height: auto;
12+
`
13+
const Wrapper = styled.div`
14+
display: flex;
15+
flex-direction: column;
16+
`
17+
const TopContainer = styled.div`
18+
display: flex;
19+
align-items: center;
20+
justify-content: space-between;
21+
padding: 25px;
22+
`
23+
const TopContainerTitle = styled.div`
24+
font-weight: 900;
25+
font-size: 40px;
26+
`
27+
const TopContainerButton = styled.button`
28+
background-color: black;
29+
color: white;
30+
padding: 10px 20px;
31+
font-size: 35px;
32+
font-weight: bold;
33+
`
34+
const BottomContainer = styled.div`
35+
display: flex;
36+
margin:0px 20px;
37+
border: none;
38+
justify-content: space-between;
39+
`
40+
const BottomContainerItem = styled.div`
41+
display: flex;
42+
flex-direction: column;
43+
width: 12%;
44+
height: 300px;
45+
border: 5px solid white;
46+
margin:10px;
47+
background-color: white;
48+
margin-bottom: 20px;
49+
50+
51+
`
52+
const BottomItemImageContainer = styled.div`
53+
flex: 3;
54+
position: relative;
55+
border: none;
56+
`
57+
const BottomItemImage = styled.img`
58+
width: 100%;
59+
height: 100%;
60+
bottom: 0;
61+
top: 0;
62+
right: 0;
63+
left: 0;
64+
position: absolute;
65+
object-fit: cover;
66+
border: none;
67+
`
68+
const BottomItemTextContainer = styled.div`
69+
flex: 1.15;
70+
background-color: white;
71+
display: flex;
72+
flex-direction: column;
73+
align-items: center;
74+
padding-top: 20px;
75+
`
76+
const BottomItemText = styled.span`
77+
font-weight: 900;
78+
font-size: 20px;
79+
`
80+
const BottomItemTextSale = styled.span`
81+
font-weight: bold;
82+
font-size: 18px;
83+
color: #d11636;
84+
`
85+
86+
87+
export default function CategoryHotProduct() {
88+
return (
89+
<Container>
90+
<Wrapper>
91+
<TopContainer>
92+
<TopContainerTitle>ELECTRONICS</TopContainerTitle>
93+
<TopContainerButton>Shop Now</TopContainerButton>
94+
</TopContainer>
95+
<BottomContainer>
96+
<BottomContainerItem>
97+
<BottomItemImageContainer>
98+
<BottomItemImage src={Mobile} />
99+
</BottomItemImageContainer>
100+
<BottomItemTextContainer>
101+
<BottomItemText>Video Game</BottomItemText>
102+
<BottomItemTextSale>UP TO 50% OFF</BottomItemTextSale>
103+
</BottomItemTextContainer>
104+
</BottomContainerItem>
105+
<BottomContainerItem>
106+
<BottomItemImageContainer>
107+
<BottomItemImage src={Mobile} />
108+
</BottomItemImageContainer>
109+
<BottomItemTextContainer>
110+
<BottomItemText>Video Game</BottomItemText>
111+
<BottomItemTextSale>UP TO 50% OFF</BottomItemTextSale>
112+
</BottomItemTextContainer>
113+
</BottomContainerItem>
114+
<BottomContainerItem>
115+
<BottomItemImageContainer>
116+
<BottomItemImage src={Mobile} />
117+
</BottomItemImageContainer>
118+
<BottomItemTextContainer>
119+
<BottomItemText>Video Game</BottomItemText>
120+
<BottomItemTextSale>UP TO 50% OFF</BottomItemTextSale>
121+
</BottomItemTextContainer>
122+
</BottomContainerItem>
123+
<BottomContainerItem>
124+
<BottomItemImageContainer>
125+
<BottomItemImage src={Mobile} />
126+
</BottomItemImageContainer>
127+
<BottomItemTextContainer>
128+
<BottomItemText>Video Game</BottomItemText>
129+
<BottomItemTextSale>UP TO 50% OFF</BottomItemTextSale>
130+
</BottomItemTextContainer>
131+
</BottomContainerItem>
132+
<BottomContainerItem>
133+
<BottomItemImageContainer>
134+
<BottomItemImage src={Mobile} />
135+
</BottomItemImageContainer>
136+
<BottomItemTextContainer>
137+
<BottomItemText>Video Game</BottomItemText>
138+
<BottomItemTextSale>UP TO 50% OFF</BottomItemTextSale>
139+
</BottomItemTextContainer>
140+
</BottomContainerItem>
141+
<BottomContainerItem>
142+
<BottomItemImageContainer>
143+
<BottomItemImage src={Mobile} />
144+
</BottomItemImageContainer>
145+
<BottomItemTextContainer>
146+
<BottomItemText>Video Game</BottomItemText>
147+
<BottomItemTextSale>UP TO 50% OFF</BottomItemTextSale>
148+
</BottomItemTextContainer>
149+
</BottomContainerItem>
150+
<BottomContainerItem>
151+
<BottomItemImageContainer>
152+
<BottomItemImage src={Mobile} />
153+
</BottomItemImageContainer>
154+
<BottomItemTextContainer>
155+
<BottomItemText>Video Game</BottomItemText>
156+
<BottomItemTextSale>UP TO 50% OFF</BottomItemTextSale>
157+
</BottomItemTextContainer>
158+
</BottomContainerItem>
159+
</BottomContainer>
160+
</Wrapper>
161+
</Container>
162+
)
163+
}

0 commit comments

Comments
 (0)