udpate

src/apps/hotkeys/components/icon.tsx

@@ -0,0 +1,60 @@
+import { useStore } from "../store";
+export const RefreshButton = () => {
+  const { isLoading, fetchItems } = useStore();
+
+  return (
+    <button
+      onClick={() => fetchItems()}
+      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 = () => {
+  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"
+    >
+      <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>
+  );
+};