reactjs-maxxing/components/header.tsx at 86e9c4d55c86e38777bc475c952f60ab9337b7d5 · sankalpaacharya/reactjs-maxxing · GitHub

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
"use client";

import Link from "next/link";
import Image from "next/image";
import { useState, useEffect } from "react";
import { HugeiconsIcon } from "@hugeicons/react";
import {
  NewTwitterIcon,
  LinkedinIcon,
  GithubIcon,
} from "@hugeicons/core-free-icons";

const socialLinks = [
  {
    name: "X (Twitter)",
    href: "https://x.com/sankalpa_02",
    icon: NewTwitterIcon,
  },
  {
    name: "LinkedIn",
    href: "https://linkedin.com/in/sankalpa02",
    icon: LinkedinIcon,
  },
  {
    name: "GitHub",
    href: "https://github.com/sankalpaacharya",
    icon: GithubIcon,
  },
];

function LiveClock() {
  const [time, setTime] = useState<string>("");

  useEffect(() => {
    const updateTime = () => {
      const now = new Date();
      setTime(
        now.toLocaleTimeString("en-US", {
          hour: "numeric",
          minute: "2-digit",
          hour12: true,
        }),
      );
    };

    updateTime();
    const interval = setInterval(updateTime, 1000);
    return () => clearInterval(interval);
  }, []);

  return <span>{time}</span>;
}

export function Header() {
  return (
    <header className="border-b border-border bg-background relative">
      <div className="px-6 py-4 flex items-center justify-between">
        <Link href="/" className="flex items-center gap-3 group">
          {/* Glassmorphism frame */}
          <div className="p-0.5 rounded-xl bg-linear-to-br from-white/20 to-white/5 backdrop-blur-sm">
            <div className="w-10 h-10 rounded-lg overflow-hidden bg-background/50 border border-white/10">
              <Image
                src="https://github.com/sankalpaacharya.png"
                alt="Sanku"
                width={40}
                height={40}
                className="object-cover"
              />
            </div>
          </div>
          <div>
            <p className="font-semibold">Sanku</p>
            <p className="text-xs text-muted-foreground">
              <LiveClock />
            </p>
          </div>
        </Link>
        <nav className="flex items-center gap-4">
          {socialLinks.map((social) => (
            <a
              key={social.name}
              href={social.href}
              target="_blank"
              rel="noopener noreferrer"
              aria-label={social.name}
              className="p-2 rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-all duration-200"
            >
              <HugeiconsIcon icon={social.icon} size={16} />
            </a>
          ))}
          <a
            href="https://hireme.sankalpa.info.np"
            className="px-4 py-1.5 rounded-lg bg-primary hover:bg-primary/90 text-primary-foreground font-medium text-sm transition-colors flex items-center gap-2"
          >
            Hire me
            <span>→</span>
          </a>
        </nav>
      </div>
    </header>
  );
}