added bookmarks page

frontend/src/routes/bookmarks.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Recipe } from "../components/Recipe";
+import { FullscreenLoading } from "../components/FullscreenLoading";
+import { Alert, AlertDescription, AlertTitle } from "../components/ui/alert";
+import { AlertCircle, Filter } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import { useGetMe } from "../services/api/semanticBrowseComponents";
+import { renderError } from "../services/api/semanticBrowseFetcher";
+
+// Inside the Bookmarks component
+export const Bookmarks = () => {
+  const navigate = useNavigate();
+  const { data: bookmarksData, isLoading, error } = useGetMe({});
+
+  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="mt-4 flex justify-between items-center">
+      <h1 className="text-2xl font-bold text-center">Bookmarks</h1>
+        <p>{bookmarksData?.data?.bookmarks && (
+            <span className="text-gray-500"> {bookmarksData.data?.bookmarks.length} recipes</span>
+            )}</p>
+      </div>
+      <div className="mt-4 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
+        {bookmarksData?.data?.bookmarks?.map((recipe) => (
+          <Recipe
+            key={recipe.id}
+            recipe={recipe}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};

frontend/src/routes/index.tsx

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