Add socials
This commit is contained in:
8
bun.lock
8
bun.lock
@ -31,6 +31,8 @@
|
||||
"react-dom": "19.2.1",
|
||||
"react-hook-form": "^7.69.0",
|
||||
"react-markdown": "^10.1.0",
|
||||
"react-social-icons": "^6.25.0",
|
||||
"simple-icons": "^16.2.0",
|
||||
"sonner": "^2.0.7",
|
||||
"tailwind-merge": "^3.4.0",
|
||||
"zod": "^4.2.1",
|
||||
@ -136,6 +138,8 @@
|
||||
|
||||
"@aws/lambda-invoke-store": ["@aws/lambda-invoke-store@0.2.2", "", {}, "sha512-C0NBLsIqzDIae8HFw9YIrIBsbc0xTiOtt7fAukGPnqQ/+zZNaq+4jhuccltK0QuWHBnNm/a6kLIRA6GFiM10eg=="],
|
||||
|
||||
"@babel/runtime": ["@babel/runtime@7.28.4", "", {}, "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ=="],
|
||||
|
||||
"@biomejs/biome": ["@biomejs/biome@2.2.0", "", { "optionalDependencies": { "@biomejs/cli-darwin-arm64": "2.2.0", "@biomejs/cli-darwin-x64": "2.2.0", "@biomejs/cli-linux-arm64": "2.2.0", "@biomejs/cli-linux-arm64-musl": "2.2.0", "@biomejs/cli-linux-x64": "2.2.0", "@biomejs/cli-linux-x64-musl": "2.2.0", "@biomejs/cli-win32-arm64": "2.2.0", "@biomejs/cli-win32-x64": "2.2.0" }, "bin": { "biome": "bin/biome" } }, "sha512-3On3RSYLsX+n9KnoSgfoYlckYBoU6VRM22cw1gB4Y0OuUVSYd/O/2saOJMrA4HFfA1Ff0eacOvMN1yAAvHtzIw=="],
|
||||
|
||||
"@biomejs/cli-darwin-arm64": ["@biomejs/cli-darwin-arm64@2.2.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-zKbwUUh+9uFmWfS8IFxmVD6XwqFcENjZvEyfOxHs1epjdH3wyyMQG80FGDsmauPwS2r5kXdEM0v/+dTIA9FXAg=="],
|
||||
@ -828,6 +832,8 @@
|
||||
|
||||
"react-remove-scroll-bar": ["react-remove-scroll-bar@2.3.8", "", { "dependencies": { "react-style-singleton": "^2.2.2", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q=="],
|
||||
|
||||
"react-social-icons": ["react-social-icons@6.25.0", "", { "dependencies": { "@babel/runtime": "^7.27.0" }, "peerDependencies": { "react": "16.x.x || 17.x.x || 18.x.x || 19.x.x", "react-dom": "16.x.x || 17.x.x || 18.x.x || 19.x.x" } }, "sha512-PN9UpIb+f2u9H2t6MOoybaCD88yvQH+f9z/BILlg+n9MRzSYPtDODPzLb5dCUeyQ42eYyGDPGPIVARLWz5UEjg=="],
|
||||
|
||||
"react-style-singleton": ["react-style-singleton@2.2.3", "", { "dependencies": { "get-nonce": "^1.0.0", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ=="],
|
||||
|
||||
"readdirp": ["readdirp@4.1.2", "", {}, "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg=="],
|
||||
@ -858,6 +864,8 @@
|
||||
|
||||
"signal-exit": ["signal-exit@4.1.0", "", {}, "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw=="],
|
||||
|
||||
"simple-icons": ["simple-icons@16.2.0", "", {}, "sha512-SCV4cAX8O2M2WQ3QJm+3k4QdcUIJiBiwKNViQiOwPjWbFWgypzelviW+Bp0A2ij6r/DIEZpTTDcLgD/BE4aexQ=="],
|
||||
|
||||
"sonner": ["sonner@2.0.7", "", { "peerDependencies": { "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc", "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc" } }, "sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w=="],
|
||||
|
||||
"source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
|
||||
|
||||
@ -37,6 +37,7 @@
|
||||
"react-dom": "19.2.1",
|
||||
"react-hook-form": "^7.69.0",
|
||||
"react-markdown": "^10.1.0",
|
||||
"simple-icons": "^16.2.0",
|
||||
"sonner": "^2.0.7",
|
||||
"tailwind-merge": "^3.4.0",
|
||||
"zod": "^4.2.1"
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import { SocialLinks } from "@/components/SocialLinks";
|
||||
import { ArrowBigRight } from "lucide-react";
|
||||
|
||||
export default function Home() {
|
||||
@ -14,18 +15,9 @@ export default function Home() {
|
||||
<p className="text-muted-foreground max-w-xl text-lg mb-6">
|
||||
If you want to commission me<br />you can find all the information you need here:<br /> <a href="https://linktr.ee/gaertan" target="_blank" className="underline text-primary" ><ArrowBigRight className="w-4 h-4 inline" /> Linktree</a>
|
||||
</p>
|
||||
|
||||
{/* Search */}
|
||||
{/* <div className="relative w-full max-w-lg">
|
||||
<span className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground">
|
||||
<Search className="w-4 h-4" />
|
||||
</span>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Search artworks, commissions, pages..."
|
||||
className="p-6 pl-10"
|
||||
/>
|
||||
</div> */}
|
||||
<div>
|
||||
<SocialLinks />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
90
src/components/SocialLinks.tsx
Normal file
90
src/components/SocialLinks.tsx
Normal file
@ -0,0 +1,90 @@
|
||||
import {
|
||||
siBluesky,
|
||||
siMastodon,
|
||||
siPaypal,
|
||||
siTelegram,
|
||||
type SimpleIcon,
|
||||
} from "simple-icons";
|
||||
|
||||
type SocialKey = "paypal" | "telegram" | "mastodon" | "bluesky";
|
||||
|
||||
const SOCIALS: Record<
|
||||
SocialKey,
|
||||
{ label: string; icon: SimpleIcon; href: string }
|
||||
> = {
|
||||
paypal: {
|
||||
label: "PayPal",
|
||||
icon: siPaypal,
|
||||
href: "https://paypal.me/Gaertan",
|
||||
},
|
||||
telegram: {
|
||||
label: "Telegram",
|
||||
icon: siTelegram,
|
||||
href: "https://t.me/Gaertan",
|
||||
},
|
||||
mastodon: {
|
||||
label: "Mastodon",
|
||||
icon: siMastodon,
|
||||
href: "https://mastodon.social/@Gaertan",
|
||||
},
|
||||
bluesky: {
|
||||
label: "Bluesky",
|
||||
icon: siBluesky,
|
||||
href: "https://bsky.app/profile/gaertan.bsky.social",
|
||||
},
|
||||
};
|
||||
|
||||
function BrandSvg({ icon }: { icon: SimpleIcon }) {
|
||||
// Simple Icons SVGs are typically 24x24 viewBox.
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
className="h-5 w-5 fill-current"
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
dangerouslySetInnerHTML={{ __html: icon.svg }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function SocialLinks({
|
||||
items = ["paypal", "telegram", "mastodon", "bluesky"],
|
||||
size = "md",
|
||||
}: {
|
||||
items?: SocialKey[];
|
||||
size?: "sm" | "md" | "lg";
|
||||
}) {
|
||||
const sizeClass =
|
||||
size === "sm" ? "h-9 w-9" : size === "lg" ? "h-12 w-12" : "h-10 w-10";
|
||||
|
||||
return (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{items.map((key) => {
|
||||
const s = SOCIALS[key];
|
||||
|
||||
return (
|
||||
<a
|
||||
key={key}
|
||||
href={s.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label={s.label}
|
||||
title={s.label}
|
||||
className={[
|
||||
"inline-flex items-center justify-center rounded-full",
|
||||
"border border-border bg-background",
|
||||
"text-foreground hover:text-primary",
|
||||
"hover:bg-accent transition-colors",
|
||||
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
||||
"ring-offset-background",
|
||||
sizeClass,
|
||||
].join(" ")}
|
||||
>
|
||||
<BrandSvg icon={s.icon} />
|
||||
<span className="sr-only">{s.label}</span>
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user