feat: Add ArticleReaction component for managing article reactions

Author: kingRayhan

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

@@ -0,0 +1,42 @@
+"use client";
+
+import ReactionStatus from "@/components/render-props/ReactionStatus";
+import clsx from "clsx";
+import React from "react";
+
+interface Props {
+  article_id: string;
+}
+
+const ArticleReaction: React.FC<Props> = ({ article_id }) => {
+  return (
+    <ReactionStatus
+      resource_type="ARTICLE"
+      resource_id={article_id}
+      render={({ reactions, toggle }) => {
+        return (
+          <div className="flex gap-1">
+            {reactions.map((r) => (
+              <button
+                className={clsx(
+                  "px-2 py-1 flex gap-1 cursor-pointer rounded-sm hover:bg-primary/20",
+                  { "bg-primary/20": r.is_reacted }
+                )}
+                onClick={() => toggle(r.reaction_type!)}
+              >
+                <img
+                  src={`/reactions/${r.reaction_type}.svg`}
+                  alt={`reaction-${article_id}-${r.reaction_type}`}
+                  className="size-5 flex-none"
+                />
+                <span>{r.count}</span>
+              </button>
+            ))}
+          </div>
+        );
+      }}
+    />
+  );
+};
+
+export default ArticleReaction;

src/app/[username]/[articleHandle]/page.tsx

@@ -13,6 +13,9 @@ import { notFound } from "next/navigation";
 import type { Article, WithContext } from "schema-dts";
 import { eq } from "sqlkit";
 import ArticleSidebar from "./_components/ArticleSidebar";
+import ReactionStatus from "@/components/render-props/ReactionStatus";
+import clsx from "clsx";
+import ArticleReaction from "./_components/ArticleReaction";
 
 interface ArticlePageProps {
   params: Promise<{
@@ -150,6 +153,8 @@ const Page: NextPage<ArticlePageProps> = async ({ params }) => {
             <h1 className="text-2xl font-bold">{article?.title ?? ""}</h1>
           </div>
 
+          <ArticleReaction article_id={article.id} />
+
           <div className="mx-auto content-typography">{parsedHTML}</div>
         </div>
       </HomepageLayout>