ミニマルフッター

1import Link from "next/link";
2
3export function FooterMinimal001() {
4  const links = [
5    { label: "About", href: "#" },
6    { label: "Blog", href: "#" },
7    { label: "Careers", href: "#" },
8    { label: "Contact", href: "#" },
9    { label: "Privacy", href: "#" },
10    { label: "Terms", href: "#" },
11  ];
12
13  const socialLinks = [
14    {
15      label: "Twitter",
16      href: "#",
17      icon: (
18        <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
19          <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
20        </svg>
21      ),
22    },
23    {
24      label: "GitHub",
25      href: "#",
26      icon: (
27        <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
28          <path
29            fillRule="evenodd"
30            d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
31            clipRule="evenodd"
32          />
33        </svg>
34      ),
35    },
36    {
37      label: "LinkedIn",
38      href: "#",
39      icon: (
40        <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
41          <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" />
42        </svg>
43      ),
44    },
45  ];
46
47  return (
48    <footer className="border-t border-zinc-800/50 bg-zinc-950">
49      <div className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
50        <div className="flex flex-col items-center justify-between gap-10 md:flex-row">
51          {/* Logo */}
52          <Link href="#" className="flex items-center gap-3">
53            <div className="flex h-9 w-9 items-center justify-center rounded-lg border border-zinc-700 bg-zinc-900">
54              <span className="text-sm font-bold tracking-wider text-white">
55                L
56              </span>
57            </div>
58            <span className="text-lg font-semibold tracking-wide text-white">
59              Logo
60            </span>
61          </Link>
62
63          {/* Links */}
64          <nav className="flex flex-wrap justify-center gap-x-8 gap-y-4">
65            {links.map((link) => (
66              <Link
67                key={link.label}
68                href={link.href}
69                className="text-sm tracking-wide text-zinc-500 transition-colors duration-200 hover:text-white"
70              >
71                {link.label}
72              </Link>
73            ))}
74          </nav>
75
76          {/* Social Links */}
77          <div className="flex gap-5">
78            {socialLinks.map((social) => (
79              <Link
80                key={social.label}
81                href={social.href}
82                className="text-zinc-500 transition-colors duration-200 hover:text-white"
83              >
84                <span className="sr-only">{social.label}</span>
85                {social.icon}
86              </Link>
87            ))}
88          </div>
89        </div>
90
91        {/* Copyright */}
92        <div className="mt-12 border-t border-zinc-800/50 pt-8 text-center">
93          <p className="text-xs tracking-widest text-zinc-600">
94            &copy; {new Date().getFullYear()} Your Company. All rights reserved.
95          </p>
96        </div>
97      </div>
98    </footer>
99  );
100}