"use client"; import React, { useState } from "react"; import { type LucideIcon, Mail, Globe } from "lucide-react"; import { cn } from "@/lib/utils"; // Newer lucide releases dropped the brand glyphs (github, linkedin, youtube, // instagram), so we ship them inline instead of importing — paths copied // verbatim from lucide-react 0.540.0 (ISC) so the rendered icons match. function brandIcon(displayName: string, children: React.ReactNode): LucideIcon { return Object.assign( React.forwardRef>( function BrandIcon(props, ref) { return ( ); }, ), { displayName }, ) as unknown as LucideIcon; } const GithubIcon = brandIcon( "GithubIcon", <> , ); const LinkedinIcon = brandIcon( "LinkedinIcon", <> , ); const YoutubeIcon = brandIcon( "YoutubeIcon", <> , ); const InstagramIcon = brandIcon( "InstagramIcon", <> , ); // X (formerly Twitter) — never in lucide; a filled glyph, unlike the rest. const XIcon: LucideIcon = Object.assign( React.forwardRef>( function XIcon(props, ref) { return ( ); }, ), { displayName: "XIcon" }, ) as unknown as LucideIcon; export type SocialKey = | "github" | "linkedin" | "x" | "email" | "youtube" | "instagram" | "website"; export type SocialLinks = Partial>; export type SocialsProps = { /** Map of platform to url (or bare email address for `email`). Empty entries are skipped. */ links: SocialLinks; size?: "sm" | "md" | "lg"; gap?: "tight" | "normal" | "loose"; className?: string; }; const sizeMap = { sm: "h-9 w-9", md: "h-10 w-10", lg: "h-11 w-11", } as const; const gapMap = { tight: "gap-1.5", normal: "gap-2.5", loose: "gap-4", } as const; const iconSizeMap = { sm: 16, md: 18, lg: 20 } as const; type SocialItem = { key: SocialKey; href: string; label: string; tooltip: string; Icon: LucideIcon; }; const ORDER: Array<{ key: SocialKey; label: string; tooltip: string; Icon: LucideIcon }> = [ { key: "github", label: "GitHub", tooltip: "GitHub", Icon: GithubIcon }, { key: "linkedin", label: "LinkedIn", tooltip: "LinkedIn", Icon: LinkedinIcon }, { key: "x", label: "X", tooltip: "X", Icon: XIcon }, { key: "email", label: "Email", tooltip: "Copy email", Icon: Mail }, { key: "youtube", label: "YouTube", tooltip: "YouTube", Icon: YoutubeIcon }, { key: "instagram", label: "Instagram", tooltip: "Instagram", Icon: InstagramIcon }, { key: "website", label: "Website", tooltip: "Website", Icon: Globe }, ]; const tooltipClass = "pointer-events-none absolute bottom-full left-1/2 -translate-x-1/2 translate-y-1 whitespace-nowrap " + "bg-white px-2 py-1 text-[11px] text-black opacity-0 transition-all duration-150 " + "group-hover:-translate-y-1 group-hover:opacity-100 group-focus-visible:-translate-y-1 group-focus-visible:opacity-100"; function SocialButton({ item, iconSize, btnClass, }: { item: SocialItem; iconSize: number; btnClass: string; }) { const [copied, setCopied] = useState(false); const { key, href, label, tooltip, Icon } = item; const tooltipText = key === "email" && copied ? "Copied!" : tooltip; const inner = ( <> {tooltipText} {label} ); if (key === "email") { return ( ); } return ( {inner} ); } /** * Row of social links. Pass a `links` map; only the platforms you provide are * rendered. The email entry copies the address to the clipboard on click * (white slide-up tooltip on hover/focus). Framework-agnostic — plain anchors. */ export function Socials({ links, size = "md", gap = "normal", className }: SocialsProps) { const items: SocialItem[] = ORDER.filter( (r) => typeof links[r.key] === "string" && links[r.key]!.length > 0, ).map((r) => ({ ...r, href: links[r.key]! })); if (!items.length) return null; const iconSize = iconSizeMap[size]; const btnClass = cn( sizeMap[size], "inline-flex items-center justify-center text-white/80 transition-colors hover:bg-white/10 hover:text-white", ); return ( ); }

name	type	default	description
links *	Partial<Record<'github' \| 'linkedin' \| 'x' \| 'email' \| 'youtube' \| 'instagram' \| 'website', string>>	-	platform to url (or bare email address for `email`); empty entries are skipped.
size	'sm' \| 'md' \| 'lg'	'md'
gap	'tight' \| 'normal' \| 'loose'	'normal'

socials.