web/components/pages/main/AnimatedIcon.tsx

35 lines
708 B
TypeScript

"use client"
import React from "react"
import { motion } from "motion/react"
import { Mail, Lock, Disc3 } from "lucide-react"
import { SiGitea, SiAuthentik, SiNextcloud } from "react-icons/si"
const iconMap = {
Mail,
Lock,
Disc3,
SiNextcloud,
SiGitea,
SiAuthentik,
} as const
interface AnimatedIconProps {
iconName: keyof typeof iconMap
className?: string
}
const AnimatedIcon = ({ iconName, className }: AnimatedIconProps) => {
const Icon = iconMap[iconName]
return (
<motion.div
whileHover={{ rotate: 5 }}
transition={{ type: "spring", stiffness: 400, damping: 10 }}
>
<Icon className={className} />
</motion.div>
)
}
export default AnimatedIcon