feat(social): post comments page

omsimos · Aug 16, 2024 · 384d09c · 384d09c
1 parent f344e48
commit 384d09c
Show file tree

Hide file tree

Showing 5 changed files with 165 additions and 4 deletions.
diff --git a/apps/social/src/app/(authentication)/login/page.tsx b/apps/social/src/app/(authentication)/login/page.tsx
@@ -45,7 +45,7 @@ export default async function Login() {
   }
 
   return (
-    <section className="container pt-16 lg:pt-20 flex flex-col items-center">
+    <section className="container pt-10 flex flex-col items-center">
       <BrowserWarning />
       <div className="border-b-2 border-muted border-dashed pb-5 mb-10 sm:text-center inline-block">
         <h1 className="font-bold md:text-6xl text-[10vw] leading-none dark:bg-gradient-to-b from-foreground dark:to-zinc-400 bg-clip-text bg-zinc-800 text-transparent tracking-tighter text-nowrap">

diff --git a/apps/social/src/app/components/feed.tsx b/apps/social/src/app/components/feed.tsx
@@ -2,6 +2,7 @@ import { PostCard } from "./post-card";
 
 const data = [
   {
+    id: "C-r5lAwpJUg",
     imageUrl:
       "https://lh3.googleusercontent.com/a/ACg8ocK4CtuGuDZlPy9H_DMb3EQIue9Hrd5bqYcMZOY-Xb8LcuyqsBI=s96-c",
     username: "umamin",
@@ -15,6 +16,7 @@ const data = [
     comments: 9,
   },
   {
+    id: "C-r5lAwpJUg",
     imageUrl:
       "https://lh3.googleusercontent.com/a/ACg8ocJf40m8VVe3wNxhgBe11Bm7ukLSPeR0SDPPg6q8wq6NYRZtCYk=s96-c",
     username: "josh",
@@ -32,7 +34,7 @@ const data = [
 export function Feed() {
   return (
     <main>
-      <section className="mt-12 pt-6 w-full max-w-lg mx-auto space-y-6 bg-background border-t border-muted">
+      <section className="pt-6 w-full max-w-lg mx-auto space-y-6 bg-background border-t border-muted">
         {data.map((props) => (
           <PostCard key={props.createdAt} {...props} />
         ))}

diff --git a/apps/social/src/app/components/post-card.tsx b/apps/social/src/app/components/post-card.tsx
@@ -9,6 +9,7 @@ import { shortTimeAgo } from "@/lib/utils";
 import { BadgeCheck, Heart, MessageCircle, ScanFace } from "lucide-react";
 
 type Props = {
+  id: string;
   imageUrl: string;
   username: string;
   displayName: string;
@@ -68,7 +69,70 @@ export function PostCard(props: Props) {
           </div>
 
           <div className="flex space-x-1 items-center">
-            <MessageCircle className="h-5 w-5" />
+            <Link href={`/post/${props.id}`}>
+              <MessageCircle className="h-5 w-5" />
+            </Link>
+            <span>{props.comments}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function PostCardMain(props: Props) {
+  return (
+    <div className="container border border-muted py-6 bg-card rounded-md sm:px-6">
+      <div className="flex justify-center gap-3">
+        <Avatar>
+          <AvatarImage src={props.imageUrl} alt="User avatar" />
+          <AvatarFallback>
+            <ScanFace />
+          </AvatarFallback>
+        </Avatar>
+
+        <div className="flex justify-between w-full items-center text-sm">
+          <div className="flex items-center space-x-1">
+            <Link
+              href={`/user/${props.username}`}
+              className="font-semibold hover:underline"
+            >
+              {props.displayName}
+            </Link>
+
+            {props.isVerified && (
+              <BadgeCheck className="w-4 h-4 text-pink-500" />
+            )}
+            <span className="text-muted-foreground">@{props.username}</span>
+          </div>
+
+          <p className="text-muted-foreground text-xs">
+            {shortTimeAgo(props.createdAt)}
+          </p>
+        </div>
+      </div>
+
+      <div className="text-sm w-full">
+        <p className="text-sm mt-1">{props.content}</p>
+
+        <div className="flex items-center space-x-4 text-muted-foreground mt-4">
+          <div
+            className={cn("flex space-x-1 items-center", {
+              "text-pink-500": props.isLiked,
+            })}
+          >
+            <Heart
+              className={cn("h-5 w-5", {
+                "fill-pink-500": props.isLiked,
+              })}
+            />
+            <span>{props.likes}</span>
+          </div>
+
+          <div className="flex space-x-1 items-center">
+            <Link href={`/post/${props.id}`}>
+              <MessageCircle className="h-5 w-5" />
+            </Link>
             <span>{props.comments}</span>
           </div>
         </div>

diff --git a/apps/social/src/app/layout.tsx b/apps/social/src/app/layout.tsx
@@ -90,7 +90,7 @@ export default function RootLayout({
             }}
           />
           <Navbar />
-          {children}
+          <div className="pt-24">{children}</div>
         </ThemeProvider>
       </body>
 

diff --git a/apps/social/src/app/post/[id]/page.tsx b/apps/social/src/app/post/[id]/page.tsx
@@ -0,0 +1,95 @@
+import { PostCard, PostCardMain } from "../../components/post-card";
+
+const postData = {
+  id: "C-r5lAwpJUg",
+  imageUrl:
+    "https://lh3.googleusercontent.com/a/ACg8ocK4CtuGuDZlPy9H_DMb3EQIue9Hrd5bqYcMZOY-Xb8LcuyqsBI=s96-c",
+  username: "umamin",
+  displayName: "Umamin Official",
+  createdAt: 1718604131,
+  content:
+    "An open-source social platform built exclusively for the Umamin community. Umamin v2.0 requires a new account that can be used across the platform.",
+  isLiked: true,
+  isVerified: true,
+  likes: 24,
+  comments: 9,
+};
+
+const repliesData = [
+  {
+    id: "C-r5lAwpJUg",
+    imageUrl:
+      "https://lh3.googleusercontent.com/a/ACg8ocKpLSOuzPnPwOYTFC88ENWUU_7ieMdwtQZ9UzkqCJaRbnpUELk=s96-c",
+    username: "Dale",
+    displayName: "Dale Hyamero",
+    createdAt: 1718342984,
+    content:
+      "Next generation open-source platform for sending and receiving encrypted anonymous messages. Umamin v2.0 requires a new account that can be used across the platform.",
+    isLiked: false,
+    isVerified: false,
+    likes: 10,
+    comments: 6,
+  },
+  {
+    id: "C-r5lAwpJUg",
+    imageUrl:
+      "https://lh3.googleusercontent.com/a/ACg8ocJf40m8VVe3wNxhgBe11Bm7ukLSPeR0SDPPg6q8wq6NYRZtCYk=s96-c",
+    username: "josh",
+    displayName: "Josh Daniel",
+    createdAt: 1718342984,
+    content:
+      "We're building Umamin Social, a new platform to connect the community. Coming soon! 🚀",
+    isLiked: false,
+    isVerified: false,
+    likes: 7,
+    comments: 4,
+  },
+  {
+    id: "C-r5lAwpJUg",
+    imageUrl:
+      "https://lh3.googleusercontent.com/a/ACg8ocKpLSOuzPnPwOYTFC88ENWUU_7ieMdwtQZ9UzkqCJaRbnpUELk=s96-c",
+    username: "Dale",
+    displayName: "Dale Hyamero",
+    createdAt: 1718342984,
+    content:
+      "Next generation open-source platform for sending and receiving encrypted anonymous messages. Umamin v2.0 requires a new account that can be used across the platform.",
+    isLiked: false,
+    isVerified: false,
+    likes: 10,
+    comments: 6,
+  },
+  {
+    id: "C-r5lAwpJUg",
+    imageUrl:
+      "https://lh3.googleusercontent.com/a/ACg8ocJf40m8VVe3wNxhgBe11Bm7ukLSPeR0SDPPg6q8wq6NYRZtCYk=s96-c",
+    username: "josh",
+    displayName: "Josh Daniel",
+    createdAt: 1718342984,
+    content:
+      "We're building Umamin Social, a new platform to connect the community. Coming soon! 🚀",
+    isLiked: false,
+    isVerified: false,
+    likes: 7,
+    comments: 4,
+  },
+];
+
+export default function Post() {
+  return (
+    <main>
+      <section className="w-full max-w-lg mx-auto bg-background">
+        <PostCardMain key={postData.createdAt} {...postData} />
+
+        <div className="w-full container py-4 border-b mb-6 font-medium text-muted-foreground">
+          Replies
+        </div>
+
+        <div className="space-y-6">
+          {repliesData.map((reply) => {
+            return <PostCard key={reply.createdAt} {...reply} />;
+          })}
+        </div>
+      </section>
+    </main>
+  );
+}