refactoring and background blur during modal

components/Info.tsx

@@ -1,8 +1,21 @@
 import { Dialog, Transition } from "@headlessui/react";
 import { Fragment, useState } from "react";
 import { FiInfo } from "react-icons/fi";
+import styled, { css } from "styled-components";
 
-const Info = () => {
+const ModalContainer = styled.div`
+position: absolute;
+top: 0;
+left: 0;
+width: 100vw;
+height: 100vh;
+background: rgba(0, 0, 0, 0.5);
+display: flex;
+align-items: center;
+justify-content: center;
+`;
+
+export default function Info(){
   const [open, setOpen] = useState(false);
 
   return (
@@ -50,6 +63,7 @@ const Info = () => {
               leaveFrom="opacity-100 scale-100"
               leaveTo="opacity-0 scale-95"
             >
+              <ModalContainer>
                 <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="h1"
@@ -76,6 +90,7 @@ const Info = () => {
                     </button>
                   </div>
                 </div>
+              </ModalContainer>
             </Transition.Child>
           </div>
       </Dialog>
@@ -83,5 +98,3 @@ const Info = () => {
     </>
   );
 };
-
-export default Info;

components/Pause.tsx

@@ -5,19 +5,20 @@ interface PauseProps {
   setPaused: (value: boolean) => void;
 }
 
-const Pause = (props: PauseProps) => {
+export default function Pause({
+  paused,
+  setPaused,
+}: PauseProps) {
   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={() => props.setPaused(!props.paused)}
+        onClick={() => setPaused(!paused)}
       >
-        {props.paused ? <FiPlay /> : <FiPause />}
+        {paused ? <FiPlay /> : <FiPause />}
       </button>
     </>
   );
 };
-
-export default Pause;

components/PromptPanel.tsx

@@ -25,7 +25,7 @@ export default function PromptPanel({
                 <div className="pl-20">
                     <div className="h-[80vh] flex flex-col justify-around pt-[5vh] pr-5">
                         {prompts.slice(-6).map((prompt, index) => (
-                            <PromptEntry prompt={prompt.prompt} className={promptEntryClassNames[index]} index={index} />
+                            <PromptEntry prompt={prompt.prompt} className={promptEntryClassNames[index]} index={index} key={index}/>
                         ))}
                     </div>
 

package.json

@@ -12,18 +12,21 @@
     "@headlessui/react": "^1.5.0",
     "@react-three/drei": "^9.41.2",
     "@react-three/fiber": "^8.9.1",
+    "cores": "^0.8.5",
     "eslint": "8.27.0",
     "eslint-config-next": "13.0.4",
     "next": "13.0.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-icons": "^4.6.0",
+    "styled-components": "^5.3.6",
     "three": "^0.146.0",
     "tone": "^14.7.77"
   },
   "devDependencies": {
     "@types/node": "^18.11.9",
     "@types/react": "^18.0.25",
+    "@types/styled-components": "^5.1.26",
     "@types/three": "^0.146.0",
     "autoprefixer": "^10.4.13",
     "postcss": "^8.4.19",