xevion/grain
1
0
Fork 0
mirror of https://github.com/Xevion/grain.git synced 2025-12-07 03:15:16 -06:00
Code Issues Packages Projects Releases Wiki Activity

Hide opacity animation, remove regen event listener

Browse Source
This commit is contained in:
Xevion
2022-11-25 01:33:51 -06:00
parent 4cc72fcabc
commit 02e913d590
1 changed files with 10 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/App.tsx
View File

@@ -1,4 +1,4 @@
import { useEventListener, useInterval, useWindowSize, useToggle } from "usehooks-ts"; import { useInterval, useWindowSize, useToggle } from "usehooks-ts";
import useBackground from "@/utils/useBackground"; import useBackground from "@/utils/useBackground";
import Post from "@/components/Post"; import Post from "@/components/Post";
@@ -17,14 +17,7 @@ function App() {
}); });
const [postHidden, toggleHidden] = useToggle(false); const [postHidden, toggleHidden] = useToggle(false);
useEventListener("keydown", (e) => { const [iconSpinning, , setIconSpinning] = useToggle(false);
if (e.code != "Enter") return;
e.preventDefault();
regenerate();
});
const [iconSpinning, toggleIconSpinning, setIconSpinning] = useToggle(false);
useInterval( useInterval(
() => { () => {
setIconSpinning(false); setIconSpinning(false);
@@ -42,7 +35,7 @@ function App() {
<div className="grid grid-cols-12 w-full"> <div className="grid grid-cols-12 w-full">
<div className="col-span-3 sm:col-span-2"> <div className="col-span-3 sm:col-span-2">
<button <button
className="block p-2 w-10 h-10 rounded mx-auto xs:mx-0 xs:ml-5 mt-5 shadow-inner-md bg-zinc-700 text-zinc-100 focus-ring" className="block p-2 w-10 h-10 rounded mx-auto xs:mx-0 xs:ml-5 mt-5 shadow-inner-md bg-zinc-700 text-zinc-100 button"
onClick={() => { onClick={() => {
setIconSpinning(true); setIconSpinning(true);
regenerate(); regenerate();
@@ -55,20 +48,20 @@ function App() {
/> />
</button> </button>
<button <button
className="block p-2 w-10 h-10 rounded mx-auto xs:mx-0 xs:ml-5 mt-5 shadow-inner-md bg-zinc-700 text-zinc-100 focus-ring" className="block p-2 w-10 h-10 rounded mx-auto xs:mx-0 xs:ml-5 mt-5 shadow-inner-md bg-zinc-700 text-zinc-100 button"
onClick={toggleHidden} onClick={toggleHidden}
> >
{postHidden ? <EyeIcon /> : <EyeSlashIcon />} {postHidden ? <EyeIcon /> : <EyeSlashIcon />}
</button> </button>
</div> </div>
<div <div
className={`flex col-span-9 sm:col-span-6 md:col-span-5 w-full min-h-[100vh]`} className={`transition-opacity ease-in-out duration-75 ${
postHidden ? "opacity-0" : ""
} flex col-span-9 sm:col-span-6 md:col-span-5 w-full min-h-[100vh]`}
> >
{!postHidden ? (
<div className="bg-white shadow-lg"> <div className="bg-white shadow-lg">
<Post /> <Post />
</div> </div>
) : null}
</div> </div>
</div> </div>
</div> </div>