chore(social): add navbar

apps/social/package.json

@@ -27,6 +27,7 @@
     "@urql/next": "^1.1.1",
     "@whatwg-node/server": "^0.9.46",
     "arctic": "^1.8.1",
+    "date-fns": "^3.6.0",
     "geist": "^1.3.1",
     "gql.tada": "^1.8.5",
     "graphql": "^16.9.0",

apps/social/src/app/(authentication)/login/page.tsx

@@ -45,7 +45,7 @@ export default async function Login() {
   }
 
   return (
-    <section className="max-w-lg md:max-w-md container mt-36 min-h-screen">
+    <section className="max-w-lg md:max-w-md container mt-24 min-h-screen">
       <BrowserWarning />
 
       <div className="mb-6">

apps/social/src/app/(authentication)/register/page.tsx

@@ -45,7 +45,7 @@ export default async function Register() {
   }
 
   return (
-    <section className="max-w-lg md:max-w-md container mt-36 min-h-screen">
+    <section className="max-w-lg md:max-w-md container mt-24 min-h-screen">
       <BrowserWarning />
 
       <div className="mb-6">

apps/social/src/app/components/feed.tsx

@@ -0,0 +1,42 @@
+import { PostCard } from "./post-card";
+
+const data = [
+  {
+    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.",
+    isLiked: true,
+    isVerified: true,
+    likes: 24,
+    comments: 9,
+  },
+  {
+    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 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-t-muted">
+        {data.map((props) => (
+          <PostCard key={props.createdAt} {...props} />
+        ))}
+      </section>
+    </main>
+  );
+}

apps/social/src/app/components/navbar.tsx

@@ -0,0 +1,29 @@
+import Link from "next/link";
+import { logout } from "@/actions";
+import { getSession } from "@/lib/auth";
+import { SignOutButton } from "./sign-out-btn";
+import { Button } from "@umamin/ui/components/button";
+
+export async function Navbar() {
+  const { session } = await getSession();
+
+  return (
+    <nav className="py-5 container md:px-0 flex justify-between items-center max-w-lg">
+      <Link href="/" aria-label="logo">
+        <span className="text-muted-foreground font-medium">social.</span>
+        <span className="font-semibold text-foreground">umamin</span>
+        <span className="text-muted-foreground font-medium">.link</span>
+      </Link>
+
+      {session ? (
+        <form action={logout}>
+          <SignOutButton />
+        </form>
+      ) : (
+        <Button asChild type="submit" variant="outline">
+          <Link href="/login">Login</Link>
+        </Button>
+      )}
+    </nav>
+  );
+}

apps/social/src/app/components/post-card.tsx

@@ -0,0 +1,78 @@
+import Link from "next/link";
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@umamin/ui/components/avatar";
+import { cn } from "@umamin/ui/lib/utils";
+import { shortTimeAgo } from "@/lib/utils";
+import { BadgeCheck, Heart, MessageCircle, ScanFace } from "lucide-react";
+
+type Props = {
+  imageUrl: string;
+  username: string;
+  displayName: string;
+  createdAt: number;
+  content: string;
+  isLiked: boolean;
+  isVerified: boolean;
+  likes: number;
+  comments: number;
+};
+
+export function PostCard(props: Props) {
+  return (
+    <div className="flex space-x-3 sm:px-0 container border-b border-b-muted pb-6">
+      <Avatar>
+        <AvatarImage src={props.imageUrl} alt="User avatar" />
+        <AvatarFallback>
+          <ScanFace />
+        </AvatarFallback>
+      </Avatar>
+
+      <div className="text-sm w-full">
+        <div className="flex justify-between">
+          <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>
+
+        <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">
+            <MessageCircle className="h-5 w-5" />
+            <span>{props.comments}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/social/src/app/components/sign-out-btn.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { Loader2 } from "lucide-react";
+import { useFormStatus } from "react-dom";
+import { Button } from "@umamin/ui/components/button";
+
+export function SignOutButton() {
+  const { pending } = useFormStatus();
+
+  return (
+    <Button
+      data-testid="logout-btn"
+      type="submit"
+      disabled={pending}
+      variant="outline"
+    >
+      {pending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+      Sign Out
+    </Button>
+  );
+}

apps/social/src/app/layout.tsx

@@ -5,6 +5,7 @@ import { GeistSans } from "geist/font/sans";
 import NextTopLoader from "nextjs-toploader";
 import type { Metadata, Viewport } from "next";
 
+import { Navbar } from "./components/navbar";
 import { ThemeProvider } from "@umamin/ui/components/theme-provider";
 
 export const viewport: Viewport = {
@@ -88,6 +89,7 @@ export default function RootLayout({
               },
             }}
           />
+          <Navbar />
           {children}
         </ThemeProvider>
       </body>

apps/social/src/app/page.tsx

@@ -1,20 +1,9 @@
-import { logout } from "@/actions";
-import { getSession } from "@/lib/auth";
-import { Button } from "@umamin/ui/components/button";
-
-export default async function Home() {
-  const { session } = await getSession();
+import { Feed } from "./components/feed";
 
+export default function Home() {
   return (
     <main>
-      <h1>Hello World</h1>
-      {session && (
-        <form action={logout}>
-          <Button type="submit" variant="outline">
-            Sign Out
-          </Button>
-        </form>
-      )}
+      <Feed />
     </main>
   );
 }

apps/social/src/lib/utils.ts

@@ -0,0 +1,36 @@
+import { formatDistanceToNow, fromUnixTime } from "date-fns";
+
+export function shortTimeAgo(epoch: number) {
+  const distance = formatDistanceToNow(fromUnixTime(epoch));
+
+  if (distance === "less than a minute") {
+    return "just now";
+  }
+
+  const minutesMatch = distance.match(/(\d+)\s+min/);
+  if (minutesMatch) {
+    return `${minutesMatch[1]}m`;
+  }
+
+  const hoursMatch = distance.match(/(\d+)\s+hour/);
+  if (hoursMatch) {
+    return `${hoursMatch[1]}h`;
+  }
+
+  const daysMatch = distance.match(/(\d+)\s+day/);
+  if (daysMatch) {
+    return `${daysMatch[1]}d`;
+  }
+
+  const monthsMatch = distance.match(/(\d+)\s+month/);
+  if (monthsMatch) {
+    return `${monthsMatch[1]}mo`;
+  }
+
+  const yearsMatch = distance.match(/(\d+)\s+year/);
+  if (yearsMatch) {
+    return `${yearsMatch[1]}y`;
+  }
+
+  return distance;
+}