Initial commit: fristy.net personal site

components/contact-section.tsx

@@ -0,0 +1,87 @@
+import Image from "next/image";
+import type { Dictionary } from "@/lib/i18n/get-dictionary";
+import {
+    CONTACT_EMAIL,
+    DISCORD_SERVER_URL,
+    GITHUB_URL,
+    GITEA_PROFILE_URL,
+    SPOTIFY_URL,
+    STEAM_URL,
+} from "@/lib/site";
+import { CopyEmail } from "./copy-email";
+import { SectionHeading } from "./section-heading";
+
+export function ContactSection({ dict }: { dict: Dictionary["contact"] }) {
+    const entries = [
+        { label: dict.github, sub: "@fristyxd", href: GITHUB_URL, icon: "/icons/github.svg" },
+        {
+            label: dict.discord,
+            sub: "discord.gg/fristy",
+            href: DISCORD_SERVER_URL,
+            icon: "/icons/discord.svg",
+        },
+        {
+            label: dict.gitea,
+            sub: "git.fristy.net",
+            href: GITEA_PROFILE_URL,
+            icon: "/icons/gitea.svg",
+        },
+        {
+            label: dict.spotify,
+            sub: "open.spotify.com",
+            href: SPOTIFY_URL,
+            icon: "/icons/spotify.svg",
+        },
+        {
+            label: dict.steam,
+            sub: "fristylikeaillusion",
+            href: STEAM_URL,
+            icon: "/icons/steam.svg",
+        },
+    ];
+
+    return (
+        <section id="contact" className="scroll-mt-24">
+            <SectionHeading kicker={CONTACT_EMAIL} title={dict.title} />
+            <div className="grid gap-3 sm:grid-cols-2">
+                <div className="flex items-center gap-4 rounded-2xl border border-white/10 bg-panel p-4">
+                    <Image src="/icons/gmail.svg" alt="" width={28} height={28} />
+                    <div className="min-w-0 flex-1">
+                        <p className="text-sm font-semibold">{dict.email}</p>
+                        <a
+                            href={`mailto:${CONTACT_EMAIL}`}
+                            className="block truncate font-mono text-sm text-blurple-soft transition-colors hover:text-white"
+                        >
+                            {CONTACT_EMAIL}
+                        </a>
+                    </div>
+                    <CopyEmail
+                        email={CONTACT_EMAIL}
+                        copyLabel={dict.copy}
+                        copiedLabel={dict.copied}
+                    />
+                </div>
+                {entries.map((entry) => (
+                    <a
+                        key={entry.label}
+                        href={entry.href}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="group flex items-center gap-4 rounded-2xl border border-white/10 bg-panel p-4 transition-colors hover:border-blurple/60"
+                    >
+                        <Image src={entry.icon} alt="" width={28} height={28} />
+                        <div className="min-w-0 flex-1">
+                            <p className="text-sm font-semibold">{entry.label}</p>
+                            <p className="truncate font-mono text-sm text-zinc-500 transition-colors group-hover:text-zinc-300">
+                                {entry.sub}
+                            </p>
+                        </div>
+                        <span className="text-zinc-600 transition-colors group-hover:text-white">
+                            →
+                        </span>
+                    </a>
+                ))}
+            </div>
+        </section>
+    );
+}