From 5ab1f7350fc1e24ffd3f9a6222875e38d7a5aee7 Mon Sep 17 00:00:00 2001
From: RaviAnand Mohabir <moravrav@gmail.com>
Date: Mon, 8 May 2023 15:39:00 +0200
Subject: [PATCH 1/8] fix: :lipstick: fix align center for header content

---
 src/components/header.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/header.tsx b/src/components/header.tsx
index d3fdc2f..e9a3cc0 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -30,7 +30,7 @@ function Header({ signUpEnabled }: HeaderProps) {
 
   return (
     <MantineHeader height={75} p="md">
-      <Group>
+      <Group h="100%" w="100%">
         <Anchor
           component={Link}
           href="/"
@@ -49,7 +49,7 @@ function Header({ signUpEnabled }: HeaderProps) {
             Share Me
           </Title>
         </Anchor>
-        <Box sx={{ flexGrow: 1 }} />
+        <Box sx={{ flexGrow: 1, width: "auto" }} />
         {user ? (
           router.asPath !== "/posts/create" && (
             <Group>

From 81e41b7214ce2cd50a9365ba54f210ff87e5abe0 Mon Sep 17 00:00:00 2001
From: RaviAnand Mohabir <moravrav@gmail.com>
Date: Tue, 9 May 2023 09:18:13 +0200
Subject: [PATCH 2/8] feat: :sparkles: add menu in header with profile and log
 out actions

---
 src/components/header.tsx | 87 ++++++++++++++++++++++++++++-----------
 1 file changed, 64 insertions(+), 23 deletions(-)

diff --git a/src/components/header.tsx b/src/components/header.tsx
index e9a3cc0..13f3921 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -2,18 +2,26 @@ import { useAuthMethods } from "@/hooks/useAuthMethods";
 import { usePocketBase } from "@/pocketbase";
 import { useAuth } from "@/pocketbase/auth";
 import {
-  ActionIcon,
   Anchor,
+  Avatar,
   Box,
   Button,
   Group,
   Header as MantineHeader,
   MediaQuery,
+  Menu,
+  Text,
   Title,
+  UnstyledButton,
   em,
   getBreakpointValue,
 } from "@mantine/core";
-import { IconCirclePlus, IconLogout } from "@tabler/icons-react";
+import {
+  IconCaretDown,
+  IconCirclePlus,
+  IconLogout,
+  IconUserCircle,
+} from "@tabler/icons-react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 
@@ -51,28 +59,61 @@ function Header({ signUpEnabled }: HeaderProps) {
         </Anchor>
         <Box sx={{ flexGrow: 1, width: "auto" }} />
         {user ? (
-          router.asPath !== "/posts/create" && (
-            <Group>
-              <Button
-                radius="xl"
-                variant="gradient"
-                size="md"
-                component={Link}
-                href="/posts/create"
-                leftIcon={<IconCirclePlus />}
-              >
-                <MediaQuery smallerThan="sm" styles={{ display: "none" }}>
-                  <Box>Create Post</Box>
-                </MediaQuery>
-                <MediaQuery largerThan="sm" styles={{ display: "none" }}>
+          <>
+            {router.asPath !== "/posts/create" && (
+              <Group>
+                <Button
+                  radius="xl"
+                  variant="gradient"
+                  size="md"
+                  component={Link}
+                  href="/posts/create"
+                  leftIcon={<IconCirclePlus />}
+                >
                   <Box>Post</Box>
-                </MediaQuery>
-              </Button>
-              <ActionIcon onClick={() => pb.authStore.clear()}>
-                <IconLogout />
-              </ActionIcon>
-            </Group>
-          )
+                </Button>
+              </Group>
+            )}
+            <Menu shadow="md" position="bottom-end">
+              <Menu.Target>
+                <UnstyledButton
+                  sx={(theme) => ({
+                    ":hover": {
+                      background: theme.colors.dark[4],
+                      borderRadius: theme.radius.md,
+                    },
+                  })}
+                  pr="sm"
+                  py={2}
+                >
+                  <Group>
+                    <Avatar radius="xl"></Avatar>
+                    <MediaQuery smallerThan="md" styles={{ display: "none" }}>
+                      <Text>{user.username}</Text>
+                    </MediaQuery>
+                    <IconCaretDown />
+                  </Group>
+                </UnstyledButton>
+              </Menu.Target>
+
+              <Menu.Dropdown>
+                <Menu.Item
+                  icon={<IconUserCircle />}
+                  component={Link}
+                  href={`/users/${user.id}`}
+                >
+                  Profile
+                </Menu.Item>
+                <Menu.Divider />
+                <Menu.Item
+                  icon={<IconLogout />}
+                  onClick={() => pb.authStore.clear()}
+                >
+                  Log Out
+                </Menu.Item>
+              </Menu.Dropdown>
+            </Menu>
+          </>
         ) : (
           <Group spacing="sm">
             <Button

From a05e44f2703e3d0346c5dfa8542848460b12b5db Mon Sep 17 00:00:00 2001
From: RaviAnand Mohabir <moravrav@gmail.com>
Date: Tue, 9 May 2023 09:18:31 +0200
Subject: [PATCH 3/8] feat: :lipstick: add background blur to full page
 dropzone

---
 src/components/layout.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/layout.tsx b/src/components/layout.tsx
index e563ec2..36f23fb 100644
--- a/src/components/layout.tsx
+++ b/src/components/layout.tsx
@@ -227,9 +227,10 @@ function Layout({ children, signUpEnabled, onFiles }: LayoutProps) {
           sx={(theme) => ({
             background: theme.fn.linearGradient(
               170,
-              theme.fn.rgba(theme.colors.blue[3], 0.7),
-              theme.fn.rgba(theme.colors.blue[5], 0.7)
+              theme.fn.rgba(theme.colors.blue[3], 0.5),
+              theme.fn.rgba(theme.colors.blue[5], 0.5)
             ),
+            backdropFilter: "blur(2px)",
             zIndex: 1000,
             pointerEvents: "none",
           })}

From 758f7bc34b86c17d00208d2077d40b71167b483c Mon Sep 17 00:00:00 2001
From: RaviAnand Mohabir <moravrav@gmail.com>
Date: Tue, 9 May 2023 09:18:54 +0200
Subject: [PATCH 4/8] fix: :bug: fix author is null in post view

---
 src/pages/posts/[id].tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/posts/[id].tsx b/src/pages/posts/[id].tsx
index 1477947..5d4fdfc 100644
--- a/src/pages/posts/[id].tsx
+++ b/src/pages/posts/[id].tsx
@@ -233,7 +233,7 @@ export default function Post(props: PostProps) {
         <Group sx={{ justifyContent: "center" }} align="start">
           <Stack maw="650px" miw="350px" sx={{ flex: 1, flexGrow: 1 }} px="md">
             {userIsAuthor ||
-              (post && (
+              (post?.expand.author && (
                 <Anchor
                   unstyled
                   component={Link}

From 6dd4df04b5b4096df5b5e26106707d121fe60ea6 Mon Sep 17 00:00:00 2001
From: RaviAnand Mohabir <moravrav@gmail.com>
Date: Tue, 9 May 2023 09:20:14 +0200
Subject: [PATCH 5/8] feat: :sparkles: add SSR to user page with metatags and
 user card with number of posts

---
 src/pages/users/[id].tsx | 154 ++++++++++++++++++++++++++++++---------
 1 file changed, 120 insertions(+), 34 deletions(-)

diff --git a/src/pages/users/[id].tsx b/src/pages/users/[id].tsx
index 705b442..1f29265 100644
--- a/src/pages/users/[id].tsx
+++ b/src/pages/users/[id].tsx
@@ -1,21 +1,40 @@
+import Head from "@/components/head";
 import Layout from "@/components/layout";
 import PostCard from "@/components/postCard";
 import { useCreatePost } from "@/hooks/useCreatePost";
-import { usePocketBase } from "@/pocketbase";
+import { initPocketBaseServer, usePocketBase } from "@/pocketbase";
 import { useAuth } from "@/pocketbase/auth";
 import { Post } from "@/pocketbase/models";
 import { ShareMeEnv, withEnv } from "@/utils/env";
 import { MEDIA_MIME_TYPE } from "@/utils/mediaTypes";
-import { Skeleton, Stack, Text, Title } from "@mantine/core";
+import {
+  Avatar,
+  Card,
+  Group,
+  Skeleton,
+  Stack,
+  Text,
+  Title,
+} from "@mantine/core";
 import { useIntersection } from "@mantine/hooks";
 import { GetServerSideProps } from "next";
 import { useRouter } from "next/router";
+import { Record } from "pocketbase";
 import { useEffect } from "react";
 import { useInfiniteQuery, useQuery } from "react-query";
 
-interface PostsProps extends ShareMeEnv {}
+interface PostsProps extends ShareMeEnv {
+  username: string;
+  avatar: string;
+  postsLength: number;
+}
 
-export default function Posts({ signUpEnabled }: PostsProps) {
+export default function Posts({
+  signUpEnabled,
+  postsLength,
+  username,
+  avatar,
+}: PostsProps) {
   const router = useRouter();
 
   const { id } = router.query;
@@ -82,39 +101,106 @@ export default function Posts({ signUpEnabled }: PostsProps) {
   }, [isLoading, hasNextPage, entry, isFetchingNextPage, fetchNextPage]);
 
   return (
-    <Layout
-      signUpEnabled={signUpEnabled}
-      onFiles={(files) => authenticatedUser && createPost(files)}
-    >
-      <Stack align="stretch" maw={450} m="0 auto">
-        {userData && <Title>Posts by {userData.username}</Title>}
-        {data?.pages.map((p) => (
-          <>
-            {p.items.map((p) => (
-              <PostCard key={p.id} post={p} maw="100%" />
-            ))}
-          </>
-        ))}
-        {(isFetchingNextPage || isLoading) &&
-          new Array(10)
-            .fill(null)
-            .map((_, i) => (
-              <Skeleton key={i} height={200} width="100%" maw={400} ref={ref} />
-            ))}
-        {hasNextPage && (
-          <Skeleton height={200} width="100%" maw={400} ref={ref} />
-        )}
-        <Text>
-          Showing {data?.pages.reduce((p, c) => p + c.items.length, 0)} /{" "}
-          {data?.pages[0].totalItems} Posts
-        </Text>
-      </Stack>
-    </Layout>
+    <>
+      <Head pageTitle={username} image={avatar} />
+
+      <Layout
+        signUpEnabled={signUpEnabled}
+        onFiles={(files) => authenticatedUser && createPost(files)}
+      >
+        <Stack align="stretch" maw={450} m="0 auto">
+          {userData && (
+            <Card>
+              <Card.Section bg="dark.8" p="md" pos="relative">
+                <Group>
+                  <Title>{username}</Title>
+                </Group>
+                <Avatar
+                  size="xl"
+                  radius={100}
+                  pos="absolute"
+                  bottom={-40}
+                  right={25}
+                  src={avatar}
+                ></Avatar>
+              </Card.Section>
+              <Card.Section p="md">
+                <Text>
+                  {postsLength} {postsLength > 1 ? "Posts" : "Post"}
+                </Text>
+              </Card.Section>
+            </Card>
+          )}
+          {data?.pages.map((p) => (
+            <>
+              {p.items.map((p) => (
+                <PostCard key={p.id} post={p} maw="100%" />
+              ))}
+            </>
+          ))}
+          {(isFetchingNextPage || isLoading) &&
+            new Array(10)
+              .fill(null)
+              .map((_, i) => (
+                <Skeleton
+                  key={i}
+                  height={200}
+                  width="100%"
+                  maw={400}
+                  ref={ref}
+                />
+              ))}
+          {hasNextPage && (
+            <Skeleton height={200} width="100%" maw={400} ref={ref} />
+          )}
+          <Text>
+            Showing {data?.pages.reduce((p, c) => p + c.items.length, 0)} /{" "}
+            {data?.pages[0].totalItems} Posts
+          </Text>
+        </Stack>
+      </Layout>
+    </>
   );
 }
 
-export const getServerSideProps: GetServerSideProps = async () => {
+export const getServerSideProps: GetServerSideProps<PostsProps> = async ({
+  req,
+  res,
+  query,
+}) => {
+  const pb = await initPocketBaseServer(req, res);
+
+  const { id } = query;
+
+  let user: Record | null = null;
+
+  try {
+    user = await pb.collection("users").getOne(Array.isArray(id) ? id[0] : id!);
+  } catch (ex) {
+    if ((ex as any).response.code === 404) {
+      return { notFound: true };
+    }
+    console.error(ex);
+  }
+
+  if (!user) {
+    return { notFound: true };
+  }
+
+  const avatar = pb.getFileUrl(user, user.avatar, {
+    thumb: "100x100",
+  });
+
+  const userPosts = await pb.collection("posts").getList<Post>(1, 20, {
+    expand: "files,author",
+    sort: "-created",
+    $autoCancel: false,
+    filter: `author.id = "${user.id}"`,
+  });
+
+  const postsLength = userPosts.totalItems;
+
   return {
-    props: withEnv({}),
+    props: withEnv({ avatar, postsLength, username: user.username }),
   };
 };

From 73b524831687ab4dba98ef1176b50950a04f2431 Mon Sep 17 00:00:00 2001
From: RaviAnand Mohabir <moravrav@gmail.com>
Date: Tue, 9 May 2023 11:06:18 +0200
Subject: [PATCH 6/8] feat: :sparkles: add link to author in `PostCard`

- Add on-click event to `PostCard` to avoid HTML validation errors
---
 src/components/postCard.tsx  | 90 +++++++++++++++++++-----------------
 src/components/postTitle.tsx | 25 +++++++---
 src/pages/index.tsx          |  6 +--
 3 files changed, 68 insertions(+), 53 deletions(-)

diff --git a/src/components/postCard.tsx b/src/components/postCard.tsx
index 6b23b59..a798102 100644
--- a/src/components/postCard.tsx
+++ b/src/components/postCard.tsx
@@ -1,17 +1,19 @@
 import { usePocketBase } from "@/pocketbase";
 import { Post } from "@/pocketbase/models";
 import { Carousel } from "@mantine/carousel";
-import { CardProps, Flex, Image, Paper, Stack } from "@mantine/core";
+import { Box, CardProps, Flex, Image, Paper, Stack } from "@mantine/core";
 import { IMAGE_MIME_TYPE } from "@mantine/dropzone";
 import Link from "next/link";
 import { Record } from "pocketbase";
 import PostTitle from "./postTitle";
+import { useRouter } from "next/router";
 
 interface PostCardProps extends Omit<CardProps, "children"> {
   post: Post;
 }
 
 function PostCard({ post, ...props }: PostCardProps) {
+  const router = useRouter();
   const pb = usePocketBase();
 
   return (
@@ -19,58 +21,60 @@ function PostCard({ post, ...props }: PostCardProps) {
       key={post.id}
       p={0}
       {...props}
-      component={Link}
-      href={`/posts/${post.id}`}
       sx={(theme) => ({
         ":hover": { background: theme.colors.dark[8] },
         overflow: "hidden",
+        cursor: "pointer",
       })}
       bg="dark.6"
       radius="md"
       miw={0}
+      onClick={() => router.push(`/posts/${post.id}`)}
     >
       <Stack mah="70vh">
         <PostTitle post={post} p="md" />
-        <Flex mih={0} w="100%" miw={0}>
-          <Carousel
-            withIndicators
-            onClickCapture={(ev) => ev.preventDefault()}
-            height="100%"
-            w="100%"
-          >
-            {Array.isArray(post.expand.files) &&
-              post.expand.files.map((f) => (
-                <Carousel.Slide key={f.id}>
-                  <Flex align="center" h="100%" w="100%" justify="center">
-                    {IMAGE_MIME_TYPE.includes(f.type) ? (
-                      <Image
-                        src={pb.files.getUrl(f, f.file)}
-                        sx={{ flex: 1 }}
-                        alt={
-                          post.title ||
-                          `Post by ${(post.expand.author as Record).username}`
-                        }
-                      />
-                    ) : (
-                      <video
-                        src={pb.files.getUrl(f, f.file)}
-                        muted
-                        autoPlay
-                        controls={false}
-                        style={{
-                          objectFit: "contain",
-                          objectPosition: "center",
-                          maxHeight: "100%",
-                          margin: "0 auto",
-                          display: "block",
-                        }}
-                      />
-                    )}
-                  </Flex>
-                </Carousel.Slide>
-              ))}
-          </Carousel>
-        </Flex>
+        <Box component={Link} href={`/posts/${post.id}`}>
+          <Flex mih={0} w="100%" miw={0}>
+            <Carousel
+              withIndicators
+              onClickCapture={(ev) => ev.preventDefault()}
+              height="100%"
+              w="100%"
+            >
+              {Array.isArray(post.expand.files) &&
+                post.expand.files.map((f) => (
+                  <Carousel.Slide key={f.id}>
+                    <Flex align="center" h="100%" w="100%" justify="center">
+                      {IMAGE_MIME_TYPE.includes(f.type) ? (
+                        <Image
+                          src={pb.files.getUrl(f, f.file)}
+                          sx={{ flex: 1 }}
+                          alt={
+                            post.title ||
+                            `Post by ${(post.expand.author as Record).username}`
+                          }
+                        />
+                      ) : (
+                        <video
+                          src={pb.files.getUrl(f, f.file)}
+                          muted
+                          autoPlay
+                          controls={false}
+                          style={{
+                            objectFit: "contain",
+                            objectPosition: "center",
+                            maxHeight: "100%",
+                            margin: "0 auto",
+                            display: "block",
+                          }}
+                        />
+                      )}
+                    </Flex>
+                  </Carousel.Slide>
+                ))}
+            </Carousel>
+          </Flex>
+        </Box>
       </Stack>
     </Paper>
   );
diff --git a/src/components/postTitle.tsx b/src/components/postTitle.tsx
index f67ce68..69ee8b9 100644
--- a/src/components/postTitle.tsx
+++ b/src/components/postTitle.tsx
@@ -1,6 +1,7 @@
 import { Post } from "@/pocketbase/models";
 import { getRelativeTime } from "@/utils/relativeTime";
 import {
+  Anchor,
   Avatar,
   Badge,
   Box,
@@ -11,6 +12,7 @@ import {
   Title,
   Tooltip,
 } from "@mantine/core";
+import Link from "next/link";
 import { Record } from "pocketbase";
 
 interface PostTitleProps extends BoxProps {
@@ -31,14 +33,23 @@ function PostTitle({ post, compact, ...props }: PostTitleProps) {
             {getRelativeTime(new Date(), new Date(post.created))}
           </Text>
         </Tooltip>
-        <Group spacing="sm">
-          <Text size="sm">{(post.expand.author as Record).username}</Text>
-          <Avatar radius="xl" size="sm"></Avatar>
-        </Group>
+        <Anchor
+          component={Link}
+          href={`/users/${(post.expand.author as Record).id}`}
+          sx={{ ":hover": { textDecoration: "underline" } }}
+          unstyled
+        >
+          <Group spacing="sm">
+            <Text size="sm">{(post.expand.author as Record).username}</Text>
+            <Avatar radius="xl" size="sm"></Avatar>
+          </Group>
+        </Anchor>
       </Flex>
-      <Title order={4}>
-        {post.title || `Post by ${(post.expand.author as Record).username}`}
-      </Title>
+      <Anchor component={Link} href={`/posts/${post.id}`} unstyled>
+        <Title order={4}>
+          {post.title || `Post by ${(post.expand.author as Record).username}`}
+        </Title>
+      </Anchor>
       {post.nsfw && <Badge color="red">NSFW</Badge>}
     </Box>
   );
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 9ce68f1..6216d33 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -88,8 +88,6 @@ export default function Home({ signUpEnabled }: HomeProps) {
                 <Card
                   key={post.id}
                   p={0}
-                  component={Link}
-                  href={`/posts/${post.id}`}
                   sx={(theme) => ({
                     ":hover": { background: theme.colors.dark[8] },
                     display: "flex",
@@ -112,6 +110,8 @@ export default function Home({ signUpEnabled }: HomeProps) {
                       display: "flex",
                       "&[data-last]": { marginBottom: 0 },
                     }}
+                    component={Link}
+                    href={`/posts/${post.id}`}
                   >
                     {Array.isArray(post.expand.files) && (
                       <Flex
@@ -169,7 +169,7 @@ export default function Home({ signUpEnabled }: HomeProps) {
                           >
                             <Center h="100%" w="100%">
                               <Box>
-                                <Text size="xl">
+                                <Text size="xl" color="white">
                                   {post.expand.files.length - 1} +
                                 </Text>
                               </Box>

From c540cde81e2af8956d1d6128ef8f8df2a87a17f8 Mon Sep 17 00:00:00 2001
From: RaviAnand Mohabir <moravrav@gmail.com>
Date: Tue, 9 May 2023 11:07:22 +0200
Subject: [PATCH 7/8] perf: :zap: use `next/script` to load Umami.js to improve
 client-side performance

---
 src/pages/_app.tsx | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 6d097ef..8bd90e5 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -5,6 +5,7 @@ import { MantineProvider } from "@mantine/core";
 import { Notifications } from "@mantine/notifications";
 import { AppProps } from "next/app";
 import Head from "next/head";
+import Script from "next/script";
 import PocketBase from "pocketbase";
 import { useRef } from "react";
 import { QueryClient, QueryClientProvider } from "react-query";
@@ -22,16 +23,17 @@ export default function App({ Component, pageProps }: AppProps<ShareMeEnv>) {
           name="viewport"
           content="minimum-scale=1, initial-scale=1, width=device-width"
         />
-        {pageProps.umami && (
-          <script
-            async
-            defer
-            data-website-id={pageProps.umami.websiteId}
-            src={pageProps.umami.umamiJs}
-          ></script>
-        )}
       </Head>
 
+      {pageProps.umami && (
+        <Script
+          async
+          defer
+          data-website-id={pageProps.umami.websiteId}
+          src={pageProps.umami.umamiJs}
+        ></Script>
+      )}
+
       <MantineProvider
         withGlobalStyles
         withNormalizeCSS

From 51d32763f1686f90207d27e89b60cd6aa336128b Mon Sep 17 00:00:00 2001
From: RaviAnand Mohabir <moravrav@gmail.com>
Date: Tue, 9 May 2023 11:44:15 +0200
Subject: [PATCH 8/8] feat: :sparkles: implement delete post

- Implement on post delete hook to cascade delete files
---
 server/main.go           | 15 +++++++++++++++
 src/pages/posts/[id].tsx | 33 ++++++++++++++++++++++++++++-----
 2 files changed, 43 insertions(+), 5 deletions(-)

diff --git a/server/main.go b/server/main.go
index a579c34..521846b 100644
--- a/server/main.go
+++ b/server/main.go
@@ -4,6 +4,7 @@ import (
 	"log"
 
 	"github.com/pocketbase/pocketbase"
+	"github.com/pocketbase/pocketbase/core"
 	"github.com/pocketbase/pocketbase/plugins/migratecmd"
 
 	// uncomment once you have at least one .go migration file in the "migrations" directory
@@ -17,6 +18,20 @@ func main() {
 		Automigrate: true, // auto creates migration files when making collection changes
 	})
 
+	app.OnRecordAfterDeleteRequest("posts", "delete").Add(func(e *core.RecordDeleteEvent) error {
+		if e.Record.Collection().Name != "posts" {
+			return nil
+		}
+
+		files, _ := app.Dao().FindRecordsByIds("files", e.Record.GetStringSlice("files"))
+
+		for _, f := range files {
+			_ = app.Dao().DeleteRecord(f)
+		}
+
+		return nil
+	})
+
 	if err := app.Start(); err != nil {
 		log.Fatal(err)
 	}
diff --git a/src/pages/posts/[id].tsx b/src/pages/posts/[id].tsx
index 5d4fdfc..4bd27d8 100644
--- a/src/pages/posts/[id].tsx
+++ b/src/pages/posts/[id].tsx
@@ -419,11 +419,34 @@ export default function Post(props: PostProps) {
                   )}
                 </CopyButton>
                 {userIsAuthor && (
-                  <Checkbox
-                    label="NSFW"
-                    checked={nsfw}
-                    onChange={(e) => setNsfw(e.target.checked)}
-                  />
+                  <>
+                    <Checkbox
+                      label="NSFW"
+                      checked={nsfw}
+                      onChange={(e) => setNsfw(e.target.checked)}
+                    />
+                    <Button
+                      variant="gradient"
+                      color="red"
+                      sx={(theme) => ({
+                        background: theme.fn.linearGradient(
+                          45,
+                          theme.colors.red[6],
+                          theme.colors.pink[5]
+                        ),
+                      })}
+                      onClick={() => {
+                        post &&
+                          pb
+                            .collection("posts")
+                            .delete(post.id)
+                            .then(() => router.push("/"))
+                            .catch((ex) => console.error(ex));
+                      }}
+                    >
+                      Delete
+                    </Button>
+                  </>
                 )}
               </Stack>
             </Paper>