feat: add EditArticleButton component and integrate it into the article page

Author: kingRayhan

src/app/[username]/[articleHandle]/_components/ArticleReaction.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { useTranslation } from "@/i18n/use-translation";
+import { useSession } from "@/store/session.atom";
+import Link from "next/link";
+import React from "react";
+interface Props {
+  article_id: string;
+  article_author_id: string;
+}
+
+const EditArticleButton: React.FC<Props> = ({
+  article_id,
+  article_author_id,
+}) => {
+  const { _t } = useTranslation();
+  const session = useSession();
+
+  if (
+    !session?.session?.user_id ||
+    session.session.user_id !== article_author_id
+  ) {
+    return null;
+  }
+
+  return (
+    <Button size={"sm"} variant={"secondary"} asChild className=" py-[2px]">
+      <Link href={`/dashboard/articles/${article_id}`}>{_t("Edit")}</Link>
+    </Button>
+  );
+};
+
+export default EditArticleButton;

src/app/[username]/[articleHandle]/_components/EditArticleButton.tsx

@@ -20,6 +20,9 @@ import { eq } from "sqlkit";
 import ArticleSidebar from "./_components/ArticleSidebar";
 import ResourceBookmark from "@/components/ResourceBookmark";
 import Markdown from "@/lib/markdown/Markdown";
+import { Button } from "@/components/ui/button";
+import _t from "@/i18n/_t";
+import EditArticleButton from "./_components/EditArticleButton";
 
 interface ArticlePageProps {
   params: Promise<{
@@ -169,10 +172,20 @@ const Page: NextPage<ArticlePageProps> = async ({ params }) => {
               resource_type="ARTICLE"
               resource_id={article.id}
             />
-            <ResourceBookmark
-              resource_type="ARTICLE"
-              resource_id={article.id}
-            />
+
+            <div className="flex gap-1.5 items-center">
+              {article.user?.id && (
+                <EditArticleButton
+                  article_id={article.id}
+                  article_author_id={article.user?.id}
+                />
+              )}
+
+              <ResourceBookmark
+                resource_type="ARTICLE"
+                resource_id={article.id}
+              />
+            </div>
           </div>
 
           <div className="mx-auto content-typography">