Something went wrong. Try again.
a tool for shared writing and social publishing
Something went wrong. Try again.
1.5 kB · 47 lines
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748export const InteractionButton = (props: { onClick: React.MouseEventHandler<HTMLButtonElement>; onMouseEnter?: React.MouseEventHandler<HTMLButtonElement>; onTouchStart?: React.TouchEventHandler<HTMLButtonElement>; ariaLabel: string; children: React.ReactNode; className?: string;}) => { return ( <div className={`interactionButton relative flex gap-1 items-center hover:text-accent-contrast ${props.className}`} > <button onClick={props.onClick} onMouseEnter={props.onMouseEnter} onTouchStart={props.onTouchStart} className="absolute inset-0 z-0" aria-label={props.ariaLabel} /> {props.children} </div> );};
export const LargeInteractionButton = (props: { onClick: React.MouseEventHandler<HTMLButtonElement>; onMouseEnter?: React.MouseEventHandler<HTMLButtonElement>; onTouchStart?: React.TouchEventHandler<HTMLButtonElement>; ariaLabel: string; children: React.ReactNode; className?: string;}) => { return ( <div className={`largeInteractionButton relative flex gap-1 items-center text-accent-contrast py-1 px-2 rounded-full border border-accent-contrast shrink-0 sm:hover:bg-accent-1 hover:text-accent-2 ${props.className}`} > <button onClick={props.onClick} onMouseEnter={props.onMouseEnter} onTouchStart={props.onTouchStart} className="absolute inset-0" aria-label={props.ariaLabel} /> {props.children} </div> );};