hot-api-center/src/apps/hotkeys/components/icon.tsx

import { useState, useEffect } from 'react';
import { wrapBasename } from "@/modules/basename";
import { useStore } from "../store";
export const RefreshButton = () => {
  const { isLoading, fetchItems } = useStore();

  return (
    <button
      onClick={() => fetchItems(true)}
      disabled={isLoading}
      className={`
        group relative p-3 rounded-full
        bg-white/10 backdrop-blur-md border border-white/20
        hover:bg-gradient-to-br hover:from-white/20 hover:to-white/5
        hover:border-white/40 hover:shadow-[0_0_15px_rgba(255,255,255,0.3)]
        active:scale-95 transition-all duration-300
        flex items-center justify-center
        ${isLoading ? 'cursor-not-allowed opacity-80' : ''}
      `}
      aria-label="Refresh"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        strokeWidth={1.5}
        stroke="currentColor"
        className={`w-6 h-6 text-white transition-transform duration-700 ease-in-out ${isLoading ? 'animate-spin' : 'group-hover:rotate-180'}`}
      >
        <path strokeLinecap="round" strokeLinejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
      </svg>
    </button>
  );
};

export const SettingsButton = () => {
  const onClick = () => {
    window.open(wrapBasename('/settings/'), '_blank');
  }
  return (
    <button
      className="
        group relative p-3 rounded-full
        bg-white/10 backdrop-blur-md border border-white/20
        hover:bg-gradient-to-br hover:from-white/20 hover:to-white/5
        hover:border-white/40 hover:shadow-[0_0_15px_rgba(255,255,255,0.3)]
        active:scale-95 transition-all duration-300
        flex items-center justify-center
      "
      aria-label="Settings"
      onClick={onClick}
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        strokeWidth={1.5}
        stroke="currentColor"
        className="w-6 h-6 text-white group-hover:rotate-90 transition-transform duration-500 ease-in-out"
      >
        <path strokeLinecap="round" strokeLinejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
        <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
      </svg>
    </button>
  );
};

export const FullscreenButton = () => {
  const [isFullscreen, setIsFullscreen] = useState(false);

  const toggleFullscreen = () => {
    if (!document.fullscreenElement) {
      document.documentElement.requestFullscreen();
      setIsFullscreen(true);
    } else {
      document.exitFullscreen();
      setIsFullscreen(false);
    }
  };

  useEffect(() => {
    const handleFullscreenChange = () => {
      setIsFullscreen(!!document.fullscreenElement);
    };

    document.addEventListener('fullscreenchange', handleFullscreenChange);
    return () => {
      document.removeEventListener('fullscreenchange', handleFullscreenChange);
    };
  }, []);

  return (
    <button
      onClick={toggleFullscreen}
      className="
        group relative p-1 sm:p-1 rounded-full
        bg-white/10 backdrop-blur-md border border-white/20
        hover:bg-gradient-to-br hover:from-white/20 hover:to-white/5
        hover:border-white/40 hover:shadow-[0_0_15px_rgba(255,255,255,0.3)]
        active:scale-95 transition-all duration-300
        flex items-center justify-center
        opacity-10 hover:opacity-100
        cursor-pointer
      "
      aria-label="Toggle fullscreen"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        strokeWidth={1.5}
        stroke="currentColor"
        className={`w-5 h-5 sm:w-6 sm:h-6 text-white transition-transform duration-500 ease-in-out ${isFullscreen ? 'scale-75' : 'group-hover:scale-110'}`}
      >
        {isFullscreen ? (
          <path strokeLinecap="round" strokeLinejoin="round" d="M9 9V4.5M9 9H4.5M9 9L3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5l5.25 5.25" />
        ) : (
          <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" />
        )}
      </svg>
    </button>
  );
};