generated from template/astro-simple-template
feat: Update version to 0.0.5 and add fullscreen button to hotkeys app
This commit is contained in:
@@ -1,3 +1,4 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { wrapBasename } from "@/modules/basename";
|
||||
import { useStore } from "../store";
|
||||
export const RefreshButton = () => {
|
||||
@@ -62,4 +63,61 @@ export const SettingsButton = () => {
|
||||
</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>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user