blob: 131fa7da11d51481c5026ae7bcae772cee528282 (
plain)
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
|
import Logo from "~/images/logo.png";
import { DocumentCheckIcon, HeartIcon } from "@heroicons/react/24/outline";
import Image from 'next/image'
import Link from 'next/link'
// Components
import SearchBar from "./SearchBar";
// Constants
import { SECONDARY_MENU_ITEMS } from "~/constants/menu";
const LOGO_WIDTH = 210;
const LOGO_HEIGHT = LOGO_WIDTH / 3;
const HeaderDesktop = () => {
return (
<header>
<nav className="pt-6 sticky top-0 z-50 bg-white border-b-2 border-danger-500">
<div className="container flex items-center gap-x-6">
<Link href='/'>
<Image src={Logo} alt="Logo Indoteknik.com" width={LOGO_WIDTH} height={LOGO_HEIGHT} />
</Link>
<SearchBar />
<div className="flex gap-x-4 items-center">
<Link
target='_blank'
rel='noreferrer'
href='/my/transactions'
className='flex items-center gap-x-2 !text-gray-900'
>
<DocumentCheckIcon className='w-7' />
Daftar<br />Quotation
</Link>
<Link
target='_blank'
rel='noreferrer'
href='/my/wishlist'
className='flex items-center gap-x-2 !text-gray-900'
>
<HeartIcon className='w-7' />
Wishlist
</Link>
<a
href={''}
target='_blank'
rel='noreferrer'
className='flex items-center gap-x-1 !text-gray_r-12/80'
>
<Image src='/images/socials/Whatsapp-2.png' alt='Whatsapp' width={48} height={48} />
<div>
<div className='font-semibold'>Whatsapp</div>
0817 1718 1922 (Chat)
</div>
</a>
</div>
</div>
<div className="container mt-6 flex">
<button type="button" className="w-3/12 p-4 font-semibold border border-gray_r-6 rounded-t-xl flex items-center relative">
Kategori
</button>
<nav className="w-6/12 flex px-1 divide-x divide-gray-200">
{SECONDARY_MENU_ITEMS.map((item, index) => (
<Link key={index} href={item.href} target="_blank" rel="noreferrer" className="font-medium text-center p-4 flex-1 !text-gray-800 hover:bg-gray-100 transition-all">
{item.label}
</Link>
))}
</nav>
</div>
</nav>
</header>
)
}
export default HeaderDesktop
|
