"use client"; /** * @author: @dorianbaffier * @description: Social Button * @version: 1.0.0 * @date: 2025-06-26 * @license: MIT * @website: https://kokonutui.com * @github: https://github.com/kokonut-labs/kokonutui */ import type { LucideIcon } from "lucide-react"; import { Instagram, Link, Linkedin, Twitter } from "lucide-react"; import { motion } from "motion/react"; import { useState } from "react"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; interface ShareItem { icon: LucideIcon; label: string; } interface SocialButtonProps extends React.ButtonHTMLAttributes { label?: string; items?: ShareItem[]; onShare?: (index: number, item: ShareItem) => void; className?: string; } const DEFAULT_SHARE_ITEMS: ShareItem[] = [ { icon: Twitter, label: "Share on Twitter" }, { icon: Instagram, label: "Share on Instagram" }, { icon: Linkedin, label: "Share on LinkedIn" }, { icon: Link, label: "Copy link" }, ]; export default function SocialButton({ label = "Share", items = DEFAULT_SHARE_ITEMS, onShare, className, ...props }: SocialButtonProps) { const [isVisible, setIsVisible] = useState(false); const [activeIndex, setActiveIndex] = useState(null); const handleShare = (index: number) => { setActiveIndex(index); onShare?.(index, items[index]); setTimeout(() => setActiveIndex(null), 300); }; return (

setIsVisible(true)} onMouseLeave={() => setIsVisible(false)} > {items.map((button, i) => ( handleShare(i)} transition={{ duration: 0.3, ease: [0.23, 1, 0.32, 1], delay: isVisible ? i * 0.05 : 0, }} type="button" > ))}

); }

Social Button

Instalação

Dependências

Registry dependencies