added comment and comments page

frontend/src/components/Comment.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { UserSummary } from "@/services/api/semanticBrowseSchemas";
+
+
+interface Comment {
+    author: UserSummary;
+    upvoteCount: number;
+    content: string;
+    createdAt: string;
+}
+
+export const Comment = ({ 
+    comment : {author, upvoteCount, content, createdAt},
+}: {
+    comment: Comment;
+}) => {
+  return (
+    <div className="flex flex-col self-stretch ">
+      <Card className="flex flex-1 flex-col bg-gray-100 pt-16">
+        <CardHeader className="py-2">
+          <div className="flex justify-between">
+          <div className="flex gap-2 items-center">
+            <img src={author.profilePicture} alt="Author" className="w-16 h-16 mr-2 rounded-full" />
+            <p className="text-lg font-medium text-gray-900">{author.username}</p>
+          </div>
+          <div className="flex gap-2">
+            <p className="text-sm text-gray-500">{createdAt}</p>
+            <p className="text-sm text-gray-500">{upvoteCount} Upvotes</p>
+          </div>
+          </div>
+        </CardHeader>
+        <CardContent className="flex flex-1 flex-col justify-between gap-2">
+            <p className="text-sm text-gray-500">{content} </p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+

frontend/src/routes/commentsPage.tsx

@@ -0,0 +1,48 @@
+import { useState } from "react";
+import { Comment } from "../components/Comment";
+import { FullscreenLoading } from "../components/FullscreenLoading";
+import { Alert, AlertDescription, AlertTitle } from "../components/ui/alert";
+import { AlertCircle, ArrowLeft } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import { useGetCommentsForRecipe } from "../services/api/semanticBrowseComponents";
+import { renderError } from "../services/api/semanticBrowseFetcher";
+
+export const Comments = () => {
+  const navigate = useNavigate();
+  const { data: commentData, isLoading, error } = useGetCommentsForRecipe({
+    pathParams: { recipeId: 123 }, // Update the recipeId with the actual recipeId
+  });
+
+  if (isLoading) {
+    return <FullscreenLoading overlay />;
+  }
+
+  if (error) {
+    return (
+      <div className="container flex flex-col gap-2 py-8">
+        <Alert variant="destructive">
+          <AlertCircle className="h-4 w-4" />
+          <AlertTitle>Error</AlertTitle>
+          <AlertDescription>{renderError(error)}</AlertDescription>
+        </Alert>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container flex flex-col gap-2 py-8">
+      <div className="flex justify-between items-center">
+        <ArrowLeft className="cursor-pointer h-6 w-6 text-gray-700" onClick={() => navigate("/")} />
+        <h1 className="text-2xl font-bold mx-auto">Comments</h1>
+      </div>
+      <div className="mt-4 grid grid-cols-1 gap-8">
+        {commentData?.data?.reverse().map((comment) => (
+          <Comment
+            key={comment.id}
+            comment={comment}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};

frontend/src/routes/home.tsx

@@ -1,5 +1,5 @@
 import { SearchBar } from "../components/SearchBar";
-import { Recipe } from "../components/Recipe";
+
 
 export function IndexRoute() {
   return (

frontend/src/routes/index.tsx

@@ -5,6 +5,7 @@ import { IndexRoute } from "./home";
 import { signout } from "../services/auth";
 import { Search } from "./search";
 import { Feed } from "./feed";
+import { Comments } from "./commentsPage";
 import { NavbarLayout } from "../components/NavbarLayout";
 
 export const routes: RouteObject[] = [
@@ -24,6 +25,10 @@ export const routes: RouteObject[] = [
     path: "/feed",
     Component: Feed,
   },
+  {
+    path: "/commentsPage",
+    Component: Comments,
+  },
   {
     index: true,
     Component: IndexRoute,