- Added motion effects to Donut, Gauge, Header, NoData, Sparkline components for improved user experience. - Implemented initial and animate properties for SVG elements to create smooth transitions. - Introduced new motion primitives for reusable animations across components. - Updated UI elements like badges and buttons with hover effects and transitions. - Enhanced skeleton and spinner components for better loading states. - Created a motion library for consistent animation variants and utility constants.
33 lines
686 B
TypeScript
33 lines
686 B
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
|
|
export function NoData() {
|
|
return (
|
|
<motion.svg
|
|
width={200}
|
|
height={100}
|
|
viewBox="0 0 200 100"
|
|
role="img"
|
|
aria-label="No data available"
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ duration: 0.4 }}
|
|
>
|
|
<motion.text
|
|
x={100}
|
|
y={50}
|
|
textAnchor="middle"
|
|
fill="#6e7681"
|
|
fontSize={12}
|
|
fontFamily="system-ui,sans-serif"
|
|
initial={{ opacity: 0, y: 6 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.4 }}
|
|
>
|
|
No data
|
|
</motion.text>
|
|
</motion.svg>
|
|
);
|
|
}
|