pizza-online

1
import {ArrowRight, ShoppingCart, User} from 'lucide-react'
2
import Image from 'next/image'
3
import React from 'react'
4
import {Button} from '../ui/button'
5
import {Container} from './container'
6

7
type HeaderProps = {}
8

9
export const Header: React.FC<HeaderProps> = () => {
10
  return (
11
    <header className='border border-b'>
12
      <Container className='flex items-center justify-between py-8'>
13
        <div className='flex items-center gap-4'>
14
          <Image src='/logo.png' alt='Logo' width={35} height={35} />
15
          <div>
16
            <h1 className='text-2xl uppercase font-black'>Next Pizza</h1>
17
            <p className='text-sm text-gray-400 leading-3'>Вкусней уже некуда</p>
18
          </div>
19
        </div>
20

21
        <div className='flex items-center gap-3'>
22
          <Button className='flex items-center gap-3' variant='outline'>
23
            <User size={16} />
24
            Войти
25
          </Button>
26

27
          <Button className='group relative'>
28
            <b>520 ₽</b>
29
            <span className='h-full w-[1px] bg-white/30 mx-3' />
30
            <div className='flex items-center gap-1 transition duration-300 group-hover:opacity-0'>
31
              <ShoppingCart size={16} className='relative' strokeWidth={2} />
32
              <b>3</b>
33
            </div>
34
            <ArrowRight
35
              size={20}
36
              className='absolute right-5 transition duration-300 -translate-x-2 opacity-0 group-hover:opacity-100 group-hover:translate-x-0'
37
            />
38
          </Button>
39
        </div>
40
      </Container>
41
    </header>
42
  )
43
}
44