Skip to content

Commit 1ed9046

Browse files
buzzracharyeah-rejanbuzzracharyeah-rejan
committed
feat: setup contacts
1 parent e321e80 commit 1ed9046

File tree

11 files changed

+226
-5
lines changed

11 files changed

+226
-5
lines changed

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
"@reduxjs/toolkit": "^1.9.5",
1919
"react": "^18.2.0",
2020
"react-dom": "^18.2.0",
21+
"react-hook-form": "^7.45.1",
2122
"react-redux": "^8.1.1",
2223
"react-router-dom": "^6.14.1",
2324
"styled-components": "^6.0.2",

‎public/assets/clock.svg

+10
Loading

‎public/assets/location.svg

+3
Loading

‎public/assets/phone.svg

+5
Loading

‎src/App.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import Layout from './scenes/Layout';
99
import Dashboard from './scenes/Dashboard';
1010
import Mock from './scenes/Mock';
1111
import Shop from './scenes/Shop';
12+
import Contact from './scenes/Contact';
1213

1314
const App = () => {
1415
const mode = useAppSelector((state) => state.global.mode) as PaletteMode;
@@ -24,6 +25,7 @@ const App = () => {
2425
<Route path='/home' element={<Navigate to='/dashboard' replace />} />
2526
<Route path='/dashboard' element={<Dashboard />} />
2627
<Route path='/shop' element={<Shop />} />
28+
<Route path='/contact' element={<Contact />} />
2729
<Route path='/mock' element={<Mock />} />
2830
</Route>
2931
</Routes>

‎src/components/CustomFormInputs/index.tsx

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
// src/form-component/FormInputText.tsx
2+
import { Control, Controller } from 'react-hook-form';
3+
import TextField from '@mui/material/TextField';
4+
5+
type FormInputProps = {
6+
name: string;
7+
control: any;
8+
label: string;
9+
};
10+
11+
export const FormInputText = ({ name, control, label }: FormInputProps) => {
12+
const classes = {
13+
textField: {
14+
height: '75px',
15+
borderRadius: '10px',
16+
background: '#FFF',
17+
color: '#000',
18+
border: '1px solid #9F9F9F',
19+
padding: '1rem',
20+
'& .MuiInputBase-input': {
21+
border: 'none',
22+
},
23+
'&:hover': {
24+
border: '1px solid #9F9F9F',
25+
},
26+
'&:active': {
27+
borderRadius: '10px',
28+
border: '1px solid #9F9F9F',
29+
},
30+
},
31+
};
32+
return (
33+
<Controller
34+
name={name}
35+
control={control}
36+
render={({ field: { onChange, value }, fieldState: { error }, formState }) => (
37+
<TextField
38+
helperText={error ? error.message : null}
39+
size='small'
40+
error={!!error}
41+
onChange={onChange}
42+
value={value}
43+
fullWidth
44+
label={label}
45+
variant='outlined'
46+
sx={classes.textField}
47+
/>
48+
)}
49+
/>
50+
);
51+
};

‎src/scenes/Shop/fragments/Header.tsx ‎src/components/Header/index.tsx

+8-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
import { Box } from '@mui/material';
2-
import CustomBreadCrumb from '../../../components/BreadCrumb';
2+
import CustomBreadCrumb from '../BreadCrumb';
33

4-
const Header = () => {
4+
type HeaderProps = {
5+
title?: string;
6+
location?: string;
7+
location1?: string;
8+
};
9+
const Header = ({ title, location, location1 }: HeaderProps) => {
510
const classes = {
611
header: {
712
background: 'url(/assets/background.png)',
@@ -18,7 +23,7 @@ const Header = () => {
1823
return (
1924
<Box height='316px' sx={classes.header} position='relative'>
2025
<Box position='absolute' top='50%' left='50%' sx={{ transform: 'translate(-50%, -50%)' }}>
21-
<CustomBreadCrumb title='Shop' location='Home' location1='Shop' />
26+
<CustomBreadCrumb title={title} location={location} location1={location1} />
2227
</Box>
2328
</Box>
2429
);

‎src/scenes/Contact/fragments/ContactForm.tsx

+107
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
import { useForm } from 'react-hook-form';
2+
import { FormInputText } from '../../../components/CustomFormInputs';
3+
import { Box, Button, Grid, Typography, useTheme } from '@mui/material';
4+
import FlexBetween from '../../../components/FlexBetween';
5+
6+
const ContactForm = () => {
7+
const theme = useTheme();
8+
const { handleSubmit, control, reset } = useForm({
9+
defaultValues: {
10+
name: '',
11+
email: '',
12+
subject: '',
13+
message: '',
14+
},
15+
});
16+
const onSubmit = (data: any) => console.log(data);
17+
return (
18+
<>
19+
<Grid container>
20+
<Grid item md={6} lg={4}>
21+
<Box display='flex' flexWrap='wrap' justifyContent='space-around' gap='2.8rem'>
22+
<FlexBetween>
23+
<Box component='img' alt='location' src='/assets/location.svg' />
24+
<Box
25+
justifyContent='center'
26+
alignItems='center'
27+
display='flex'
28+
flexDirection={'column'}
29+
width='212px'
30+
>
31+
<Typography variant='h6'>Address</Typography>
32+
<Typography variant='body2' textAlign={'center'}>
33+
236 5th SE Avenue, New York NY10000, United States
34+
</Typography>
35+
</Box>
36+
</FlexBetween>
37+
<FlexBetween>
38+
<Box component='img' alt='location' src='/assets/clock.svg' />
39+
<Box
40+
justifyContent='center'
41+
alignItems='center'
42+
display='flex'
43+
flexDirection={'column'}
44+
width='212px'
45+
>
46+
<Typography variant='h6'>Working Time</Typography>
47+
<Typography variant='body2' textAlign={'center'}>
48+
Monday-Friday: 9:00 - 22:00 Saturday-Sunday: 9:00 - 21:00
49+
</Typography>
50+
</Box>
51+
</FlexBetween>
52+
<FlexBetween>
53+
<Box component='img' alt='location' src='/assets/location.svg' />
54+
<Box
55+
justifyContent='center'
56+
alignItems='center'
57+
display='flex'
58+
flexDirection={'column'}
59+
width='212px'
60+
>
61+
<Typography variant='h6'>Address</Typography>
62+
<Typography variant='body2' textAlign={'center'}>
63+
236 5th SE Avenue, New York NY10000, United States
64+
</Typography>
65+
</Box>
66+
</FlexBetween>
67+
</Box>
68+
</Grid>
69+
70+
<Grid item xs={12} md={6} lg={8}>
71+
{' '}
72+
<form
73+
onSubmit={handleSubmit(onSubmit)}
74+
style={{
75+
display: 'flex',
76+
flexDirection: 'column',
77+
justifyContent: 'center',
78+
alignItems: 'center',
79+
gap: '3.5rem',
80+
}}
81+
>
82+
<FormInputText name='name' control={control} label='Your name' />
83+
<FormInputText name='email' control={control} label='Email Address' />
84+
<FormInputText name='subject' control={control} label='Subject' />
85+
<FormInputText name='message' control={control} label='Message' />
86+
</form>
87+
<Box my='1rem'>
88+
<Button
89+
type='submit'
90+
sx={{
91+
background: theme.palette.secondary.main,
92+
padding: '0.5rem 2.5rem',
93+
'&:hover': {
94+
background: theme.palette.secondary[400],
95+
},
96+
}}
97+
>
98+
Submit
99+
</Button>
100+
</Box>
101+
</Grid>
102+
</Grid>
103+
</>
104+
);
105+
};
106+
107+
export default ContactForm;

‎src/scenes/Contact/index.tsx

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { Box, Container, Typography } from '@mui/material';
2+
import Header from '../../components/Header';
3+
import ContactForm from './fragments/ContactForm';
4+
5+
const Contact = () => {
6+
return (
7+
<>
8+
<Header title='Contacts' location='Home' location1='Contact' />
9+
<Container maxWidth='lg' sx={{ my: '2.5rem' }}>
10+
<Box
11+
display='flex'
12+
justifyContent='center'
13+
alignItems='center'
14+
flexDirection='column'
15+
gap='1rem'
16+
my='3.5rem'
17+
>
18+
<Typography variant='h4' textAlign={'center'}>
19+
Get In Touch With Us
20+
</Typography>
21+
<Typography variant='body1' textAlign={'center'} width={'644px'} color={'#9F9F9F'}>
22+
For More Information About Our Product & Services. Please Feel Free To Drop Us An Email.
23+
Our Staff Always Be There To Help You Out. Do Not Hesitate!
24+
</Typography>
25+
</Box>
26+
<ContactForm />
27+
</Container>
28+
</>
29+
);
30+
};
31+
32+
export default Contact;

‎src/scenes/Shop/index.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import { Box } from '@mui/material';
2-
import Header from './fragments/Header';
2+
import Header from '../../components/Header';
33
import ShoppingItems from './fragments/ShoppingItems';
44
import Banner from '../../components/Banner';
55

66
const Shop = () => {
77
return (
88
<>
9-
<Header />
9+
<Header title='Shop' location='Home' location1='Shop' />
1010
<ShoppingItems />
1111
<Banner />
1212
{/* <Box sx={{ border: '1px solid #000', display: 'flex', justifyContent: 'center ' }}></Box> */}

‎yarn.lock

+5
Original file line numberDiff line numberDiff line change
@@ -2906,6 +2906,11 @@ react-dom@^18.2.0:
29062906
loose-envify "^1.1.0"
29072907
scheduler "^0.23.0"
29082908

2909+
react-hook-form@^7.45.1:
2910+
version "7.45.1"
2911+
resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.45.1.tgz#e352c7f4dbc7540f0756abbb4dcfd1122fecc9bb"
2912+
integrity sha512-6dWoFJwycbuFfw/iKMcl+RdAOAOHDiF11KWYhNDRN/OkUt+Di5qsZHwA0OwsVnu9y135gkHpTw9DJA+WzCeR9w==
2913+
29092914
react-is@^16.13.1, react-is@^16.7.0:
29102915
version "16.13.1"
29112916
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"

0 commit comments

Comments
 (0)