Add hide/regenerate button, hero icons, abstract text

package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@heroicons/react": "^2.0.13",
     "@use-it/event-listener": "^0.1.7",
     "autoprefixer": "^10.4.13",
     "chance": "^1.1.9",

src/App.tsx

@@ -1,9 +1,22 @@
-import { useEventListener, useWindowSize } from "usehooks-ts";
+import { useEventListener, useInterval, useWindowSize } from "usehooks-ts";
-import useBackground from "./useBackground";
+import useBackground from "@/useBackground";
+import Post from "@/Post";
+import { useToggle } from "usehooks-ts";
+
+import {
+  ArrowPathIcon,
+  EyeIcon,
+  EyeSlashIcon,
+} from "@heroicons/react/24/solid";
 
 function App() {
   const { width, height } = useWindowSize();
-  const { svg, backgrounds, regenerate } = useBackground({ width, height, ratio: 0.3 });
+  const { svg, backgrounds, regenerate } = useBackground({
+    width,
+    height,
+    ratio: 0.4,
+  });
+  const [postHidden, toggleHidden] = useToggle(false);
 
   useEventListener("keydown", (e) => {
     if (e.code != "Enter") return;
@@ -12,58 +25,51 @@ function App() {
     regenerate();
   });
 
-  const appStyle = {
+  const [iconSpinning, toggleIconSpinning, setIconSpinning] = useToggle(false);
+  useInterval(
+    () => {
+      setIconSpinning(false);
+    },
+    iconSpinning ? 200 : null
+  );
+
+  const style = {
     background: [`url("${svg}")`, ...backgrounds].join(", "),
   };
 
   return (
-    <div style={appStyle} className="gradient">
+    <div style={style} className="text-zinc-800 gradient">
       <div className="font-inter min-w-[100vw] min-h-[100vh] bg-zinc-800/50 bg-blend-overlay">
         <div className="grid grid-cols-12 w-full">
-          <div className="col-span-1" />
+          <div className="col-span-3 sm:col-span-2">
-          <div className="flex col-span-10 md:col-span-8 lg:col-span-6 offset-1 bg-white w-full min-h-[100vh] text-zinc-800">
+            <button
-            <div className="m-3 p-5 border-y-[1px] border-zinc-100">
+              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"
-              <div className="mb-3">
+              onClick={() => {
-                <h2 className="text-4xl tracking-wide font-semibold drop-shadow-xl">
+                setIconSpinning(true);
-                  Ryan Walters
+                regenerate();
-                </h2>
+              }}
-                <span className="py-1 text-zinc-500">
+            >
-                  Published on {new Date().toLocaleDateString()}
+              <ArrowPathIcon
-                </span>
+                className={`transition-transform duration-200 ${
+                  iconSpinning ? "rotate-180" : "rotate-0"
+                }`}
+              />
+            </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"
+              onClick={toggleHidden}
+            >
+              {postHidden ? <EyeIcon /> : <EyeSlashIcon />}
+            </button>
+          </div>
+          <div
+            className={`flex col-span-9 sm:col-span-6 md:col-span-5 w-full min-h-[100vh]`}
+          >
+            {!postHidden ? (
+              <div className="bg-white shadow-lg">
+                <Post />
               </div>
-
+            ) : null}
-              <div className="space-y-2">
-                <p>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
-                  consequat lacus sit amet erat efficitur elementum. Fusce
-                  hendrerit bibendum ipsum, sit amet volutpat augue egestas sed.
-                  Curabitur ut blandit felis. Suspendisse euismod, orci quis
-                  consectetur pretium, libero eros lobortis lacus, vel interdum
-                  ex sem sed sapien. Aliquam erat volutpat. Curabitur tempus
-                  faucibus lobortis. Nulla sodales ipsum sit amet ligula
-                  elementum faucibus. Donec aliquam enim a arcu gravida tempus.
-                  Etiam tempus lectus et mauris feugiat, vel imperdiet quam
-                  mattis. Suspendisse urna enim, cursus quis nibh et, egestas
-                  ultrices tortor. Quisque imperdiet elit molestie lorem
-                  placerat posuere. Duis in dolor non elit tempor mattis. Proin
-                  vehicula facilisis nibh.
-                </p>
-                <p>
-                  Maecenas rhoncus, erat auctor scelerisque condimentum, nibh
-                  magna tristique felis, vitae condimentum mi est quis dui.
-                  Fusce non imperdiet massa. Sed varius ultrices odio non
-                  faucibus. Pellentesque habitant morbi tristique senectus et
-                  netus et malesuada fames ac turpis egestas. Pellentesque
-                  semper pulvinar vehicula. Fusce vel convallis eros. Duis
-                  cursus feugiat quam, quis sodales enim malesuada non.
-                  Vestibulum ante ipsum primis in faucibus orci luctus et
-                  ultrices posuere cubilia curae; Maecenas in efficitur elit,
-                  sed suscipit magna. Duis finibus blandit leo vitae mollis. In
-                  et est pulvinar, condimentum est sed, scelerisque nisl. Nunc
-                  eleifend eros aliquet libero.
-                </p>
-              </div>
-            </div>
           </div>
         </div>
       </div>

src/Post.tsx

@@ -0,0 +1,31 @@
+const Post = () => {
+  return (
+    <>
+      <div className="m-5 p-5 w-[90%]">
+        <div className="mb-5">
+          <h2 className="text-4xl pb-1 tracking-wide font-semibold drop-shadow-xl">
+            Grain
+          </h2>
+          <span className="pl-1 py-1 text-zinc-500">
+            Created by{" "}
+            <a
+              href="https://github.com/Xevion"
+              target="_blank"
+              className="text-zinc-800 hover:text-sky-700"
+            >
+              Ryan Walters
+            </a>
+          </span>
+        </div>
+        <h4 className="text-xl font-semibold">What?</h4>
+        <div className="space-y-2">
+          <p>
+            A small experiment on creating beautiful, dynamic backgrounds with
+            colorful gradients & film grain.
+          </p>
+        </div>
+      </div>
+    </>
+  );
+};
+export default Post;

yarn.lock

@@ -255,6 +255,11 @@
   resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.15.15.tgz#32c65517a09320b62530867345222fde7794fbe1"
   integrity sha512-lhz6UNPMDXUhtXSulw8XlFAtSYO26WmHQnCi2Lg2p+/TMiJKNLtZCYUxV4wG6rZMzXmr8InGpNwk+DLT2Hm0PA==
 
+"@heroicons/react@^2.0.13":
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-2.0.13.tgz#9b1cc54ff77d6625c9565efdce0054a4bcd9074c"
+  integrity sha512-iSN5XwmagrnirWlYEWNPdCDj9aRYVD/lnK3JlsC9/+fqGF80k8C7rl+1HCvBX0dBoagKqOFBs6fMhJJ1hOg1EQ==
+
 "@jridgewell/gen-mapping@^0.1.0":
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz#e5d2e450306a9491e3bd77e323e38d7aff315996"