index.tsx
3.23 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
'use client'; // This is a client component 👈🏽
import React, { useState, useEffect } from 'react';
import { Button, TextField, Tabs, Tab, Container, Grid } from '@mui/material';
import SearchIcon from '@mui/icons-material/Search';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import Image from 'next/image';
// import { useStore } from '../store'; // Adjust the path according to your file structure
// import ContactDialog from './ContactDialog'; // Adjust the path according to your file structure
function Header() {
const [input, setInput] = useState('');
const [tab, setTab] = useState(0);
const {
keyword,
updateKeyword,
updateDialogOpen,
updateDisplay,
updatePageNo,
} = {};
const router = useRouter();
useEffect(() => {
setInput(keyword);
}, [keyword]);
const handleKeyDown = (e) => {
if (e.keyCode === 13) {
handleClick();
}
};
const handleClick = () => {
updateDisplay(!input);
updateKeyword(input);
updatePageNo(1);
router.push('/products');
};
const handleTabClick = () => {
updateDisplay(true);
updateKeyword('');
};
useEffect(() => {
const currentPath = router.pathname;
const tabValue =
currentPath === '/'
? 0
: currentPath === '/products'
? 1
: currentPath === '/about'
? 2
: 0;
setTab(tabValue);
}, [router.pathname]);
return (
<>
<Container className="pt-2">
<Grid container alignItems="center">
<Grid item xs={1} sx={{ p: 0, height: '64px' }}>
<Link href="/">
<Image src="icon/logo.jpg" alt="canrud" width={64} height={64} />
</Link>
</Grid>
<Grid item xs={6} md={8} sx={{ px: 0 }}>
<TextField
label="Search keyword"
variant="outlined"
onKeyDown={handleKeyDown}
value={input}
onChange={(e) => setInput(e.target.value)}
append-inner-icon="mdi-magnify"
InputProps={{
endAdornment: <SearchIcon onClick={handleClick} />,
}}
fullWidth
/>
</Grid>
<Grid item xs={4} md={2} className="ml-3">
<Button color="primary" onClick={() => updateDialogOpen(true)}>
Contact Us
</Button>
</Grid>
</Grid>
</Container>
<Tabs
value={tab}
onChange={(e, newVal) => setTab(newVal)}
textColor="inherit"
variant="fullWidth"
className="bg-primary-blue text-white"
>
<Tab
label="Home"
className="text-grey-lighten-3 tw-font-bold"
component={Link}
href="/"
onClick={handleTabClick}
/>
<Tab
label="Products"
component={Link}
href="/products"
className="text-grey-lighten-3 tw-font-bold"
onClick={handleTabClick}
/>
<Tab
label="About"
component={Link}
href="/about"
className="text-grey-lighten-3 tw-font-bold"
onClick={handleTabClick}
/>
</Tabs>
{/* <ContactDialog /> */}
</>
);
}
export default Header;