Developers Digest
967 lines
24 KiB
TypeScript
967 lines
24 KiB
TypeScript
"use client";
|
|
|
|
import type { Transition, Variants } from "framer-motion";
|
|
import { motion, useAnimation } from "framer-motion";
|
|
import { useCallback, useEffect } from "react";
|
|
|
|
const playIconVariants: Variants = {
|
|
normal: {
|
|
x: 0,
|
|
rotate: 0,
|
|
},
|
|
animate: {
|
|
x: [0, -1, 2, 0],
|
|
rotate: [0, -10, 0, 0],
|
|
transition: {
|
|
duration: 0.5,
|
|
times: [0, 0.2, 0.5, 1],
|
|
stiffness: 260,
|
|
damping: 20,
|
|
},
|
|
},
|
|
};
|
|
|
|
const defaultTransition: Transition = {
|
|
duration: 0.6,
|
|
opacity: { duration: 0.2 },
|
|
};
|
|
|
|
const pathVariants: Variants = {
|
|
normal: {
|
|
pathLength: 1,
|
|
opacity: 1,
|
|
},
|
|
animate: {
|
|
opacity: [0, 1],
|
|
pathLength: [0.5, 1],
|
|
},
|
|
};
|
|
|
|
// Higher-order component for icon animation
|
|
const withIconAnimation = (IconComponent: React.ComponentType<any>) => {
|
|
const AnimatedIcon = ({
|
|
isHovered = false,
|
|
className,
|
|
...props
|
|
}: {
|
|
isHovered?: boolean;
|
|
className?: string;
|
|
}) => {
|
|
const controls = useAnimation();
|
|
|
|
useEffect(() => {
|
|
if (isHovered) {
|
|
controls.start("animate");
|
|
} else {
|
|
controls.start("normal");
|
|
}
|
|
}, [isHovered, controls]);
|
|
|
|
return (
|
|
<div className={className}>
|
|
<IconComponent controls={controls} {...props} />
|
|
</div>
|
|
);
|
|
};
|
|
AnimatedIcon.displayName = `Animated${IconComponent.displayName || IconComponent.name || 'Icon'}`;
|
|
return AnimatedIcon;
|
|
};
|
|
|
|
// Higher-order component for icon animation
|
|
const withChartIconAnimation = (IconComponent: React.ComponentType<any>) => {
|
|
const AnimatedChartIcon = ({
|
|
isHovered = false,
|
|
className,
|
|
...props
|
|
}: {
|
|
isHovered?: boolean;
|
|
className?: string;
|
|
}) => {
|
|
const controls = useAnimation();
|
|
|
|
const handleHoverStart = useCallback(async () => {
|
|
await controls.start((i) => ({
|
|
pathLength: 0,
|
|
opacity: 0,
|
|
transition: { delay: i * 0.1, duration: 0.3 },
|
|
}));
|
|
await controls.start((i) => ({
|
|
pathLength: 1,
|
|
opacity: 1,
|
|
transition: { delay: i * 0.1, duration: 0.3 },
|
|
}));
|
|
}, [controls]);
|
|
|
|
const handleHoverEnd = useCallback(() => {
|
|
controls.start("normal");
|
|
}, [controls]);
|
|
|
|
useEffect(() => {
|
|
if (isHovered) {
|
|
handleHoverStart();
|
|
} else {
|
|
handleHoverEnd();
|
|
}
|
|
}, [isHovered, handleHoverStart, handleHoverEnd]);
|
|
|
|
return (
|
|
<div className={className}>
|
|
<IconComponent
|
|
onMouseEnter={handleHoverStart}
|
|
onMouseLeave={handleHoverEnd}
|
|
controls={controls}
|
|
{...props}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
AnimatedChartIcon.displayName = `AnimatedChart${IconComponent.displayName || IconComponent.name || 'Icon'}`;
|
|
return AnimatedChartIcon;
|
|
};
|
|
|
|
// Base icon components
|
|
const HomeIconBase = ({ controls }: { controls: any }) => (
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
>
|
|
<path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
|
|
<motion.path
|
|
d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"
|
|
variants={pathVariants}
|
|
transition={defaultTransition}
|
|
animate={controls}
|
|
/>
|
|
</svg>
|
|
);
|
|
|
|
// Example of another icon with animation
|
|
const PlayIconBase = ({ controls }: { controls: any }) => (
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
>
|
|
<motion.path
|
|
d="M5 3l14 9-14 9V3z"
|
|
variants={playIconVariants}
|
|
transition={defaultTransition}
|
|
animate={controls}
|
|
/>
|
|
</svg>
|
|
);
|
|
|
|
const SettingsGearIconBase = ({ controls }: { controls: any }) => {
|
|
return (
|
|
<motion.svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
transition={{ type: "spring", stiffness: 50, damping: 10 }}
|
|
variants={{
|
|
normal: {
|
|
rotate: 0,
|
|
},
|
|
animate: {
|
|
rotate: 90,
|
|
},
|
|
}}
|
|
animate={controls}
|
|
>
|
|
<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
|
|
<circle cx="12" cy="12" r="3" />
|
|
</motion.svg>
|
|
);
|
|
};
|
|
|
|
const lineChartVariants2: Variants = {
|
|
visible: { pathLength: 1, opacity: 1 },
|
|
hidden: { pathLength: 0, opacity: 0 },
|
|
};
|
|
const ChartColumnIconBase = ({ controls }: { controls: any }) => {
|
|
return (
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
>
|
|
<motion.path
|
|
d="M13 17V9"
|
|
variants={lineChartVariants2}
|
|
transition={defaultTransition}
|
|
animate={controls}
|
|
initial="visible"
|
|
custom={1}
|
|
/>
|
|
<motion.path
|
|
d="M18 17V5"
|
|
variants={lineChartVariants2}
|
|
transition={defaultTransition}
|
|
animate={controls}
|
|
initial="visible"
|
|
custom={2}
|
|
/>
|
|
<path d="M3 3v16a2 2 0 0 0 2 2h16" />
|
|
<motion.path
|
|
d="M8 17v-3"
|
|
variants={lineChartVariants2}
|
|
transition={defaultTransition}
|
|
animate={controls}
|
|
initial="visible"
|
|
custom={0}
|
|
/>
|
|
</svg>
|
|
);
|
|
};
|
|
|
|
// const defaultTransition: Transition = {
|
|
// duration: 0.9,
|
|
// ease: 'easeInOut',
|
|
// };
|
|
|
|
// const pathVariants: Variants = {
|
|
// normal: {
|
|
// rotate: 0,
|
|
// x: 0,
|
|
// y: 0,
|
|
// },
|
|
// hover: {
|
|
// rotate: [0, 4, 2, -3, 1, 0],
|
|
// x: [0, 0.7, -0.3, 0.5, 0.2, 0],
|
|
// y: [0, -0.2, 0.3, -0.2, 0.4, 0],
|
|
// },
|
|
// };
|
|
|
|
const transition = (custom: number): Transition => ({
|
|
duration: 0.25,
|
|
delay: custom * 0.1,
|
|
});
|
|
|
|
const variants: Variants = {
|
|
default: {
|
|
pathLength: 1,
|
|
opacity: 1,
|
|
},
|
|
normal: (custom: number) => ({
|
|
pathLength: 1,
|
|
opacity: 1,
|
|
transition: transition(custom),
|
|
}),
|
|
animate: (custom: number) => ({
|
|
pathLength: 0.5,
|
|
opacity: 1,
|
|
transition: transition(custom),
|
|
}),
|
|
};
|
|
|
|
const ActivityLogsIconBase = ({ controls }: { controls: any }) => {
|
|
return (
|
|
<svg
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<motion.rect
|
|
variants={variants}
|
|
initial="normal"
|
|
animate={controls}
|
|
custom={0}
|
|
x="3"
|
|
y="3"
|
|
width="3"
|
|
height="3"
|
|
fill="currentColor"
|
|
stroke="none"
|
|
/>
|
|
<motion.path
|
|
variants={variants}
|
|
initial="normal"
|
|
animate={controls}
|
|
custom={0}
|
|
d="M8 4.5 L21 4.5"
|
|
strokeWidth="2"
|
|
/>
|
|
|
|
<motion.rect
|
|
variants={variants}
|
|
initial="normal"
|
|
animate={controls}
|
|
custom={1}
|
|
x="3"
|
|
y="10"
|
|
width="3"
|
|
height="3"
|
|
fill="currentColor"
|
|
stroke="none"
|
|
/>
|
|
<motion.path
|
|
variants={variants}
|
|
initial="normal"
|
|
animate={controls}
|
|
custom={1}
|
|
d="M8 11.5 L21 11.5"
|
|
strokeWidth="2"
|
|
/>
|
|
|
|
<motion.rect
|
|
variants={variants}
|
|
initial="normal"
|
|
animate={controls}
|
|
custom={2}
|
|
x="3"
|
|
y="17"
|
|
width="3"
|
|
height="3"
|
|
fill="currentColor"
|
|
stroke="none"
|
|
/>
|
|
<motion.path
|
|
variants={variants}
|
|
initial="normal"
|
|
animate={controls}
|
|
custom={2}
|
|
d="M8 18.5 L21 18.5"
|
|
strokeWidth="2"
|
|
/>
|
|
</svg>
|
|
);
|
|
};
|
|
|
|
const defaultTransition2: Transition = {
|
|
type: "spring",
|
|
stiffness: 200,
|
|
damping: 10,
|
|
};
|
|
|
|
const pathVariants2: Variants = {
|
|
normal: {
|
|
rotate: 0,
|
|
},
|
|
animate: {
|
|
rotate: -20,
|
|
},
|
|
};
|
|
|
|
const KeyOneBase = ({ controls }: { controls: any }) => {
|
|
return (
|
|
<motion.svg
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
fill="currentColor"
|
|
aria-hidden="true"
|
|
animate={controls}
|
|
initial="normal"
|
|
variants={pathVariants2}
|
|
transition={defaultTransition2}
|
|
>
|
|
<path d="M10.7577 11.8281L18.6066 3.97919L20.0208 5.3934L18.6066 6.80761L21.0815 9.28249L19.6673 10.6967L17.1924 8.22183L15.7782 9.63604L17.8995 11.7574L16.4853 13.1716L14.364 11.0503L12.1719 13.2423C13.4581 15.1837 13.246 17.8251 11.5355 19.5355C9.58291 21.4882 6.41709 21.4882 4.46447 19.5355C2.51184 17.5829 2.51184 14.4171 4.46447 12.4645C6.17493 10.754 8.81633 10.5419 10.7577 11.8281ZM10.1213 18.1213C11.2929 16.9497 11.2929 15.0503 10.1213 13.8787C8.94975 12.7071 7.05025 12.7071 5.87868 13.8787C4.70711 15.0503 4.70711 16.9497 5.87868 18.1213C7.05025 19.2929 8.94975 19.2929 10.1213 18.1213Z" />
|
|
</motion.svg>
|
|
);
|
|
};
|
|
|
|
const frameVariants: Variants = {
|
|
normal: { opacity: 1 },
|
|
animate: { opacity: 1 },
|
|
};
|
|
|
|
const lineVariants: Variants = {
|
|
normal: { pathLength: 1, opacity: 1 },
|
|
animate: { pathLength: 0, opacity: 0 },
|
|
};
|
|
|
|
const ScanTextIconBase = ({ controls }: { controls: any }) => {
|
|
return (
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
>
|
|
<motion.path
|
|
d="M3 7V5a2 2 0 0 1 2-2h2"
|
|
variants={frameVariants}
|
|
animate={controls}
|
|
/>
|
|
<motion.path
|
|
d="M17 3h2a2 2 0 0 1 2 2v2"
|
|
variants={frameVariants}
|
|
animate={controls}
|
|
/>
|
|
<motion.path
|
|
d="M21 17v2a2 2 0 0 1-2 2h-2"
|
|
variants={frameVariants}
|
|
animate={controls}
|
|
/>
|
|
<motion.path
|
|
d="M7 21H5a2 2 0 0 1-2-2v-2"
|
|
variants={frameVariants}
|
|
animate={controls}
|
|
/>
|
|
<motion.path
|
|
d="M7 8h8"
|
|
variants={lineVariants}
|
|
initial="animate"
|
|
animate={controls}
|
|
custom={0}
|
|
/>
|
|
<motion.path
|
|
d="M7 12h10"
|
|
variants={lineVariants}
|
|
initial="animate"
|
|
animate={controls}
|
|
custom={1}
|
|
/>
|
|
<motion.path
|
|
d="M7 16h6"
|
|
variants={lineVariants}
|
|
initial="animate"
|
|
animate={controls}
|
|
custom={2}
|
|
/>
|
|
</svg>
|
|
);
|
|
};
|
|
|
|
// Create animated versions of icons
|
|
const HomeIcon = withIconAnimation(HomeIconBase);
|
|
const PlayIcon = withIconAnimation(PlayIconBase);
|
|
const SettingsGearIcon = withIconAnimation(SettingsGearIconBase);
|
|
const ChartColumnIcon = withChartIconAnimation(ChartColumnIconBase);
|
|
const ActivityLogsIcon = withIconAnimation(ActivityLogsIconBase);
|
|
const ScanTextIcon = withIconAnimation(ScanTextIconBase);
|
|
const KeyIcon = withIconAnimation(KeyOneBase);
|
|
|
|
// Logout icon with animation
|
|
const LogOutIconBase = ({ controls }: { controls: any }) => {
|
|
return (
|
|
<motion.svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
>
|
|
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
|
|
<motion.polyline
|
|
points="16 17 21 12 16 7"
|
|
variants={{
|
|
normal: { x: 0 },
|
|
animate: { x: [0, 3, 0] },
|
|
}}
|
|
transition={{ duration: 0.5, ease: "easeInOut" }}
|
|
animate={controls}
|
|
/>
|
|
<motion.line
|
|
x1="21"
|
|
y1="12"
|
|
x2="9"
|
|
y2="12"
|
|
variants={{
|
|
normal: { x1: 21, x2: 9 },
|
|
animate: { x1: [21, 24, 21], x2: [9, 12, 9] },
|
|
}}
|
|
transition={{ duration: 0.5, ease: "easeInOut" }}
|
|
animate={controls}
|
|
/>
|
|
</motion.svg>
|
|
);
|
|
};
|
|
|
|
// External link icon with animation
|
|
const ExternalLinkIconBase = ({ controls }: { controls: any }) => {
|
|
return (
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
>
|
|
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
|
|
<motion.polyline
|
|
points="15 3 21 3 21 9"
|
|
variants={{
|
|
normal: { rotate: 0, scale: 1 },
|
|
animate: { rotate: [0, -10, 0], scale: [1, 1.1, 1] },
|
|
}}
|
|
transition={{ duration: 0.4, ease: "easeInOut" }}
|
|
animate={controls}
|
|
/>
|
|
<motion.line
|
|
x1="10"
|
|
y1="14"
|
|
x2="21"
|
|
y2="3"
|
|
variants={pathVariants}
|
|
transition={defaultTransition}
|
|
animate={controls}
|
|
/>
|
|
</svg>
|
|
);
|
|
};
|
|
|
|
// File text icon with animation
|
|
const FileTextIconBase = ({ controls }: { controls: any }) => {
|
|
return (
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
>
|
|
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
|
|
<motion.polyline
|
|
points="14 2 14 8 20 8"
|
|
variants={{
|
|
normal: { pathLength: 1, opacity: 1 },
|
|
animate: { pathLength: [1, 0, 1], opacity: [1, 0.5, 1] },
|
|
}}
|
|
transition={{ duration: 0.6, ease: "easeInOut" }}
|
|
animate={controls}
|
|
/>
|
|
<motion.line
|
|
x1="16"
|
|
y1="13"
|
|
x2="8"
|
|
y2="13"
|
|
variants={lineVariants}
|
|
initial="animate"
|
|
animate={controls}
|
|
custom={0}
|
|
/>
|
|
<motion.line
|
|
x1="16"
|
|
y1="17"
|
|
x2="8"
|
|
y2="17"
|
|
variants={lineVariants}
|
|
initial="animate"
|
|
animate={controls}
|
|
custom={1}
|
|
/>
|
|
</svg>
|
|
);
|
|
};
|
|
|
|
// Book open icon with animation
|
|
const BookOpenIconBase = ({ controls }: { controls: any }) => {
|
|
return (
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
>
|
|
<motion.path
|
|
d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"
|
|
variants={{
|
|
normal: { rotate: 0 },
|
|
animate: { rotate: [-2, 2, -2] },
|
|
}}
|
|
transition={{ duration: 0.6, ease: "easeInOut" }}
|
|
animate={controls}
|
|
/>
|
|
<motion.path
|
|
d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"
|
|
variants={{
|
|
normal: { rotate: 0 },
|
|
animate: { rotate: [2, -2, 2] },
|
|
}}
|
|
transition={{ duration: 0.6, ease: "easeInOut" }}
|
|
animate={controls}
|
|
/>
|
|
</svg>
|
|
);
|
|
};
|
|
|
|
// Message square icon with animation
|
|
const MessageSquareIconBase = ({ controls }: { controls: any }) => {
|
|
return (
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
>
|
|
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
|
|
<motion.circle
|
|
cx="8"
|
|
cy="10"
|
|
r="1"
|
|
fill="currentColor"
|
|
variants={{
|
|
normal: { scale: 1, opacity: 1 },
|
|
animate: { scale: [1, 1.5, 1], opacity: [1, 0.5, 1] },
|
|
}}
|
|
transition={{ duration: 0.4, delay: 0 }}
|
|
animate={controls}
|
|
/>
|
|
<motion.circle
|
|
cx="12"
|
|
cy="10"
|
|
r="1"
|
|
fill="currentColor"
|
|
variants={{
|
|
normal: { scale: 1, opacity: 1 },
|
|
animate: { scale: [1, 1.5, 1], opacity: [1, 0.5, 1] },
|
|
}}
|
|
transition={{ duration: 0.4, delay: 0.1 }}
|
|
animate={controls}
|
|
/>
|
|
<motion.circle
|
|
cx="16"
|
|
cy="10"
|
|
r="1"
|
|
fill="currentColor"
|
|
variants={{
|
|
normal: { scale: 1, opacity: 1 },
|
|
animate: { scale: [1, 1.5, 1], opacity: [1, 0.5, 1] },
|
|
}}
|
|
transition={{ duration: 0.4, delay: 0.2 }}
|
|
animate={controls}
|
|
/>
|
|
</svg>
|
|
);
|
|
};
|
|
|
|
const LogOutIcon = withIconAnimation(LogOutIconBase);
|
|
const ExternalLinkIcon = withIconAnimation(ExternalLinkIconBase);
|
|
const FileTextIcon = withIconAnimation(FileTextIconBase);
|
|
const BookOpenIcon = withIconAnimation(BookOpenIconBase);
|
|
const MessageSquareIcon = withIconAnimation(MessageSquareIconBase);
|
|
|
|
// Bell icon with animation
|
|
const BellIconBase = ({ controls }: { controls: any }) => {
|
|
return (
|
|
<motion.svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
>
|
|
<motion.path
|
|
d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"
|
|
variants={{
|
|
normal: { rotate: 0 },
|
|
animate: { rotate: [-10, 10, -10, 10, 0] },
|
|
}}
|
|
transition={{ duration: 0.5, ease: "easeInOut" }}
|
|
animate={controls}
|
|
style={{ transformOrigin: "50% 20%" }}
|
|
/>
|
|
<motion.path
|
|
d="M10.3 21a1.94 1.94 0 0 0 3.4 0"
|
|
variants={{
|
|
normal: { scale: 1 },
|
|
animate: { scale: [1, 1.1, 1] },
|
|
}}
|
|
transition={{ duration: 0.5, ease: "easeInOut" }}
|
|
animate={controls}
|
|
/>
|
|
</motion.svg>
|
|
);
|
|
};
|
|
|
|
// Gift icon with animation
|
|
const GiftIconBase = ({ controls }: { controls: any }) => {
|
|
return (
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
>
|
|
{/* Gift box bottom */}
|
|
<polyline points="20 12 20 22 4 22 4 12" />
|
|
<line x1="12" y1="22" x2="12" y2="12" />
|
|
|
|
{/* Gift lid with opening animation */}
|
|
<motion.g
|
|
variants={{
|
|
normal: { y: 0, rotate: 0 },
|
|
animate: { y: -3, rotate: -8 },
|
|
}}
|
|
transition={{ duration: 0.4, ease: "easeOut" }}
|
|
animate={controls}
|
|
style={{ transformOrigin: "2px 9px" }}
|
|
>
|
|
<rect x="2" y="7" width="20" height="5" />
|
|
<line x1="12" y1="7" x2="12" y2="12" />
|
|
|
|
{/* Left bow */}
|
|
<motion.path
|
|
d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z"
|
|
variants={{
|
|
normal: { scale: 1 },
|
|
animate: { scale: [1, 1.1, 1] },
|
|
}}
|
|
transition={{ duration: 0.4, ease: "easeInOut" }}
|
|
/>
|
|
|
|
{/* Right bow */}
|
|
<motion.path
|
|
d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z"
|
|
variants={{
|
|
normal: { scale: 1 },
|
|
animate: { scale: [1, 1.1, 1] },
|
|
}}
|
|
transition={{ duration: 0.4, ease: "easeInOut" }}
|
|
/>
|
|
</motion.g>
|
|
</svg>
|
|
);
|
|
};
|
|
|
|
// HelpCircle icon with animation
|
|
const HelpCircleIconBase = ({ controls }: { controls: any }) => {
|
|
return (
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
>
|
|
<motion.circle
|
|
cx="12"
|
|
cy="12"
|
|
r="10"
|
|
variants={{
|
|
normal: { rotate: 0 },
|
|
animate: { rotate: 360 },
|
|
}}
|
|
transition={{ duration: 0.6, ease: "easeInOut" }}
|
|
animate={controls}
|
|
/>
|
|
<motion.path
|
|
d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"
|
|
variants={{
|
|
normal: { opacity: 1 },
|
|
animate: { opacity: [1, 0.5, 1] },
|
|
}}
|
|
transition={{ duration: 0.4, ease: "easeInOut" }}
|
|
animate={controls}
|
|
/>
|
|
<motion.line
|
|
x1="12"
|
|
y1="17"
|
|
x2="12.01"
|
|
y2="17"
|
|
variants={{
|
|
normal: { scale: 1 },
|
|
animate: { scale: [1, 1.5, 1] },
|
|
}}
|
|
transition={{ duration: 0.4, ease: "easeInOut", delay: 0.2 }}
|
|
animate={controls}
|
|
/>
|
|
</svg>
|
|
);
|
|
};
|
|
|
|
const BellIcon = withIconAnimation(BellIconBase);
|
|
const GiftIcon = withIconAnimation(GiftIconBase);
|
|
const HelpCircleIcon = withIconAnimation(HelpCircleIconBase);
|
|
|
|
// SquareArrowUp icon with animation (for Upgrade button)
|
|
const SquareArrowUpIconBase = ({ controls }: { controls: any }) => {
|
|
return (
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
>
|
|
<rect width="18" height="18" x="3" y="3" rx="2" />
|
|
<motion.path
|
|
d="m8 12 4-4 4 4"
|
|
variants={{
|
|
normal: { y: 0 },
|
|
animate: { y: [-2, 0] },
|
|
}}
|
|
transition={{ duration: 0.3, ease: "easeOut" }}
|
|
animate={controls}
|
|
/>
|
|
<motion.path
|
|
d="M12 16V8"
|
|
variants={{
|
|
normal: { scaleY: 1 },
|
|
animate: { scaleY: [0.8, 1] },
|
|
}}
|
|
transition={{ duration: 0.3, ease: "easeOut" }}
|
|
animate={controls}
|
|
style={{ transformOrigin: "50% 100%" }}
|
|
/>
|
|
</svg>
|
|
);
|
|
};
|
|
|
|
const SquareArrowUpIcon = withIconAnimation(SquareArrowUpIconBase);
|
|
|
|
// Code icon with animation
|
|
const CodeIconBase = ({ controls }: { controls: any }) => {
|
|
return (
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
>
|
|
<motion.polyline
|
|
points="16 18 22 12 16 6"
|
|
variants={{
|
|
normal: { x: 0 },
|
|
animate: { x: [0, 2, 0] },
|
|
}}
|
|
transition={{ duration: 0.4, ease: "easeInOut" }}
|
|
animate={controls}
|
|
/>
|
|
<motion.polyline
|
|
points="8 6 2 12 8 18"
|
|
variants={{
|
|
normal: { x: 0 },
|
|
animate: { x: [0, -2, 0] },
|
|
}}
|
|
transition={{ duration: 0.4, ease: "easeInOut" }}
|
|
animate={controls}
|
|
/>
|
|
</svg>
|
|
);
|
|
};
|
|
|
|
const CodeIcon = withIconAnimation(CodeIconBase);
|
|
|
|
// TestTube icon for Extract Playground (Lucide TestTube2 icon without bubble)
|
|
const BeakerIconBase = ({ controls }: { controls: any }) => {
|
|
return (
|
|
<motion.svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
variants={{
|
|
normal: { rotate: 0 },
|
|
animate: { rotate: [-8, 8, -8] },
|
|
}}
|
|
transition={{
|
|
duration: 0.8,
|
|
ease: "easeInOut",
|
|
times: [0, 0.5, 1],
|
|
}}
|
|
animate={controls}
|
|
>
|
|
<path d="M21 7 6.82 21.18a2.83 2.83 0 0 1-3.99-.01v0a2.83 2.83 0 0 1 0-4L17 3" />
|
|
<path d="m16 2 6 6" />
|
|
</motion.svg>
|
|
);
|
|
};
|
|
|
|
const BeakerIcon = withIconAnimation(BeakerIconBase);
|
|
|
|
export {
|
|
HomeIcon,
|
|
PlayIcon,
|
|
SettingsGearIcon,
|
|
ChartColumnIcon,
|
|
ActivityLogsIcon,
|
|
KeyIcon,
|
|
ScanTextIcon,
|
|
LogOutIcon,
|
|
ExternalLinkIcon,
|
|
FileTextIcon,
|
|
BookOpenIcon,
|
|
MessageSquareIcon,
|
|
BellIcon,
|
|
GiftIcon,
|
|
HelpCircleIcon,
|
|
SquareArrowUpIcon,
|
|
CodeIcon,
|
|
BeakerIcon,
|
|
};
|