useReload

"use client";
import { Svg } from "@/ui/svg";
import { Button } from "@/ui/button";
import { useReload } from "@/hooks/use-reload";

export function UseReloadDemo() {
  const { reload, onReload } = useReload();

  return (
    <Button title="reload" onClick={onReload} variant="outline" size="icon" color={reload ? "red" : "default"} className="p-1 [--sz:36px]">
      <Svg size={28} className="transition-transform">
        <g className={reload ? "occure_load" : undefined}>
          <path d="m4,11c.6-4.4,4.7-7.5,9.1-6.9,2.8.4,5.3,2.3,6.4,4.9m.5-4v4h-4" />
          <path d="m20,13c-.6,4.4-4.7,7.5-9.1,6.9-2.8-.4-5.3-2.3-6.4-4.9m-.5,4v-4h4" />
        </g>
      </Svg>
      <span className="sr-only">Reload window</span>
    </Button>
  );
}