Share Button

1'use client';
2import * as React from 'react';
3import { Share2, Github, X, Facebook } from 'lucide-react';
4import { cva, type VariantProps } from 'class-variance-authority';
5import { HTMLMotionProps, motion, AnimatePresence } from 'motion/react';
6 
7import { cn } from '@/lib/utils';
8 
9const buttonVariants = cva(
10  "relative overflow-hidden cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
11  {
12    variants: {
13      size: {
14        default: 'min-w-28 h-10 px-4 py-2',
15        sm: 'min-w-24 h-9 rounded-md gap-1.5 px-3',
16        md: 'min-w-28 h-10 px-4 py-2',
17        lg: 'min-w-32 h-11 px-8',
18      },
19      icon: {
20        suffix: 'pl-4',
21        prefix: 'pr-4',
22      },
23    },
24    defaultVariants: {
25      size: 'default',
26    },
27  },
28);
29 
30const iconSizeMap = {
31  sm: 16,
32  md: 20,
33  lg: 28,
34  default: 16,
35};
36 
37type ShareButtonProps = HTMLMotionProps<'button'> & {
38  children: React.ReactNode;
39  className?: string;
40  onIconClick?: (platform: 'github' | 'x' | 'facebook') => void;
41} & VariantProps<typeof buttonVariants>;
42 
43function ShareButton({
44  children,
45  className,
46  size,
47  icon,
48  onIconClick,
49  ...props
50}: ShareButtonProps) {
51  const [hovered, setHovered] = React.useState(false);
52  return (
53    <motion.button
54      className={cn(
55        'bg-primary text-primary-foreground hover:bg-primary/90',
56        buttonVariants({ size, className, icon }),
57      )}
58      onMouseEnter={() => setHovered(true)}
59      onMouseLeave={() => setHovered(false)}
60      {...props}
61    >
62      <AnimatePresence initial={false} mode="wait">
63        {!hovered ? (
64          <motion.div
65            key="content"
66            initial={{ opacity: 1, y: 0 }}
67            animate={{ opacity: 1, y: 0 }}
68            exit={{ opacity: 0, y: -24 }}
69            transition={{ duration: 0.3 }}
70            className=" absolute left-0 right-0 top-0 bottom-0 flex items-center justify-center gap-2"
71          >
72            {icon === 'prefix' && (
73              <Share2
74                className="size-4"
75                size={iconSizeMap[size as keyof typeof iconSizeMap]}
76              />
77            )}
78// … truncated