{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "social-links",
"title": "Social Links",
"author": "AlgorizeTech",
"description": "A row of brand marks that link out — X, GitHub, LinkedIn, YouTube, Instagram, Facebook, Discord, Dribbble, email. Use it in footers, profile cards and author bylines.",
"dependencies": [
"lucide-react"
],
"registryDependencies": [
"utils"
],
"files": [
{
"path": "src/components/custom/blocks/SocialLinksBlock.tsx",
"content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Mail } from \"lucide-react\";\nimport React from \"react\";\n\n// ==========================================\n// SOCIAL LINKS — a row of brand marks that link out\n// ==========================================\n// Footers, profile cards, \"follow us\" strips, author bylines: anywhere a page\n// points at its social accounts. Pass the networks you have; the row draws\n// one tile per link and nothing for the ones you leave out.\n\n/**\n * Brand marks as inline SVG.\n *\n * lucide dropped its brand icons, so importing them breaks the whole file on\n * any current version. Inlining the paths keeps this component working\n * regardless of which icon set — or which version of it — you have installed.\n */\ntype MarkProps = { className?: string };\n\nconst X = ({ className }: MarkProps) => (\n \n);\n\nconst GitHub = ({ className }: MarkProps) => (\n \n);\n\nconst LinkedIn = ({ className }: MarkProps) => (\n \n);\n\nconst YouTube = ({ className }: MarkProps) => (\n \n);\n\nconst Instagram = ({ className }: MarkProps) => (\n \n);\n\nconst Facebook = ({ className }: MarkProps) => (\n \n);\n\nconst Discord = ({ className }: MarkProps) => (\n \n);\n\nconst Dribbble = ({ className }: MarkProps) => (\n \n);\n\nexport type SocialNetwork =\n | \"x\"\n | \"github\"\n | \"linkedin\"\n | \"youtube\"\n | \"instagram\"\n | \"facebook\"\n | \"discord\"\n | \"dribbble\"\n | \"email\";\n\nconst NETWORKS: Record }> = {\n x: { label: \"X\", Mark: X },\n github: { label: \"GitHub\", Mark: GitHub },\n linkedin: { label: \"LinkedIn\", Mark: LinkedIn },\n youtube: { label: \"YouTube\", Mark: YouTube },\n instagram: { label: \"Instagram\", Mark: Instagram },\n facebook: { label: \"Facebook\", Mark: Facebook },\n discord: { label: \"Discord\", Mark: Discord },\n dribbble: { label: \"Dribbble\", Mark: Dribbble },\n email: { label: \"Email\", Mark: ({ className }) => },\n};\n\nexport interface SocialLink {\n network: SocialNetwork;\n href: string;\n /** Accessible name. Defaults to the network's name, e.g. \"GitHub\". */\n label?: string;\n}\n\nexport type SocialLinksVariant = \"tile\" | \"outline\" | \"ghost\" | \"expand-reveal\" | \"expand-replace\";\nexport type SocialLinksSize = \"sm\" | \"md\" | \"lg\";\nexport type SocialLinksExpandDirection = \"right\" | \"left\" | \"top\" | \"bottom\";\n\nexport interface SocialLinksProps extends React.HTMLAttributes {\n links: SocialLink[];\n /** `tile` sits on a soft fill, `outline` on a border, `ghost` on nothing, `expand-reveal` reveals icons beside button on hover, `expand-replace` hides button on hover and reveals icons starting from button position. */\n variant?: SocialLinksVariant;\n size?: SocialLinksSize;\n /** Direction in which social icons reveal in `expand-reveal` and `expand-replace` modes. Defaults to `\"right\"`. */\n expandDirection?: SocialLinksExpandDirection;\n /**\n * The element used for links. Defaults to a plain `a`. In Next.js, pass\n * `next/link` to keep client-side navigation for internal hrefs.\n */\n linkComponent?: React.ElementType;\n /** Open every link in a new tab. On by default — these point off-site. */\n external?: boolean;\n}\n\nconst SIZES: Record = {\n sm: { tile: \"size-8 rounded-lg\", mark: \"size-3.5\" },\n md: { tile: \"size-10 rounded-xl\", mark: \"size-4\" },\n lg: { tile: \"size-12 rounded-2xl\", mark: \"size-5\" },\n};\n\nconst VARIANTS: Record, string> = {\n tile: \"bg-muted/60 text-muted-foreground hover:bg-white/20 hover:text-white transition-all duration-200\",\n outline: \"border border-border text-muted-foreground hover:border-white/40 hover:bg-white/20 hover:text-white transition-all duration-200\",\n ghost: \"text-muted-foreground hover:bg-white/20 hover:text-white transition-all duration-200\",\n};\n\nexport const SocialLinks = React.forwardRef(\n (\n {\n links,\n variant = \"tile\",\n size = \"md\",\n expandDirection = \"right\",\n linkComponent: Link = \"a\",\n external = true,\n className,\n ...props\n },\n ref,\n ) => {\n const s = SIZES[size];\n\n if (variant === \"expand-replace\") {\n const containerPositionStyles: Record = {\n right: \"left-0 top-1/2 -translate-y-1/2 flex-row max-w-0 group-hover:max-w-[500px]\",\n left: \"right-0 top-1/2 -translate-y-1/2 flex-row-reverse max-w-0 group-hover:max-w-[500px]\",\n top: \"bottom-0 left-1/2 -translate-x-1/2 flex-col-reverse max-h-0 group-hover:max-h-[500px]\",\n bottom: \"top-0 left-1/2 -translate-x-1/2 flex-col max-h-0 group-hover:max-h-[500px]\",\n };\n\n const itemInitialTranslate: Record = {\n right: \"scale-0 opacity-0\",\n left: \"scale-0 opacity-0\",\n top: \"scale-0 opacity-0\",\n bottom: \"scale-0 opacity-0\",\n };\n\n return (\n \n {/* Main Trigger Share Button (Hides on hover with smooth fade & scale down) */}\n \n \n \n \n \n \n \n\n {/* Staggered Expandable Icons Container starting directly from Share button position (Fade & scale pop-in) */}\n \n {links.map(({ network, href, label }, index) => {\n const { label: name, Mark } = NETWORKS[network];\n const isMail = href.startsWith(\"mailto:\");\n return (\n \n \n \n );\n })}\n \n \n );\n }\n\n if (variant === \"expand-reveal\") {\n const containerPositionStyles: Record = {\n right: \"left-full top-1/2 -translate-y-1/2 ml-3 flex-row max-w-0 group-hover:max-w-[500px]\",\n left: \"right-full top-1/2 -translate-y-1/2 mr-3 flex-row-reverse max-w-0 group-hover:max-w-[500px]\",\n top: \"bottom-full left-1/2 -translate-x-1/2 mb-3 flex-col-reverse max-h-0 group-hover:max-h-[500px]\",\n bottom: \"top-full left-1/2 -translate-x-1/2 mt-3 flex-col max-h-0 group-hover:max-h-[500px]\",\n };\n\n const itemInitialTranslate: Record = {\n right: \"-translate-x-6\",\n left: \"translate-x-6\",\n top: \"translate-y-6\",\n bottom: \"-translate-y-6\",\n };\n\n return (\n \n {/* Icon-Only Share Button Trigger (Position Fixed) */}\n \n \n \n \n \n \n \n\n {/* Staggered Expandable Icons Container */}\n \n {links.map(({ network, href, label }, index) => {\n const { label: name, Mark } = NETWORKS[network];\n const isMail = href.startsWith(\"mailto:\");\n return (\n \n \n \n );\n })}\n \n \n );\n }\n\n return (\n \n {links.map(({ network, href, label }) => {\n const { label: name, Mark } = NETWORKS[network];\n const isMail = href.startsWith(\"mailto:\");\n return (\n \n \n \n );\n })}\n \n );\n },\n);\n\nSocialLinks.displayName = \"SocialLinks\";\n\nexport default SocialLinks;\n",
"type": "registry:component",
"target": "components/custom/blocks/SocialLinksBlock.tsx"
}
],
"docs": "Named export: SocialLinks (plus the SocialLink and SocialNetwork types). `links` is { network, href, label? }[]; `variant` is tile | outline | ghost, `size` is sm | md | lg. Links open in a new tab unless `external` is false; mailto links never do. Brand marks are inline SVG, so no icon package is needed.",
"categories": [
"navigation",
"marketing"
],
"type": "registry:component"
}