Social Button

1"use client";
2 
3/**
4 * @author: @dorianbaffier
5 * @description: Social Button
6 * @version: 1.0.0
7 * @date: 2025-06-26
8 * @license: MIT
9 * @website: https://kokonutui.com
10 * @github: https://github.com/kokonut-labs/kokonutui
11 */
12 
13import type { LucideIcon } from "lucide-react";
14import { Instagram, Link, Linkedin, Twitter } from "lucide-react";
15import { motion } from "motion/react";
16import { useState } from "react";
17import { Button } from "@/components/ui/button";
18import { cn } from "@/lib/utils";
19 
20interface ShareItem {
21  icon: LucideIcon;
22  label: string;
23}
24 
25interface SocialButtonProps
26  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
27  label?: string;
28  items?: ShareItem[];
29  onShare?: (index: number, item: ShareItem) => void;
30  className?: string;
31}
32 
33const DEFAULT_SHARE_ITEMS: ShareItem[] = [
34  { icon: Twitter, label: "Share on Twitter" },
35  { icon: Instagram, label: "Share on Instagram" },
36  { icon: Linkedin, label: "Share on LinkedIn" },
37  { icon: Link, label: "Copy link" },
38];
39 
40export default function SocialButton({
41  label = "Share",
42  items = DEFAULT_SHARE_ITEMS,
43  onShare,
44  className,
45  ...props
46}: SocialButtonProps) {
47  const [isVisible, setIsVisible] = useState(false);
48  const [activeIndex, setActiveIndex] = useState<number | null>(null);
49 
50  const handleShare = (index: number) => {
51    setActiveIndex(index);
52    onShare?.(index, items[index]);
53    setTimeout(() => setActiveIndex(null), 300);
54  };
55 
56  return (
57    <div
58      className="relative"
59      onMouseEnter={() => setIsVisible(true)}
60      onMouseLeave={() => setIsVisible(false)}
61    >
62      <motion.div
63        animate={{
64          opacity: isVisible ? 0 : 1,
65        }}
66        transition={{
67          duration: 0.2,
68          ease: "easeInOut",
69        }}
70      >
71        <Button
72          className={cn(
73            "relative min-w-40",
74            "bg-white dark:bg-black",
75            "hover:bg-gray-50 dark:hover:bg-gray-950",
76            "text-black dark:text-white",
77            "border border-black/10 dark:border-white/10",
78            "transition-colors duration-200",
79            className
80          )}
81          {...props}
82        >
83          <span className="flex items-center gap-2">
84            <Link className="h-4 w-4" />
85            {label}
86          </span>
87        </Button>
88      </motion.div>
89 
90      <motion.div
91        animate={{
92          width: isVisible ? "auto" : 0,
93        }}
94        className="absolute top-0 left-0 flex h-10 overflow-hidden"
95        transition={{
96// … truncated