Glass Skeleton

1import { cn } from '@/lib/utils';
2 
3export function GlassSkeleton({ className, ...props }: React.ComponentProps<'div'>) {
4  return (
5    <>
6      <div
7        className={cn('wv-shimmer rounded-xl bg-foreground/6 relative overflow-hidden', className)}
8        {...props}
9      />
10      <style
11        dangerouslySetInnerHTML={{
12          __html: `@media(prefers-reduced-motion:no-preference){@keyframes wv-shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}.wv-shimmer::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.4),transparent);animation:wv-shimmer 1.5s infinite}:is(.dark,.dark *) .wv-shimmer::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,0.06),transparent)}}`,
13        }}
14      />
15    </>
16  );
17}