Skip to content

Commit f1b39da

Browse files
buzzracharyeah-rejanbuzzracharyeah-rejan
committed
feat: setup product detail
1 parent 6ede974 commit f1b39da

File tree

8 files changed

+241
-0
lines changed

8 files changed

+241
-0
lines changed

‎public/assets/min-sofa1.png

3.83 KB
Loading

‎public/assets/min-sofa2.png

4.93 KB
Loading

‎public/assets/min-sofa3.png

4.44 KB
Loading

‎public/assets/min-softa.png

3.83 KB
Loading

‎public/assets/sofa.png

123 KB
Loading

‎src/App.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import Contact from './scenes/Contact';
1313
import Error from './scenes/Error';
1414
import Checkout from './scenes/Checkout';
1515
import Cart from './scenes/Cart';
16+
import ProductDetail from './scenes/Shop/fragments/ProductDetail';
1617

1718
const App = () => {
1819
const mode = useAppSelector((state) => state.global.mode) as PaletteMode;
@@ -28,6 +29,7 @@ const App = () => {
2829
<Route path='/home' element={<Navigate to='/dashboard' replace />} />
2930
<Route path='/dashboard' element={<Dashboard />} />
3031
<Route path='/shop' element={<Shop />} />
32+
<Route path='/product/:id' element={<ProductDetail />} />
3133
<Route path='/contact' element={<Contact />} />
3234
<Route path='/checkout' element={<Checkout />} />
3335
<Route path='/cart' element={<Cart />} />

‎src/scenes/Shop/fragments/ProductDetail.tsx

+204
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,204 @@
1+
import {
2+
Box,
3+
Grid,
4+
IconButton,
5+
Button,
6+
Typography,
7+
Tabs,
8+
Tab,
9+
InputBase,
10+
InputAdornment,
11+
Divider,
12+
useTheme,
13+
Select,
14+
SelectChangeEvent,
15+
MenuItem,
16+
} from '@mui/material';
17+
import Header from '../../../components/Header';
18+
import FlexBetween from '../../../components/FlexBetween';
19+
import { AccountCircle } from '@mui/icons-material';
20+
import useStyles from '../useStyles';
21+
import { useState } from 'react';
22+
23+
interface TabPanelProps {
24+
children?: React.ReactNode;
25+
index: number;
26+
value: number;
27+
}
28+
29+
function TabPanel(props: TabPanelProps) {
30+
const { children, value, index, ...other } = props;
31+
32+
return (
33+
<div
34+
role='tabpanel'
35+
hidden={value !== index}
36+
id={`vertical-tabpanel-${index}`}
37+
aria-labelledby={`vertical-tab-${index}`}
38+
{...other}
39+
>
40+
{value === index && <Box sx={{ p: 3 }}>{children}</Box>}
41+
</div>
42+
);
43+
}
44+
45+
const ProductDetail = () => {
46+
const theme = useTheme();
47+
const { classes } = useStyles();
48+
49+
const [quanity, setQuantity] = useState<string>('10');
50+
51+
const handleChange = (event: SelectChangeEvent) => {
52+
setQuantity(event.target.value);
53+
};
54+
55+
return (
56+
<>
57+
<Header location='Home' location1='Shop' />
58+
<Grid container mt='2.5rem' gap='3.5rem'>
59+
{/* LEFT */}
60+
<Grid item sm={12} md={5} lg={4} p='1.5rem 2.85rem'>
61+
<FlexBetween sx={{ maxWidth: '460px' }}>
62+
<Box
63+
display='grid'
64+
flexDirection='column'
65+
alignItems='center'
66+
justifyContent={'flex-start'}
67+
gap='2rem'
68+
>
69+
<Box
70+
component='img'
71+
width='83px'
72+
height='55px'
73+
alt={'min-image'}
74+
src={'/assets/min-sofa1.png'}
75+
sx={{ background: theme.palette.secondary[100], borderRadius: '0.25rem' }}
76+
/>
77+
<Box
78+
component='img'
79+
width='83px'
80+
height='55px'
81+
alt={'min-image'}
82+
src={'/assets/min-sofa2.png'}
83+
sx={{ background: theme.palette.secondary[100], borderRadius: '0.25rem' }}
84+
/>
85+
<Box
86+
component='img'
87+
width='83px'
88+
height='55px'
89+
alt={'min-image'}
90+
src={'/assets/min-sofa3.png'}
91+
sx={{
92+
background: theme.palette.secondary[100],
93+
borderRadius: '0.25rem',
94+
}}
95+
/>
96+
</Box>
97+
98+
{/* MAIN IMAGE DISPLAY */}
99+
<Box
100+
component='img'
101+
maxWidth='481px'
102+
height='300px'
103+
alt={'image'}
104+
src={'/assets/sofa.png'}
105+
sx={{
106+
backgroundColor: theme.palette.secondary[100],
107+
borderRadius: '0.45rem',
108+
objectFit: 'cover',
109+
}}
110+
/>
111+
</FlexBetween>
112+
</Grid>
113+
114+
{/* RIGHT */}
115+
<Grid
116+
item
117+
xs={12}
118+
md={6}
119+
lg={7}
120+
display={'flex'}
121+
flexDirection={'column'}
122+
gap='0.85rem'
123+
p='1rem 2.5rem 0.25rem 3.25rem'
124+
>
125+
<Typography variant='h4' sx={{ ...classes.title }}>
126+
Asgaard sofa
127+
</Typography>
128+
<Typography variant='subtitle1' sx={{ ...classes.subtitle, fontSize: '1rem' }}>
129+
Rs 250,000
130+
</Typography>
131+
<Typography
132+
variant='subtitle1'
133+
sx={{ ...classes.title, fontSize: '0.85rem', width: '424px' }}
134+
>
135+
Setting the bar as one of the loudest speakers in its class, the Kilburn is a compact,
136+
stout-hearted hero with a well-balanced audio which boasts a clear midrange and extended
137+
highs for a sound.
138+
</Typography>
139+
140+
<Box>
141+
<Typography
142+
variant='subtitle1'
143+
sx={{ ...classes.subtitle, fontSize: '0.95rem', mb: '0.85rem' }}
144+
>
145+
Colors
146+
</Typography>
147+
<FlexBetween sx={{ width: '150px' }}>
148+
<Box width='30px' height='30px' borderRadius='50%' sx={{ background: '#816DFA' }} />
149+
<Box
150+
width='30px'
151+
height='30px'
152+
borderRadius='50%'
153+
sx={{ backgroundColor: '#000000' }}
154+
/>
155+
<Box
156+
width='30px'
157+
height='30px'
158+
borderRadius='50%'
159+
sx={{ backgroundColor: '#B88E2F' }}
160+
/>
161+
</FlexBetween>
162+
</Box>
163+
<FlexBetween sx={{ width: '280px' }}>
164+
<Select
165+
labelId='demo-simple-select-label'
166+
id='demo-simple-select'
167+
value={quanity}
168+
label='Age'
169+
onChange={handleChange}
170+
sx={{
171+
width: '80px',
172+
borderRadius: '8px',
173+
}}
174+
>
175+
<MenuItem value={10}>1</MenuItem>
176+
<MenuItem value={20}>2</MenuItem>
177+
<MenuItem value={30}>3</MenuItem>
178+
</Select>
179+
<Button sx={{ ...classes.button, color: '#000' }}>Add to Cart</Button>
180+
</FlexBetween>
181+
<Divider sx={{ m: '1rem 0' }} />
182+
<Box display='flex' flexDirection={'column'} gap='0.85rem'>
183+
<Typography variant='subtitle1' sx={{ ...classes.subtitle, fontSize: '0.85rem' }}>
184+
SKU : ss0011
185+
</Typography>
186+
<Typography variant='subtitle1' sx={{ ...classes.subtitle, fontSize: '0.85rem' }}>
187+
Category : Sofa
188+
</Typography>
189+
<Typography variant='subtitle1' sx={{ ...classes.subtitle, fontSize: '0.85rem' }}>
190+
Tags : Single Seater, Luxury
191+
</Typography>
192+
</Box>
193+
</Grid>
194+
</Grid>
195+
<Box>
196+
<Tabs>
197+
<Tab value='1'></Tab>
198+
</Tabs>
199+
</Box>
200+
</>
201+
);
202+
};
203+
204+
export default ProductDetail;

‎src/scenes/Shop/useStyles.tsx

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
const useStyles = () => {
2+
const classes = {
3+
title: {
4+
color: '#000',
5+
fontSize: '42px',
6+
fontStyle: 'normal',
7+
fontWeight: '400',
8+
lineHeight: 'normal',
9+
},
10+
subtitle: {
11+
color: '#9F9F9F',
12+
fontSize: '24px',
13+
fontStyle: 'normal',
14+
fontWeight: '500',
15+
lineHeight: 'normal',
16+
},
17+
button: {
18+
width: '185px',
19+
height: '55px',
20+
borderRadius: '15px',
21+
border: '1px solid #000',
22+
},
23+
controlButton: {
24+
width: '123px',
25+
height: '64px',
26+
flexShrink: '0',
27+
borderRadius: '10px',
28+
border: '1px solid #9F9F9F',
29+
background: '#FFF',
30+
},
31+
};
32+
return { classes };
33+
};
34+
35+
export default useStyles;

0 commit comments

Comments
 (0)