src/core/components/elements/Appbar/Appbar.jsx


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

import { useRouter } from 'next/router'
import Link from '../Link/Link'
import { HomeIcon, Bars3Icon, ShoppingCartIcon, ChevronLeftIcon } from '@heroicons/react/24/outline'

const AppBar = ({ title }) => {
  const router = useRouter()

  return (
    <nav className='sticky top-0 z-50 bg-white border-b border-gray_r-6 flex justify-between'>
      <div className='flex items-center'>
        <button
          type='button'
          className='p-4'
          onClick={() => router.back()}
        >
          <ChevronLeftIcon className='w-6 stroke-2' />
        </button>
        <div className='font-medium text-h-sm line-clamp-1'>{title}</div>
      </div>
      <div className='flex items-center px-2'>
        <Link
          href='/shop/cart'
          className='py-4 px-2'
        >
          <ShoppingCartIcon className='w-6 text-gray_r-12' />
        </Link>
        <Link
          href='/'
          className='py-4 px-2'
        >
          <HomeIcon className='w-6 text-gray_r-12' />
        </Link>
        <Link
          href='/my/menu'
          className='py-4 px-2'
        >
          <Bars3Icon className='w-6 text-gray_r-12' />
        </Link>
      </div>
    </nav>
  )
}

export default AppBar