Skip to content

Commit 12eec13

Browse files
Soliman3Soliman3
committed
Add styling to Single Product Page
 - Add styling to top of the single page - Create bottom of the page (Update Form) for single product - Add styling to Update Form of single product
1 parent f959c39 commit 12eec13

File tree

1 file changed

+158
-19
lines changed

1 file changed

+158
-19
lines changed

‎admin/src/pages/ProductSinglePage.jsx‎

Lines changed: 158 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -11,61 +11,169 @@ import Charts from '../components/Charts'
1111

1212
// import produts data from dummyData.js file...
1313
import { productsData } from '../Data/dummyData'
14+
import { AddOutlined, Publish } from '@mui/icons-material'
1415

1516
// Styling...
1617
const Container = styled.div`
1718
flex: 4;
19+
padding: 20px;
1820
`
1921
const ProductTitleContainer = styled.div`
20-
22+
display: flex;
23+
align-items: center;
24+
justify-content: space-between;
25+
margin: 0px 20px;
2126
`
2227
const ProductTitle = styled.h1`
2328
2429
`
2530
const ProductAddNew = styled.button`
26-
31+
width: 80px;
32+
border: none;
33+
padding: 5px;
34+
color: white;
35+
background-color: #069106;
36+
font-size: 16px;
37+
border-radius: 5px;
38+
cursor: pointer;
2739
`
2840
const ProductTop = styled.div`
29-
30-
`
31-
const ProductBottom = styled.div`
32-
41+
display: flex;
3342
`
43+
3444
const ProductTopLeft = styled.div`
35-
45+
flex: 1;
46+
width: 50%;
47+
margin-top: 10px;
3648
`
3749
const ProductTopRight = styled.div`
38-
50+
flex: 1;
51+
height: 155px;
52+
padding: 20px;
53+
margin: 20px;
54+
border-radius: 10px;
55+
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
56+
display: flex;
3957
`
4058
const ProductInfoTop = styled.div`
41-
59+
display: flex;
60+
flex-direction: column;
61+
align-items: center;
62+
margin-right: 25px;
4263
`
4364
const ProductInfoBottom = styled.div`
65+
margin-top: 20px;
4466
4567
`
4668
const ProductInfoImage = styled.img`
47-
69+
width: 100%;
70+
height: 100%;
71+
margin-right: 20px;
72+
border-radius: 10%;
73+
object-fit: cover;
4874
`
49-
const ProductInfoName = styled.h1`
50-
75+
const ProductInfoName = styled.span`
76+
font-weight: 600;
77+
font-size: 25px;
5178
`
5279
const ProductInfoBottomItem = styled.div`
53-
80+
width: 150px;
81+
display: flex;
82+
justify-content: space-between;
5483
`
5584
const ProductInfoBottomKey = styled.span`
56-
85+
font-weight: 500;
5786
`
5887
const ProductInfoBottomValue = styled.span`
5988
6089
`
90+
const ProductBottom = styled.div`
91+
padding: 20px;
92+
margin: 20px;
93+
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
94+
border-radius: 10px;
95+
`
96+
const ProductBottomForm = styled.div`
97+
display: flex;
98+
justify-content: space-between;
99+
`
100+
const ProductFormLeft = styled.div`
101+
display: flex;
102+
flex-direction: column;
103+
`
104+
const ProductFormLeftItem = styled.div`
105+
display: flex;
106+
flex-direction: column;
107+
`
108+
const ProductItemLabel = styled.label`
109+
margin-bottom:10px;
110+
`
111+
const ProductItemInput = styled.input`
112+
margin-bottom: 10px;
113+
width: 100%;
114+
border-radius: 5px;
115+
height: 35px;
116+
padding-left: 5px;
117+
`
118+
const ProductItemSelect = styled.select`
119+
margin-bottom: 10px;
120+
width: 100%;
121+
border-radius: 5px;
122+
height: 40px;
123+
padding: 5px;
124+
`
125+
const ProductItemOption = styled.option`
126+
127+
`
128+
const ProductFormRight = styled.div`
129+
display: flex;
130+
flex-direction: column;
131+
`
132+
const ProductFormImageUpload = styled.div`
133+
display: flex;
134+
align-items: center;
135+
`
136+
const ProductImage = styled.img`
137+
width: 200px;
138+
height: 200px;
139+
`
140+
const ProductImageUploadLabel = styled.label`
141+
142+
`
143+
const ProductImageUploadInput = styled.input`
144+
145+
`
146+
const ProductUpdateButton = styled.button`
147+
cursor: pointer;
148+
border: none;
149+
border-radius: 5px;
150+
padding: 10px 15px;
151+
background-color: #069106;
152+
color: white;
153+
margin-top: 25px;
154+
// when hover on button...
155+
&:hover{
156+
transform: scale(1.1);
157+
font-weight: bold;
158+
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
159+
}
160+
// when active on button...
161+
&:active{
162+
background-color: #0ee80e;
163+
}
164+
`
165+
61166
// Product Single Page React Functional Component...
62167
export default function ProductSinglePage() {
63168
return (
64169
<Container>
65170
<ProductTitleContainer>
66-
<ProductTitle>Item Page</ProductTitle>
171+
<ProductTitle>Product Page</ProductTitle>
67172
<Link to="/newproduct" style={{ color: 'inherit', backgroundColor: 'inherit', textDecoration: 'none' }}>
68-
<ProductAddNew>New</ProductAddNew>
173+
<ProductAddNew>
174+
<AddOutlined style={{ fontSize: '18px', marginRight: '5px' }} />
175+
New
176+
</ProductAddNew>
69177
</Link>
70178
</ProductTitleContainer>
71179
<ProductTop>
@@ -75,11 +183,11 @@ export default function ProductSinglePage() {
75183
<ProductTopRight>
76184
<ProductInfoTop>
77185
<ProductInfoImage src="https://i.ibb.co/GsH4D2J/2.png" alt="" />
78-
<ProductInfoName>Iphone 12mini</ProductInfoName>
79186
</ProductInfoTop>
80187
<ProductInfoBottom>
188+
<ProductInfoName>Iphone 12mini</ProductInfoName>
81189
<ProductInfoBottomItem>
82-
<ProductInfoBottomKey>Serial Number</ProductInfoBottomKey>
190+
<ProductInfoBottomKey>Serial</ProductInfoBottomKey>
83191
<ProductInfoBottomValue>09562257110</ProductInfoBottomValue>
84192
</ProductInfoBottomItem>
85193
<ProductInfoBottomItem>
@@ -97,7 +205,38 @@ export default function ProductSinglePage() {
97205
</ProductInfoBottom>
98206
</ProductTopRight>
99207
</ProductTop>
100-
<ProductBottom></ProductBottom>
208+
<ProductBottom>
209+
<ProductBottomForm>
210+
<ProductFormLeft>
211+
<ProductFormLeftItem>
212+
<ProductItemLabel>Product Name</ProductItemLabel>
213+
<ProductItemInput type="text" placeholder="Iphone 12mini" />
214+
</ProductFormLeftItem>
215+
<ProductFormLeftItem>
216+
<ProductItemLabel>In Stock</ProductItemLabel>
217+
<ProductItemSelect name="inStock" id="inStock">
218+
<ProductItemOption value="yes">Yes</ProductItemOption>
219+
<ProductItemOption value="no">No</ProductItemOption>
220+
</ProductItemSelect>
221+
</ProductFormLeftItem>
222+
<ProductFormLeftItem>
223+
<ProductItemLabel>Active</ProductItemLabel>
224+
<ProductItemSelect name="active" id="active">
225+
<ProductItemOption value="yes">Yes</ProductItemOption>
226+
<ProductItemOption value="no">No</ProductItemOption>
227+
</ProductItemSelect>
228+
</ProductFormLeftItem>
229+
</ProductFormLeft>
230+
<ProductFormRight>
231+
<ProductFormImageUpload>
232+
<ProductImage src="https://i.ibb.co/GsH4D2J/2.png" alt="" />
233+
<ProductImageUploadLabel for="file"><Publish /></ProductImageUploadLabel>
234+
<ProductImageUploadInput type="file" id="file" style={{display: 'none'}} />
235+
</ProductFormImageUpload>
236+
<ProductUpdateButton>Update</ProductUpdateButton>
237+
</ProductFormRight>
238+
</ProductBottomForm>
239+
</ProductBottom>
101240
</Container>
102241
)
103242
}

0 commit comments

Comments
 (0)