React Spring website dark mode toggle effect

[saifulapm]

Hi, I am new with react spring. I am trying create https://www.react-spring.dev/ dark mode toggle component with same effect which react spring website have. But couldn't make it. Anyone give me some idea ?

this is my component

import { useState } from "react";
import { animated, useSpring } from '@react-spring/web'
import useMeasure from 'react-use-measure'
import { Button } from "~/components/ui/button"
import { Icons } from '~/components/Icons';

export const ThemeToggle = () => {
  const [isDarkMode, setDarkMode] = useState(true)
  const [ref, { width }] = useMeasure()
  const [style, api] = useSpring(
    () => ({
      from: { width: 0, left: 0 },
      to: { width: width - 4, left: 2 },
    }),
    [width, isDarkMode]
  )

  const onHoverEnter = () => {
    api.start({left: width + 2 })
  }

  const onHoverLeave = () => {
    api.start({width: width - 4})
  }

  return (
    <div className="flex bg-muted rounded-md relative">
      <Button
        ref={ref}
        variant="ghost"
        size="icon"
        className="z-[1] h-10 w-10 hover:bg-transparent"
        onMouseEnter={onHoverEnter}
        onMouseLeave={onHoverLeave}
      >
        <Icons.Sun className="h-4 w-4" />
      </Button>
      <Button
        variant="ghost"
        size="icon"
        className="z-[1] h-10 w-10 hover:bg-transparent"
        onMouseEnter={onHoverEnter}
        onMouseLeave={onHoverLeave}
      >
        <Icons.Moon className="h-4 w-4" />
      </Button>
      <animated.div className="absolute rounded bg-background top-[2px] z-0 h-9" style={style} />
    </div>
  )
}

[saifulapm]

I have managed to do this. Thanks