From 54bc013531038bf9feaf539a323344bed394b693 Mon Sep 17 00:00:00 2001
From: Seth Forsgren <forsgren.seth@gmail.com>
Date: Wed, 23 Nov 2022 14:48:40 -0800
Subject: [PATCH] Making settings and pause buttons into components

Feel free to revert if prefer to do anything differently
---
 components/Pause.tsx    | 22 +++++++++++
 components/Settings.tsx | 86 +++++++++++++++++++++++++++++++++++++++++
 package-lock.json       | 39 +++++++++++++++++++
 package.json            |  2 +
 pages/index.tsx         | 22 +++--------
 5 files changed, 155 insertions(+), 16 deletions(-)
 create mode 100644 components/Pause.tsx
 create mode 100644 components/Settings.tsx

diff --git a/components/Pause.tsx b/components/Pause.tsx
new file mode 100644
index 0000000..11dd484
--- /dev/null
+++ 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
\ No newline at end of file
diff --git a/components/Settings.tsx b/components/Settings.tsx
new file mode 100644
index 0000000..567a81f
--- /dev/null
+++ 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
diff --git a/package-lock.json b/package-lock.json
index 1e538c1..99498dc 100644
--- 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",
diff --git a/package.json b/package.json
index 74abdee..eb9580e 100644
--- 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",
diff --git a/pages/index.tsx b/pages/index.tsx
index a4027bb..6976a97 100644
--- 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"