36 lines
1.0 KiB
TypeScript
36 lines
1.0 KiB
TypeScript
import React from 'react';
|
|
import { cn } from './utils';
|
|
|
|
interface HoverShineOverlayProps {
|
|
/** Additional classes to merge */
|
|
className?: string;
|
|
/** Tailwind gradient via color, e.g. "via-white/10" */
|
|
shineColor?: string;
|
|
/** Hover trigger prefix, usually "group-hover:" */
|
|
hoverPrefix?: string;
|
|
}
|
|
|
|
export function HoverShineOverlay({
|
|
className,
|
|
shineColor = 'via-white/10',
|
|
hoverPrefix = 'group-hover:'
|
|
}: HoverShineOverlayProps) {
|
|
|
|
// Tailwind JIT cannot parse dynamic strings like `${prefix}left-[100%]`.
|
|
// We must provide literal strings for the compiler.
|
|
const hoverClass = hoverPrefix === 'peer-hover:'
|
|
? 'peer-hover:left-[100%]'
|
|
: 'group-hover:left-[100%]';
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"absolute top-0 -left-[150%] h-[200%] w-[150%] bg-gradient-to-r from-transparent to-transparent skew-x-[-20deg] transition-all duration-1000 ease-[cubic-bezier(0.16,1,0.3,1)] z-30 pointer-events-none",
|
|
hoverClass,
|
|
shineColor,
|
|
className
|
|
)}
|
|
/>
|
|
);
|
|
}
|