Icon Swap

1"use client"
2 
3import type { AnimatePresenceProps, HTMLMotionProps } from "motion/react"
4import { AnimatePresence, motion } from "motion/react"
5 
6export function IconSwap(props: React.PropsWithChildren<AnimatePresenceProps>) {
7  return <AnimatePresence mode="popLayout" initial={false} {...props} />
8}
9 
10type MotionElement = typeof motion.div | typeof motion.span
11 
12export function IconSwapItem({
13  as: Component = motion.div,
14  ...props
15}: HTMLMotionProps<"div"> & {
16  as?: MotionElement
17}) {
18  return (
19    <Component
20      initial={{ opacity: 0, scale: 0.25, filter: "blur(4px)" }}
21      animate={{ opacity: 1, scale: 1, filter: "blur(0px)" }}
22      exit={{ opacity: 0, scale: 0.25, filter: "blur(4px)" }}
23      transition={{
24        type: "spring",
25        duration: 0.3,
26        bounce: 0,
27      }}
28      {...props}
29    />
30  )
31}