Basic vote mechanism implemented

src/components/pages/landing-page.tsx

@@ -1,15 +1,14 @@
 import React from "react";
+import { TrendingPosts } from "@/components/trending-posts";
+import { api, HydrateClient } from "@/trpc/server";
+
+const LandingPage: React.FC = async () => {
+  void api.post.getTrending.prefetch();
 
-const LandingPage: React.FC = () => {
   return (
-    <div>
-      <div className="m-6 h-full">
-        <h1 className="text-xl font-extrabold sm:text-[5rem]">
-          Contains
-          <span className="text-[hsl(280,100%,70%)]"> Gifs</span>
-        </h1>
-      </div>
-    </div>
+    <HydrateClient>
+      <TrendingPosts />
+    </HydrateClient>
   );
 };
 

src/components/pages/post/post-actions.tsx

@@ -19,16 +19,22 @@ const PostActions: React.FC<PostActionsProps> = ({ post }) => {
           await vote.mutateAsync({ slug: post.slug, up: true });
           voteCount.refetch();
         }}
-        icon={<Icons.up className="h-8 w-8" />}
+        icon={<Icons.up className="h-6 w-6" />}
       />
-      <div>{voteCount.data ? voteCount.data.toString() : "Loading..."}</div>
+      <div>
+        {voteCount.data ? (
+          voteCount.data.toString()
+        ) : (
+          <Icons.spinner className="animate-spin" />
+        )}
+      </div>
       <ActionButton
         title="Downvote"
         action={async () => {
           await vote.mutateAsync({ slug: post.slug, up: false });
           voteCount.refetch();
         }}
-        icon={<Icons.down className="h-8 w-8" />}
+        icon={<Icons.down className="h-6 w-6" />}
       />
       <ActionButton
         title="Favourite"
@@ -36,7 +42,7 @@ const PostActions: React.FC<PostActionsProps> = ({ post }) => {
           await vote.mutateAsync({ slug: post.slug, up: false });
           voteCount.refetch();
         }}
-        icon={<Icons.heart className="h-8 w-8" />}
+        icon={<Icons.heart className="h-6 w-6" />}
       />
     </div>
   );

src/server/api/routers/post.ts

@@ -18,7 +18,7 @@ export const postRouter = createTRPCRouter({
         .execute(sql`SELECT SUM(CASE WHEN up = TRUE THEN 1 ELSE -1 END)
             FROM public.votes v
             WHERE v.post_id = (SELECT id FROM posts WHERE slug = ${input.slug})`);
-      return count[0]?.sum ?? 0;
+      return count[0]?.sum ?? '0';
     }),
   getBySlug: publicProcedure
     .input(z.object({ slug: z.string() }))