Template
45 lines
739 B
TypeScript
45 lines
739 B
TypeScript
'use client';
|
|
|
|
import { cn } from '@/lib/utils';
|
|
|
|
const SHIMMER_STYLES = `
|
|
.shimmer {
|
|
-webkit-mask-image: linear-gradient(
|
|
-75deg,
|
|
#000 30%,
|
|
rgba(0, 0, 0, 0.15) 50%,
|
|
#000 70%
|
|
);
|
|
-webkit-mask-size: 200%;
|
|
animation: shimmer 5s infinite;
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
from {
|
|
-webkit-mask-position: 150%;
|
|
}
|
|
to {
|
|
-webkit-mask-position: -50%;
|
|
}
|
|
}
|
|
`;
|
|
|
|
export interface ShimmerProps {
|
|
children: string;
|
|
as?: keyof React.JSX.IntrinsicElements;
|
|
className?: string;
|
|
}
|
|
|
|
export function Shimmer({
|
|
children,
|
|
as: Component = 'p',
|
|
className,
|
|
}: ShimmerProps) {
|
|
return (
|
|
<>
|
|
<style>{SHIMMER_STYLES}</style>
|
|
<Component className={cn('shimmer', className)}>{children}</Component>
|
|
</>
|
|
);
|
|
}
|