feat: Homepage (#37)

app/(browse)/(home)/_components/result-card.tsx

@@ -0,0 +1,58 @@
+import { Thumbnail, ThumbnailSkeleton } from "@/components/thumbnail";
+import { Skeleton } from "@/components/ui/skeleton";
+import { UserAvatar, UserAvatarSkeleton } from "@/components/user-avatar";
+import { Stream, User } from "@prisma/client";
+import Link from "next/link";
+import React from "react";
+
+interface ResultsCardProps {
+  data: {
+    user: User;
+    isLive: boolean;
+    name: string;
+    thumbnailUrl: string | null;
+  };
+}
+
+export const ResultsCard = ({ data }: ResultsCardProps) => {
+  return (
+    <Link href={`/${data.user.username}`}>
+      <div className="h-dull w-full space-y-4">
+        <Thumbnail
+          src={data.thumbnailUrl}
+          fallback={data.user.imageUrl}
+          isLive={data.isLive}
+          username={data.user.username}
+        />
+        <div className="flex gap-x-3">
+          <UserAvatar
+            username={data.user.username}
+            imageUrl={data.user.imageUrl}
+            isLive={data.isLive}
+          />
+          <div className="flex flex-col text-sm overflow-hidden">
+            <p className="truncate font-semibold hover:text-blue-500">
+              {data.name}
+            </p>
+            <p className="text-muted-foreground">{data.user.username}</p>
+          </div>
+        </div>
+      </div>
+    </Link>
+  );
+};
+
+export const ResultCardSkeleton = () => {
+  return (
+    <div className="h-full w-full space-y-4">
+      <ThumbnailSkeleton />
+      <div className="flex gap-x-3">
+        <UserAvatarSkeleton />
+        <div className="flex flex-col gap-y-1">
+          <Skeleton className="h-4 w-32" />
+          <Skeleton className="h-3 w-24" />
+        </div>
+      </div>
+    </div>
+  );
+};

app/(browse)/(home)/_components/results.tsx

@@ -0,0 +1,37 @@
+import { Skeleton } from "@/components/ui/skeleton";
+import { getStreams } from "@/lib/feed-service";
+import React from "react";
+import { ResultCardSkeleton, ResultsCard } from "./result-card";
+
+export const Results = async () => {
+  const data = await getStreams();
+
+  return (
+    <div>
+      <h2 className="text-lg font-semibold mb-4">
+        Streams we think you&apos;ll like
+      </h2>
+      {data.length === 0 && (
+        <div className="text-muted-foreground text-sm">No streams found.</div>
+      )}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4">
+        {data.map((result) => (
+          <ResultsCard key={result.id} data={result} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export const ResultsSkeleton = () => {
+  return (
+    <div>
+      <Skeleton className="h-4 w-[290px] mb-4" />
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4">
+        {[...Array(4)].map((_, i) => (
+          <ResultCardSkeleton key={i} />
+        ))}
+      </div>
+    </div>
+  );
+};

app/(browse)/(home)/page.tsx

@@ -1,9 +1,12 @@
+import { Suspense } from "react";
+import { Results, ResultsSkeleton } from "./_components/results";
+
 export default function Home() {
   return (
-    <div className="p-6">
-      <div className="mb-4">
-        <h1 className="text-2xl font-semibold">Home</h1>
-      </div>
+    <div className="h-full p-8 max-w-screen-2xl mx-auto">
+      <Suspense fallback={<ResultsSkeleton />}>
+        <Results />
+      </Suspense>
     </div>
   );
 }

components/thumbnail.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import { Skeleton } from "./ui/skeleton";
+import { LiveBadge } from "./live-badge";
+import { UserAvatar } from "./user-avatar";
+import Image from "next/image";
+
+interface ThumbnailProps {
+  src: string | null;
+  fallback: string;
+  isLive: boolean;
+  username: string;
+}
+
+export const Thumbnail = ({
+  src,
+  fallback,
+  isLive,
+  username,
+}: ThumbnailProps) => {
+  let content;
+
+  if (!src) {
+    content = (
+      <div className="bg-background flex flex-col items-center justify-center gap-y-4 h-full w-full transition-transform group-hover:translate-x-2 group-hover:-translate-y-2 rounded-md">
+        <UserAvatar
+          size="lg"
+          showBadge
+          username={username}
+          imageUrl={fallback}
+          isLive={isLive}
+        />
+      </div>
+    );
+  } else {
+    content = (
+      <Image
+        src={src}
+        fill
+        alt="Thumbnail"
+        className="object-cover transition-transform group-hover:translate-x-2 group-hover:-translate-y-2 rounded-md"
+      />
+    );
+  }
+
+  return (
+    <div className="group aspect-video relative rounded-md cursor-pointer">
+      <div className="rounded-md absolute inset-0 bg-blue-600 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center" />
+      {content}
+      {isLive && src && (
+        <div className="absolute top-2 left-2 group-hover:translate-x-2 group-hover:-translate-y-2 transition-transform">
+          <LiveBadge />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const ThumbnailSkeleton = () => {
+  return (
+    <div className="group aspect-video relative rounded-xl cursor-pointer">
+      <Skeleton className="h-full w-full" />
+    </div>
+  );
+};

lib/feed-service.ts

@@ -0,0 +1,67 @@
+import { getSelf } from "./auth-service";
+import { db } from "./db";
+
+export const getStreams = async () => {
+  let userId;
+
+  try {
+    const self = await getSelf();
+
+    userId = self.id;
+  } catch (error) {
+    userId = null;
+  }
+
+  let streams = [];
+
+  if (userId) {
+    streams = await db.stream.findMany({
+      where: {
+        user: {
+          NOT: {
+            blocking: {
+              some: {
+                blockedId: userId,
+              },
+            },
+          },
+        },
+      },
+      select: {
+        id: true,
+        user: true,
+        isLive: true,
+        name: true,
+        thumbnailUrl: true,
+      },
+      orderBy: [
+        {
+          isLive: "desc",
+        },
+        {
+          updatedAt: "desc",
+        },
+      ],
+    });
+  } else {
+    streams = await db.stream.findMany({
+      select: {
+        id: true,
+        user: true,
+        isLive: true,
+        name: true,
+        thumbnailUrl: true,
+      },
+      orderBy: [
+        {
+          isLive: "desc",
+        },
+        {
+          updatedAt: "desc",
+        },
+      ],
+    });
+  }
+
+  return streams;
+};

package.json

@@ -9,7 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@clerk/nextjs": "^4.27.7",
+    "@clerk/nextjs": "^4.29.3",
     "@clerk/themes": "^1.7.9",
     "@livekit/components-react": "^1.4.2",
     "@prisma/client": "^5.7.1",