Add Puzzle1 pop-up to room component

src/components/Room/Room.js

@@ -1,3 +1,5 @@
+import React, { useState } from 'react'
+import Puzzle1 from '../Puzzle1/PuzzleOne'
 import './Room.css'
 import blueBackground from '../../assets/room/blue-bg.png'
 import clock from '../../assets/room/clock.png'
@@ -13,17 +15,30 @@ import deskComp from '../../assets/room/desk-comp.png'
 import bike from '../../assets/room/bike-front.png'
 
 export default function Room() {
+  const [showPuzzle1, setShowPuzzle1] = useState(false);
+
+  const handleDeskCompClick = () => {
+    setShowPuzzle1(true);
+  };
+
+  const handleClosePuzzle1 = () => {
+    setShowPuzzle1(false);
+  };
+
   return (
     <article className='room' style={{ '--room-bg': `url(${blueBackground})` }}>
-      <button className='clock-btn'><img className='clock' src={clock} alt='clock'></img></button>
-      <button className='plant-btn'><img className='plant' src={plant} alt='plant'></img></button>
-      <button className='bike-btn'><img className='bike' src={bike} alt='bike'></img></button>
-      <button className='door-btn'><img className='door' src={door} alt='door'></img></button>
-      <button className='board-btn'><img className='board' src={board} alt='board'></img></button>
-      <button className='desk-comp-btn'><img className='desk-comp' src={deskComp} alt='desk'></img></button>
-      <button className='lamp-btn'><img className='lamp' src={lamp} alt='lamp'></img></button>
-      <button className='radio-btn'><img className='radio' src={radio} alt='radio'></img></button>
+      <button className='clock-btn'><img className='clock' src={clock} alt='clock' /></button>
+      <button className='plant-btn'><img className='plant' src={plant} alt='plant' /></button>
+      <button className='bike-btn'><img className='bike' src={bike} alt='bike' /></button>
+      <button className='door-btn'><img className='door' src={door} alt='door' /></button>
+      <button className='board-btn'><img className='board' src={board} alt='board' /></button>
+      <button className='desk-comp-btn' onClick={handleDeskCompClick}><img className='desk-comp' src={deskComp} alt='desk' /></button>
+      <button className='lamp-btn'><img className='lamp' src={lamp} alt='lamp' /></button>
+      <button className='radio-btn'><img className='radio' src={radio} alt='radio' /></button>
 
+      {showPuzzle1 && (
+        <Puzzle1 onClose={handleClosePuzzle1} />
+      )}
     </article>
-  )
+  );
 }