'use client'; import * as React from 'react'; import { Share2 } from 'lucide-react'; import { cva, type VariantProps } from 'class-variance-authority'; import { HTMLMotionProps, motion, AnimatePresence } from 'framer-motion'; import { cn } from '@/lib/utils'; type BrandIconProps = React.SVGProps & { size?: number }; function GithubBrandIcon({ size = 16, ...props }: BrandIconProps) { return ( ); } function XBrandIcon({ size = 16, ...props }: BrandIconProps) { return ( ); } function FacebookBrandIcon({ size = 16, ...props }: BrandIconProps) { return ( ); } const buttonVariants = cva( "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:ring-2 focus-visible:ring-[#465fff]/60 focus-visible:ring-offset-2 focus-visible:outline-none aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", { variants: { size: { default: 'min-w-28 h-10 px-4 py-2', sm: 'min-w-24 h-9 rounded-md gap-1.5 px-3', md: 'min-w-28 h-10 px-4 py-2', lg: 'min-w-32 h-11 px-8', }, icon: { suffix: 'pl-4', prefix: 'pr-4', }, }, defaultVariants: { size: 'default', }, }, ); const iconSizeMap = { sm: 16, md: 20, lg: 28, default: 16, }; type ShareButtonProps = HTMLMotionProps<'button'> & { children: React.ReactNode; className?: string; onIconClick?: (platform: 'github' | 'x' | 'facebook') => void; } & VariantProps; function ShareButton({ children, className, size, icon, onIconClick, ...props }: ShareButtonProps) { const [hovered, setHovered] = React.useState(false); return ( setHovered(true)} onMouseLeave={() => setHovered(false)} {...props} > {!hovered ? ( {icon === 'prefix' && ( )} {children} {icon === 'suffix' && ( )} ) : ( )} ); } const shareIconGroupVariants = cva('flex items-center justify-center gap-3', { variants: { size: { default: 'text-[16px]', sm: 'text-[16px]', md: 'text-[20px]', lg: 'text-[28px]', }, }, defaultVariants: { size: 'default', }, }); type ShareIconGroupProps = HTMLMotionProps<'div'> & { className?: string; onIconClick?: ( platform: 'github' | 'x' | 'facebook', event: React.MouseEvent, ) => void; } & VariantProps; function ShareIconGroup({ size = 'default', className, onIconClick, }: ShareIconGroupProps) { const iconSize = iconSizeMap[size as keyof typeof iconSizeMap]; const handleIconClick = React.useCallback( ( platform: 'github' | 'x' | 'facebook', event: React.MouseEvent, ) => { onIconClick?.(platform, event); }, [onIconClick], ); return ( handleIconClick('github', event)} > handleIconClick('x', event)} > handleIconClick('facebook', event)} > ); } type ShareButtonDemoProps = { size?: ShareButtonProps['size']; icon?: ShareButtonProps['icon']; }; export const ShareButtonDemo = ({ size, icon }: ShareButtonDemoProps) => { return ( Share ); }; export { ShareButton, type ShareButtonProps }; export default ShareButtonDemo;

Buttons