Link in bio template

1"use client";
2 
3import { AtSign, BookOpen, GitFork, LayoutGrid, Mail, UserRound } from "lucide-react";
4 
5import { Button } from "@/components/ui/button";
6 
7const TEMPLATE_THEME =
8  "[color-scheme:light] [--background:#dceafe] [--secondary-background:#fff] [--foreground:#000] [--main-foreground:#000] [--main:#5093fe] [--border:#000] [--ring:#000] [--box-shadow-x:4px] [--box-shadow-y:4px] [--reverse-box-shadow-x:-4px] [--reverse-box-shadow-y:-4px] [--shadow:4px_4px_0px_0px_var(--border)] [--border-radius:5px] [--base-font-weight:400] [--heading-font-weight:600] dark:[color-scheme:dark] dark:[--background:#2c304c] dark:[--secondary-background:#222] dark:[--foreground:#ececec] dark:[--main:#5093fe] dark:[--ring:#fff]";
9 
10const LINKS = [
11  {
12    title: "Portfolio",
13    detail: "example.com",
14    href: "https://example.com",
15    icon: LayoutGrid,
16    highlighted: true,
17    external: true,
18  },
19  {
20    title: "GitHub",
21    detail: "github.com",
22    href: "https://github.com",
23    icon: GitFork,
24    highlighted: false,
25    external: true,
26  },
27  {
28    title: "X",
29    detail: "x.com",
30    href: "https://x.com",
31    icon: AtSign,
32    highlighted: false,
33    external: true,
34  },
35  {
36    title: "Newsletter",
37    detail: "buttondown.email",
38    href: "https://buttondown.email",
39    icon: BookOpen,
40    highlighted: false,
41    external: true,
42  },
43  {
44    title: "LinkedIn",
45    detail: "linkedin.com",
46    href: "https://www.linkedin.com",
47    icon: UserRound,
48    highlighted: false,
49    external: true,
50  },
51  {
52    title: "Email",
53    detail: "hello@example.com",
54    href: "mailto:hello@example.com",
55    icon: Mail,
56    highlighted: false,
57    external: false,
58  },
59] as const;
60 
61export default function LinkHubTemplate() {
62  return (
63    <div className={`min-h-dvh flex flex-col bg-background text-foreground ${TEMPLATE_THEME}`}>
64      <main className="mx-auto w-full max-w-2xl flex-1 px-4 py-8 sm:px-6 sm:py-10">
65        <section aria-labelledby="profile-name" className="text-center">
66          <div className="mx-auto grid size-24 place-items-center rounded-full border-2 border-border bg-main text-main-foreground">
67            <span className="font-heading text-2xl" aria-hidden="true">
68              AD
69            </span>
70          </div>
71 
72          <h1 id="profile-name" className="mt-4 font-heading text-2xl sm:text-3xl">
73            Alex Doe
74          </h1>
75          <p className="mt-1 text-sm text-foreground/65">@alexbuilds</p>
76// … truncated