Shadcn Swap for React Radix UI

import { MoonIcon, SunIcon } from "lucide-react";
import React from "react";
import { Button } from "@/components/ui/button";
import { Swap, SwapIndicator } from "@/components/ui/swap";

const SwapDemo = () => {
  const [swap, setSwap] = React.useState(false);

  return (
    <Button onClick={() => setSwap(!swap)} size="icon-lg" variant="outline">
      <Swap swap={swap} variant="fade">
        <SwapIndicator type="on">
          <MoonIcon />
        </SwapIndicator>
        <SwapIndicator type="off">
          <SunIcon />
        </SwapIndicator>
      </Swap>
    </Button>
  );
};