add confirmation before deletion + hover interaction

components/arcade/showcase/cohort-card.js

@@ -98,19 +98,29 @@ const CohortCard = ({
               bg: '#09AFB4',
               borderRadius: '10px',
               height: '32px',
-              cursor: 'pointer'
+              cursor: 'pointer',
+              transitionDuration: '0.4s',
+              '&:hover': {
+                transform: 'scale(1.15)'
+              }
             }}
           >
             <Icon glyph="edit" />{' '}
           </div>
           <div
-            onClick={handleDelete}
+            onClick={e => {
+              document.getElementById('delete-project').showModal()
+            }}
             sx={{
               color: 'white',
               bg: '#09AFB4',
               borderRadius: '10px',
               height: '32px',
-              cursor: 'pointer'
+              cursor: 'pointer',
+              transitionDuration: '0.4s',
+              '&:hover': {
+                transform: 'scale(1.15)'
+              }
             }}
           >
             <Icon glyph="minus" />{' '}
@@ -131,6 +141,47 @@ const CohortCard = ({
         <h1 className={styles.card_title}>{title}</h1>
         <p className={styles.card_description}>{desc}</p>
       </a>
+      <dialog
+        id="delete-project"
+        sx={{ borderRadius: '10px', border: '3px dashed #09AFB4' }}
+        className="gaegu"
+      >
+        <Text>Are you sure you want to delete this project?</Text>
+        <br />
+        <Button
+          sx={{
+            backgroundColor: '#FF5C00',
+            color: '#FAEFD6',
+            borderRadius: '5px',
+            border: 'none',
+            px: '20px',
+            transitionDuration: '0.3s',
+            '&:hover': {
+              transform: 'scale(1.05)'
+            },
+            width: 'fit-content'
+          }}
+          onClick={e => {
+            handleDelete()
+            document.getElementById('add-project').close()
+          }}
+        >
+          Yes
+        </Button>
+        <Close
+          sx={{
+            '&:hover': { cursor: 'pointer' },
+            position: 'absolute',
+            top: '10px',
+            right: '10px',
+            zIndex: 2,
+            color: '#09AFB4'
+          }}
+          onClick={e => {
+            document.getElementById('add-project').close()
+          }}
+        />
+      </dialog>
     </div>
   )
 }

pages/arcade/gallery.js

@@ -86,6 +86,7 @@ const gallery = ({ posts }) => {
                     playable={post.playable}
                     images={post.images}
                     githubProf={""}
+                    key={post.id}
                 />)
 
             })}

pages/arcade/showcase/my.js

@@ -61,8 +61,7 @@ a {
 }
 `
 
-const ProjectGallery = ({ projects, loadProjects}) => {
-
+const ProjectGallery = ({ projects, loadProjects }) => {
   return (
     <div className={styles.feed}>
       <div className={styles.container}>
@@ -120,9 +119,31 @@ const ProjectGallery = ({ projects, loadProjects}) => {
   )
 }
 
-const Loading = () => <div sx={{width: '90vw', maxWidth: '1200px', margin: 'auto', textAlign: 'center'}}>Loading...</div>
+const Loading = () => (
+  <div
+    sx={{
+      width: '90vw',
+      maxWidth: '1200px',
+      margin: 'auto',
+      textAlign: 'center'
+    }}
+  >
+    Loading...
+  </div>
+)
 
-const ErrorMessage = () => <div sx={{width: '90vw', maxWidth: '1200px', margin: 'auto', textAlign: 'center'}}>There was an error loading your projects.</div>
+const ErrorMessage = () => (
+  <div
+    sx={{
+      width: '90vw',
+      maxWidth: '1200px',
+      margin: 'auto',
+      textAlign: 'center'
+    }}
+  >
+    There was an error loading your projects.
+  </div>
+)
 
 const my = () => {
   const [projects, setProjects] = useState([])
@@ -209,7 +230,7 @@ const my = () => {
   }
 
   useEffect(async () => {
-    loadProjects();
+    loadProjects()
   }, [])
 
   return (
@@ -265,7 +286,6 @@ const my = () => {
             >
               <Text className="gaegu" sx={{ color: '#FF5C00' }}>
                 {status == 'success' ? `Welcome, ${name}` : ''}
-                
               </Text>
 
               <div>
@@ -293,13 +313,20 @@ const my = () => {
               </div>
             </Heading>
           </SlideDown>
+
           {status == 'loading' && <Loading />}
 
           {status == 'error' && <ErrorMessage />}
 
-          {status == 'success' && <ProjectGallery projects={projects} loadProjects={loadProjects} />}
-          <dialog id="add-project" sx={{borderRadius: '10px', border: '3px dashed #09AFB4'}} className='gaegu'>
-          <ProjectAddView />
+          {status == 'success' && (
+            <ProjectGallery projects={projects} loadProjects={loadProjects} />
+          )}
+          <dialog
+            id="add-project"
+            sx={{ borderRadius: '10px', border: '3px dashed #09AFB4' }}
+            className="gaegu"
+          >
+            <ProjectAddView />
             <Close
               sx={{
                 '&:hover': { cursor: 'pointer' },