Add socials

src/app/(normal)/page.tsx

@@ -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>
 
 

src/components/SocialLinks.tsx

@@ -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>
+  );
+}