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 (
+ <>
+
+ >
+ )
+ }
+
+ 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 (
+ <>
+
+
+
+
+
+ >
+ )
+}
+
+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
- Taylor Swift with a tropical beat
+ Taylor Swift singing with a tropical beat
Justin Bieber Anger Rap
@@ -37,21 +39,9 @@ export default function Home() {
{/* TODO(hayk): Convert into components. */}
-
-
+
+