1
'use client';
2

3
import { motion } from 'framer-motion';
4
import { FolderKanban, Mail, Newspaper, Skull, User } from 'lucide-react';
5
import Image from 'next/image';
6
import React, { useState } from 'react';
7

8
const NavBar = () => {
9
  const [hovered, setHovered] = useState<string | null>(null);
10

11
  const navItems = [
12
    {
13
      name: 'About',
14
      icon: <User className="w-4 h-4" />
15
    },
16
    {
17
      name: 'Projects',
18
      icon: <FolderKanban className="w-4 h-4" />
19
    },
20
    {
21
      name: 'Skills',
22
      icon: <Skull className="w-4 h-4" />
23
    },
24
    {
25
      name: 'Articles',
26
      icon: <Newspaper className="w-4 h-4" />
27
    },
28
    {
29
      name: 'Contact',
30
      icon: <Mail className="w-4 h-4" />
31
    }
32
  ];
33

34
  return (
35
    <div className="fixed top-12  left-1/2 -translate-x-1/2 w-full max-w-2xl rounded-full z-50 px-1">
36
      <div
37
        style={{
38
          background:
39
            'linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet, red)'
40
        }}
41
        className="absolute top-0 left-0 w-full h-full rounded-full z-0 blur-xl opacity-90"
42
      />
43
      <div className="relative p-1 w-full">
44
        <div className="absolute top-0 left-0 w-full h-full rounded-full blur-xl backdrop-blur-xl bg-white/5 z-0" />
45
        <div className="px-6 rounded-full bg-black z-10 relative flex items-center justify-between h-full">
46
          <div className="w-[100px] sm:w-[120px] absolute left-6 h-full">
47
            <Image
48
              src="/stackbits-logo.png"
49
              alt="logo"
50
              fill
51
              className="h-full w-full object-contain"
52
            />
53
          </div>
54
          <ul className="flex py-4 items-center w-full justify-end">
55
            {navItems.map((item) => {
56
              return (
57
                <li
58
                  onMouseEnter={() => setHovered(item.name)}
59
                  onMouseLeave={() => setHovered(null)}
60
                  key={`nav-item-${item.name}`}
61
                  className="flex items-center gap-1 p-2 opacity-50 hover:opacity-100 transition-all duration-150 cursor-pointer relative"
62
                  onClick={() => {}}
63
                >
64
                  <div className="relative z-10">{item.icon}</div>
65
                  <p className="text-sm hidden sm:block z-10 relative">{item.name}</p>
66

67
                  {hovered === item.name && (
68
                    <motion.div
69
                      layout
70
                      layoutId="nav-bar-highlight"
71
                      transition={{
72
                        duration: 0.2
73
                      }}
74
                      className="absolute top-0 left-0 w-full h-full bg-white/10 z-0 rounded-lg"
75
                    />
76
                  )}
77
                </li>
78
              );
79
            })}
80
          </ul>
81
        </div>
82
      </div>
83
    </div>
84
  );
85
};
86

87
export default NavBar;