Making settings and pause buttons into components

Feel free to revert if prefer to do anything differently
2022-11-23 14:48:40 -08:00 · 2022-11-23 14:48:40 -08:00 · 54bc013531
parent e3e9a2c5ae
commit 54bc013531
5 changed files with 155 additions and 16 deletions
--- a/components/Pause.tsx
+++ b/components/Pause.tsx
@ -0,0 +1,22 @@
+import { NextComponentType } from 'next'
+import { Fragment, useState } from 'react'
+import { FiPause, FiPlay } from "react-icons/fi";
+
+const Modal: NextComponentType = () => {
+    const [paused, SetPause] = useState(false)
+  
+    return (
+      <>
+        <button
+          title="Pause"
+          className="fixed z-90 top-28 right-8 bg-slate-100 w-14 h-14 rounded-full drop-shadow-lg
+          flex justify-center items-center text-black text-2xl hover:bg-sky-500 hover:drop-shadow-2xl"
+          onClick={() => SetPause(!paused)}
+        >
+          {paused ? <FiPlay /> : <FiPause />}
+        </button>
+      </>
+    )
+  }
+  
+  export default Modal
--- a/components/Settings.tsx
+++ b/components/Settings.tsx
@ -0,0 +1,86 @@
+import { Dialog, Transition } from '@headlessui/react'
+import { NextComponentType } from 'next'
+import { Fragment, useState } from 'react'
+import { FiSliders } from "react-icons/fi";
+
+
+const Modal: NextComponentType = () => {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <>
+      <button
+          title="Settings"
+          className="fixed z-90 top-8 right-8 bg-slate-100 w-14 h-14 rounded-full drop-shadow-lg
+          flex justify-center items-center text-black text-2xl hover:bg-sky-500 hover:drop-shadow-2xl"
+          onClick={() => setOpen(true)}
+        >
+          <FiSliders />
+        </button>
+
+      <Transition appear show={open} as={Fragment}>
+        <Dialog
+          as="div"
+          className="fixed inset-0 z-10 overflow-y-auto"
+          onClose={() => setOpen(false)}
+        >
+          <div className="min-h-screen px-4 text-center">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0"
+              enterTo="opacity-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100"
+              leaveTo="opacity-0"
+            >
+              <Dialog.Overlay className="fixed inset-0" />
+            </Transition.Child>
+
+            <span
+              className="inline-block h-screen align-middle"
+              aria-hidden="true"
+            >
+              &#8203;
+            </span>
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 scale-95"
+              enterTo="opacity-100 scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 scale-100"
+              leaveTo="opacity-0 scale-95"
+            >
+              <div className="my-8 inline-block w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
+                <Dialog.Title
+                  as="h3"
+                  className="text-lg font-medium leading-6 text-gray-900"
+                >
+                  Settings
+                </Dialog.Title>
+                <div className="mt-2">
+                  <p className="text-sm text-gray-500">
+                    Here are some knobs for you to tweak.
+                  </p>
+                </div>
+
+                <div className="mt-4">
+                  <button
+                    type="button"
+                    className="inline-flex justify-center rounded-md border border-transparent bg-sky-100 px-4 py-2 text-sm font-medium text-sky-800 hover:bg-sky-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-500 focus-visible:ring-offset-2"
+                    onClick={() => setOpen(false)}
+                  >
+                    Wicked!
+                  </button>
+                </div>
+              </div>
+            </Transition.Child>
+          </div>
+        </Dialog>
+      </Transition>
+    </>
+  )
+}
+
+export default Modal
--- a/package-lock.json
+++ b/package-lock.json
@ -8,6 +8,8 @@
      "name": "riffusion",
      "version": "0.1.0",
      "dependencies": {
+        "@headlessui/react": "^1.5.0",
+        "@heroicons/react": "^1.0.5",
        "@react-three/drei": "^9.41.2",
        "@react-three/fiber": "^8.9.1",
        "eslint": "8.27.0",
@ -102,6 +104,29 @@
        "url": "https://opencollective.com/eslint"
      }
    },
+    "node_modules/@headlessui/react": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.4.tgz",
+      "integrity": "sha512-D8n5yGCF3WIkPsjEYeM8knn9jQ70bigGGb5aUvN6y4BGxcT3OcOQOKcM3zRGllRCZCFxCZyQvYJF6ZE7bQUOyQ==",
+      "dependencies": {
+        "client-only": "^0.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": "^16 || ^17 || ^18",
+        "react-dom": "^16 || ^17 || ^18"
+      }
+    },
+    "node_modules/@heroicons/react": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-1.0.6.tgz",
+      "integrity": "sha512-JJCXydOFWMDpCP4q13iEplA503MQO3xLoZiKum+955ZCtHINWnx26CUxVxxFQu/uLb4LW3ge15ZpzIkXKkJ8oQ==",
+      "peerDependencies": {
+        "react": ">= 16"
+      }
+    },
    "node_modules/@humanwhocodes/config-array": {
      "version": "0.11.7",
      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.7.tgz",
@ -4227,6 +4252,20 @@
        "strip-json-comments": "^3.1.1"
      }
    },
+    "@headlessui/react": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.4.tgz",
+      "integrity": "sha512-D8n5yGCF3WIkPsjEYeM8knn9jQ70bigGGb5aUvN6y4BGxcT3OcOQOKcM3zRGllRCZCFxCZyQvYJF6ZE7bQUOyQ==",
+      "requires": {
+        "client-only": "^0.0.1"
+      }
+    },
+    "@heroicons/react": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-1.0.6.tgz",
+      "integrity": "sha512-JJCXydOFWMDpCP4q13iEplA503MQO3xLoZiKum+955ZCtHINWnx26CUxVxxFQu/uLb4LW3ge15ZpzIkXKkJ8oQ==",
+      "requires": {}
+    },
    "@humanwhocodes/config-array": {
      "version": "0.11.7",
      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.7.tgz",
--- a/package.json
+++ b/package.json
@ -13,6 +13,8 @@
    "@react-three/fiber": "^8.9.1",
    "eslint": "8.27.0",
    "eslint-config-next": "13.0.4",
+    "@headlessui/react": "^1.5.0",
+    "@heroicons/react": "^1.0.5",
    "next": "13.0.4",
    "react": "18.2.0",
    "react-dom": "18.2.0",
--- a/pages/index.tsx
+++ b/pages/index.tsx
@ -1,7 +1,9 @@
 import Head from "next/head";

 import ThreeCanvas from "../components/ThreeCanvas";
-import { FiSliders, FiPause } from "react-icons/fi";
+import { FiPause } from "react-icons/fi";
+import Settings from '../components/Settings'
+import Pause from '../components/Pause'

 export default function Home() {
  return (
@ -26,7 +28,7 @@ export default function Home() {
              A jazz pianist playing a classical concerto
            </p>
            <p className="pb-32 text-xl text-gray-300">
-              Taylor Swift with a tropical beat
+              Taylor Swift singing with a tropical beat
            </p>
            <p className="pb-32 text-3xl text-white">Justin Bieber Anger Rap</p>
            <p className="pb-32 text-m text-gray-400">
@ -37,21 +39,9 @@ export default function Home() {
        </main>

        {/* TODO(hayk): Convert into components. */}
-        <button
-          title="Settings"
-          className="fixed z-90 top-8 right-8 bg-slate-100 w-14 h-14 rounded-full drop-shadow-lg
-          flex justify-center items-center text-black text-2xl hover:bg-sky-500 hover:drop-shadow-2xl"
-        >
-          <FiSliders />
-        </button>

-        <button
-          title="Pause"
-          className="fixed z-90 top-28 right-8 bg-slate-100 w-14 h-14 rounded-full drop-shadow-lg
-          flex justify-center items-center text-black text-2xl hover:bg-sky-500 hover:drop-shadow-2xl"
-        >
-          <FiPause />
-        </button>
+        <Settings />
+        <Pause />

        <input
          className="fixed z-90 bottom-20 right-40 w-1/2 h-12 pl-3 text-xl text-black"