45 lines
1.0 KiB
TypeScript
45 lines
1.0 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import { motion } from "motion/react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type AvatarMotionProps = {
|
|
src: string;
|
|
alt: string;
|
|
size?: number; // px
|
|
className?: string;
|
|
};
|
|
|
|
export function AvatarMotion({
|
|
src,
|
|
alt,
|
|
size = 160,
|
|
className,
|
|
}: AvatarMotionProps) {
|
|
// tailwind classes for typical 160px size
|
|
const baseSizeClasses = size === 160 ? "h-40 w-40" : "";
|
|
|
|
return (
|
|
<motion.div
|
|
whileHover={{ scale: 1.03, y: -2 }}
|
|
whileTap={{ scale: 0.98 }}
|
|
transition={{ type: "spring", stiffness: 360, damping: 22, mass: 0.6 }}
|
|
className="inline-block group"
|
|
>
|
|
<Image
|
|
src={src}
|
|
alt={alt}
|
|
width={size}
|
|
height={size}
|
|
className={cn(
|
|
baseSizeClasses,
|
|
"rounded-full object-cover ring-2 ring-neutral-200 shadow-lg transition-shadow duration-300 group-hover:shadow-xl dark:shadow-none dark:ring-neutral-800",
|
|
className,
|
|
)}
|
|
priority
|
|
/>
|
|
</motion.div>
|
|
);
|
|
}
|