forked from 77media/video-flow
36 lines
1.4 KiB
TypeScript
36 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import { motion } from 'framer-motion';
|
|
|
|
interface SkeletonCardProps {
|
|
className?: string;
|
|
}
|
|
|
|
export const SkeletonCard: React.FC<SkeletonCardProps> = ({ className = "" }) => {
|
|
return (
|
|
<div className={`bg-gray-700/20 rounded-lg p-3 relative overflow-hidden ${className}`}>
|
|
<div className="space-y-2">
|
|
<div className="h-4 bg-gray-600 rounded w-3/4 relative overflow-hidden">
|
|
<motion.div
|
|
className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent"
|
|
animate={{ x: ['-100%', '100%'] }}
|
|
transition={{ duration: 1.5, repeat: Infinity, ease: "linear" }}
|
|
/>
|
|
</div>
|
|
<div className="h-3 bg-gray-600 rounded w-full relative overflow-hidden">
|
|
<motion.div
|
|
className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent"
|
|
animate={{ x: ['-100%', '100%'] }}
|
|
transition={{ duration: 1.5, repeat: Infinity, ease: "linear" }}
|
|
/>
|
|
</div>
|
|
<div className="h-3 bg-gray-600 rounded w-1/2 relative overflow-hidden">
|
|
<motion.div
|
|
className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent"
|
|
animate={{ x: ['-100%', '100%'] }}
|
|
transition={{ duration: 1.5, repeat: Infinity, ease: "linear" }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|