センターナビゲーション

1"use client";
2
3import { useState } from "react";
4import Link from "next/link";
5
6export function NavigationCentered001() {
7  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
8
9  const navLinks = [
10    { label: "Products", href: "#" },
11    { label: "Solutions", href: "#" },
12    { label: "Resources", href: "#" },
13    { label: "Pricing", href: "#" },
14  ];
15
16  return (
17    <header className="sticky top-0 z-50 w-full border-b border-zinc-800/50 bg-zinc-950/90 backdrop-blur-xl">
18      <nav className="mx-auto flex max-w-7xl items-center justify-between px-4 py-4 sm:px-6 lg:px-8">
19        {/* Logo */}
20        <div className="flex lg:flex-1">
21          <Link href="#" className="flex items-center gap-3">
22            <div className="flex h-9 w-9 items-center justify-center rounded-lg border border-zinc-700 bg-zinc-900">
23              <span className="text-lg font-bold tracking-wider text-white">L</span>
24            </div>
25          </Link>
26        </div>
27
28        {/* Desktop Navigation - Centered */}
29        <div className="hidden lg:flex lg:gap-x-12">
30          {navLinks.map((link) => (
31            <Link
32              key={link.label}
33              href={link.href}
34              className="text-sm font-medium tracking-wide text-zinc-400 transition-colors duration-200 hover:text-white"
35            >
36              {link.label}
37            </Link>
38          ))}
39        </div>
40
41        {/* CTA Buttons */}
42        <div className="hidden lg:flex lg:flex-1 lg:justify-end lg:gap-x-4">
43          <Link
44            href="#"
45            className="text-sm font-medium tracking-wide text-zinc-400 transition-colors duration-200 hover:text-white"
46          >
47            Sign in
48          </Link>
49          <Link
50            href="#"
51            className="rounded-lg border border-zinc-700 bg-white px-4 py-2 text-sm font-medium tracking-wide text-zinc-900 transition-all duration-200 hover:bg-zinc-100"
52          >
53            Get Started
54          </Link>
55        </div>
56
57        {/* Mobile Menu Button */}
58        <div className="lg:hidden">
59          <button
60            className="rounded-lg p-2 text-zinc-400 hover:bg-zinc-800 hover:text-white"
61            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
62          >
63            <svg
64              className="h-6 w-6"
65              fill="none"
66              stroke="currentColor"
67              viewBox="0 0 24 24"
68            >
69              {mobileMenuOpen ? (
70                <path
71                  strokeLinecap="round"
72                  strokeLinejoin="round"
73                  strokeWidth={1.5}
74                  d="M6 18L18 6M6 6l12 12"
75                />
76              ) : (
77                <path
78                  strokeLinecap="round"
79                  strokeLinejoin="round"
80                  strokeWidth={1.5}
81                  d="M4 6h16M4 12h16M4 18h16"
82                />
83              )}
84            </svg>
85          </button>
86        </div>
87      </nav>
88
89      {/* Mobile Menu */}
90      {mobileMenuOpen && (
91        <div className="border-t border-zinc-800/50 bg-zinc-950 px-4 py-6 lg:hidden">
92          <div className="space-y-4">
93            {navLinks.map((link) => (
94              <Link
95                key={link.label}
96                href={link.href}
97                className="block text-base font-medium tracking-wide text-zinc-400 transition-colors duration-200 hover:text-white"
98              >
99                {link.label}
100              </Link>
101            ))}
102          </div>
103          <div className="mt-8 flex flex-col gap-3">
104            <Link
105              href="#"
106              className="rounded-lg border border-zinc-700 bg-zinc-900 px-4 py-2.5 text-center text-sm font-medium tracking-wide text-white"
107            >
108              Sign in
109            </Link>
110            <Link
111              href="#"
112              className="rounded-lg bg-white px-4 py-2.5 text-center text-sm font-medium tracking-wide text-zinc-900"
113            >
114              Get Started
115            </Link>
116          </div>
117        </div>
118      )}
119    </header>
120  );
121}