create delete button from /snippets

components/Button.js

@@ -8,6 +8,7 @@ const Button = ({
   onClick = () => {},
   background = COLORS.BLACK,
   color = COLORS.SECONDARY,
+  textColor,
   hoverBackground = COLORS.HOVER,
   hoverColor,
   disabled,
@@ -33,7 +34,7 @@ const Button = ({
           display: ${display || 'flex'};
           flex: ${flex};
           background-color: ${background};
-          color: ${color};
+          color: ${textColor || color};
           box-shadow: ${border ? `inset 0px 0px 0px ${selected ? 2 : 1}px ${color}` : 'initial'};
           cursor: ${disabled ? 'not-allowed' : 'pointer'};
           outline: none;

components/ConfirmButton.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import Button from './Button'
+
+export default function ConfirmButton(props) {
+  const [confirmed, setConfirmed] = React.useState(false)
+  return (
+    <Button
+      {...props}
+      onClick={e => {
+        if (confirmed) {
+          props.onClick(e)
+          setConfirmed(false)
+        } else {
+          setConfirmed(true)
+        }
+      }}
+      onBlur={() => setConfirmed(false)}
+    >
+      {confirmed ? 'Are you sure?' : props.children}
+    </Button>
+  )
+}

components/SnippetToolbar.js

@@ -3,31 +3,11 @@ import { useAsyncCallback, useOnline } from '@dawnlabs/tacklebox'
 
 import Button from './Button'
 import Toolbar from './Toolbar'
+import ConfirmButton from './ConfirmButton'
 import { useAuth } from './AuthContext'
 
 import { COLORS } from '../lib/constants'
 
-function ConfirmButton(props) {
-  const [confirmed, setConfirmed] = React.useState(false)
-
-  return (
-    <Button
-      {...props}
-      onClick={e => {
-        if (confirmed) {
-          props.onClick(e)
-          setConfirmed(false)
-        } else {
-          setConfirmed(true)
-        }
-      }}
-      onBlur={() => setConfirmed(false)}
-    >
-      {confirmed ? 'Are you sure?' : props.children}
-    </Button>
-  )
-}
-
 function DeleteButton(props) {
   const [onClick, { loading }] = useAsyncCallback(props.onClick)
 

pages/snippets.js

@@ -7,6 +7,7 @@ import { useAsyncCallback } from '@dawnlabs/tacklebox'
 
 import Button from '../components/Button'
 import LoginButton from '../components/LoginButton'
+import ConfirmButton from '../components/ConfirmButton'
 import { useAuth } from '../components/AuthContext'
 import { useAPI } from '../components/ApiContext'
 
@@ -29,8 +30,6 @@ function Snippet(props) {
   const config = { ...DEFAULT_SETTINGS, ...props, fontSize: '2px', windowControls: false }
 
   return (
-    <Link prefetch={false} href={`/${props.id}`}>
-      <a href={`/${props.id}`}>
     <div className="snippet">
       <div className="column">
         <div className="carbon-container">
@@ -43,6 +42,34 @@ function Snippet(props) {
           Edited {formatDistanceToNow(correctTimestamp(props.updatedAt), { addSuffix: true })}
         </div>
       </div>
+      <div className="overlay">
+        <Link prefetch={false} href={`/${props.id}`}>
+          <Button
+            large
+            border
+            center
+            flex="unset"
+            margin="0 auto 1.5rem"
+            padding="0.5rem 16px"
+            color="#fff"
+          >
+            Open ↗
+          </Button>
+        </Link>
+        <ConfirmButton
+          large
+          border
+          center
+          flex="unset"
+          margin="0 auto"
+          padding="0.5rem 20px"
+          color="#fff"
+          textColor={COLORS.RED}
+          hoverColor={COLORS.RED}
+          onClick={props.deleteSnippet}
+        >
+          Delete
+        </ConfirmButton>
       </div>
       <style jsx>
         {`
@@ -55,13 +82,11 @@ function Snippet(props) {
             cursor: pointer !important;
             overflow: hidden;
           }
-            .snippet:hover {
+          .overlay {
-              background: ${COLORS.HOVER};
+            display: none;
-            }
-            .snippet:hover:after {
             position: absolute;
             content: '↗';
-              display: flex;
+            flex-direction: column;
             align-items: center;
             justify-content: center;
             background: ${COLORS.HOVER};
@@ -73,6 +98,10 @@ function Snippet(props) {
             font-size: 48px;
             z-index: 999;
           }
+          .snippet:hover .overlay {
+            display: flex;
+            background: ${COLORS.HOVER};
+          }
           .column {
             display: flex;
             flex-direction: column;
@@ -83,7 +112,7 @@ function Snippet(props) {
           .id {
             position: absolute;
             top: 0.25rem;
-              right: 0.125rem;
+            right: 0.25rem;
             border-radius: 3px;
             background: ${COLORS.SECONDARY};
             color: ${COLORS.BLACK};
@@ -116,8 +145,7 @@ function Snippet(props) {
           }
         `}
       </style>
-      </a>
+    </div>
-    </Link>
   )
 }
 
@@ -127,9 +155,9 @@ function ActionButton(props) {
       border
       center
       margin="0.5rem"
-      flex="0 0 266px"
+      flex="unset"
       color={COLORS.GRAY}
-      style={{ minHeight: 266 }}
+      style={{ width: 266, minHeight: 266 }}
       {...props}
     />
   )
@@ -164,6 +192,10 @@ function SnippetsPage() {
     }
   }, [loadMore, page, user])
 
+  function deleteSnippet(id) {
+    return api.snippet.delete(id).then(() => setSnippets(curr => curr.filter(s => s.id !== id)))
+  }
+
   if (!user) {
     return <LoginButton />
   }
@@ -171,7 +203,12 @@ function SnippetsPage() {
   return (
     <div className="container">
       {snippets.map(snippet => (
-        <Snippet key={snippet.id} {...snippet} loading={!mounted} />
+        <Snippet
+          key={snippet.id}
+          {...snippet}
+          loading={!mounted}
+          deleteSnippet={deleteSnippet.bind(null, snippet.id)}
+        />
       ))}
       {snippets.length && previousRes && previousRes.length < 10 ? null : (
         <ActionButton