88 lines
3.3 KiB
TypeScript
88 lines
3.3 KiB
TypeScript
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>
|
|
);
|
|
}
|