76 lines
2.9 KiB
TypeScript
76 lines
2.9 KiB
TypeScript
|
import { motion } from "framer-motion";
|
||
|
|
|
||
|
|
export const EmptyStateIllustration = () => {
|
||
|
|
return (
|
||
|
|
<motion.svg
|
||
|
|
width="240"
|
||
|
|
height="200"
|
||
|
|
viewBox="0 0 240 200"
|
||
|
|
fill="none"
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
initial={{ opacity: 0, scale: 0.9 }}
|
||
|
|
animate={{ opacity: 1, scale: 1 }}
|
||
|
|
transition={{ duration: 0.5, ease: "easeOut" }}
|
||
|
|
>
|
||
|
|
{/* Background Elements */}
|
||
|
|
<motion.path
|
||
|
|
d="M40 100C40 60 60 20 120 20C180 20 200 60 200 100C200 140 180 180 120 180C60 180 40 140 40 100Z"
|
||
|
|
fill="#F3F4F6"
|
||
|
|
initial={{ scale: 0 }}
|
||
|
|
animate={{ scale: 1 }}
|
||
|
|
transition={{ duration: 0.5, delay: 0.2 }}
|
||
|
|
/>
|
||
|
|
|
||
|
|
{/* Books Stack */}
|
||
|
|
<motion.g
|
||
|
|
initial={{ y: 20, opacity: 0 }}
|
||
|
|
animate={{ y: 0, opacity: 1 }}
|
||
|
|
transition={{ duration: 0.5, delay: 0.4 }}
|
||
|
|
>
|
||
|
|
{/* Bottom Book */}
|
||
|
|
<path
|
||
|
|
d="M90 120H150C152.761 120 155 117.761 155 115V105C155 102.239 152.761 100 150 100H90C87.2386 100 85 102.239 85 105V115C85 117.761 87.2386 120 90 120Z"
|
||
|
|
fill="#E0E7FF"
|
||
|
|
/>
|
||
|
|
{/* Middle Book */}
|
||
|
|
<path
|
||
|
|
d="M95 100H155C157.761 100 160 97.7614 160 95V85C160 82.2386 157.761 80 155 80H95C92.2386 80 90 82.2386 90 85V95C90 97.7614 92.2386 100 95 100Z"
|
||
|
|
fill="#818CF8"
|
||
|
|
/>
|
||
|
|
{/* Top Book */}
|
||
|
|
<path
|
||
|
|
d="M100 80H160C162.761 80 165 77.7614 165 75V65C165 62.2386 162.761 60 160 60H100C97.2386 60 95 62.2386 95 65V75C95 77.7614 97.2386 80 100 80Z"
|
||
|
|
fill="#6366F1"
|
||
|
|
/>
|
||
|
|
</motion.g>
|
||
|
|
|
||
|
|
{/* Floating Elements */}
|
||
|
|
<motion.g
|
||
|
|
initial={{ scale: 0 }}
|
||
|
|
animate={{ scale: 1 }}
|
||
|
|
transition={{ duration: 0.5, delay: 0.6 }}
|
||
|
|
>
|
||
|
|
{/* Small Circles */}
|
||
|
|
<circle cx="70" cy="60" r="4" fill="#C7D2FE" />
|
||
|
|
<circle cx="180" cy="140" r="6" fill="#818CF8" />
|
||
|
|
<circle cx="160" cy="40" r="5" fill="#6366F1" />
|
||
|
|
<circle cx="60" cy="140" r="5" fill="#E0E7FF" />
|
||
|
|
</motion.g>
|
||
|
|
|
||
|
|
{/* Decorative Lines */}
|
||
|
|
<motion.g
|
||
|
|
stroke="#C7D2FE"
|
||
|
|
strokeWidth="2"
|
||
|
|
strokeLinecap="round"
|
||
|
|
initial={{ pathLength: 0 }}
|
||
|
|
animate={{ pathLength: 1 }}
|
||
|
|
transition={{ duration: 1, delay: 0.8 }}
|
||
|
|
>
|
||
|
|
<line x1="40" y1="80" x2="60" y2="80" />
|
||
|
|
<line x1="180" y1="120" x2="200" y2="120" />
|
||
|
|
<line x1="160" y1="160" x2="180" y2="160" />
|
||
|
|
</motion.g>
|
||
|
|
</motion.svg>
|
||
|
|
);
|
||
|
|
};
|