Merge pull request #35 from Glider6014/nav-and-fav-recipes

Glider6014 · Nov 25, 2024 · befcafc · befcafc
2 parents 38e71e0 + bd358bb
commit befcafc
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 15 deletions.
diff --git a/app/recipes/[id]/page.tsx b/app/recipes/[id]/page.tsx
@@ -2,6 +2,7 @@
 
 import { useState, useEffect } from "react";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Navbar } from "@/components/Navbar";
 import { Badge } from "@/components/ui/badge";
 import {
   Table,
@@ -11,6 +12,7 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
+import { Logo } from "@/components/Logo";
 
 export default function RecipePage({ params }: { params: { id: string } }) {
   const [recipe, setRecipe] = useState<any>(null);
@@ -54,13 +56,17 @@ export default function RecipePage({ params }: { params: { id: string } }) {
   if (!recipe) {
     return (
       <div className="container mx-auto py-8 flex justify-center">
-        <p>Recipe not found</p>
+        <div className="text-center pt-10">
+          <Logo className="text-5xl md:text-9xl" />
+          <p className="mt-4 text-2xl font-bold text-black">Recipe not found</p>
+        </div>
       </div>
     );
   }
 
   return (
-    <div className="container mx-auto py-8">
+    <div className="container mx-auto pt-3 pb-5">
+      <Navbar />
       <Card>
         <CardHeader>
           <CardTitle className="text-3xl font-bold">{recipe.name}</CardTitle>

diff --git a/app/recipes/page.tsx b/app/recipes/page.tsx
@@ -1,6 +1,7 @@
 import { RecipesList } from "@/components/RecipesList";
 import connectDB from "@/lib/connectToDatabase";
 import Recipe, { RecipeType } from "@/models/Recipe";
+import { Navbar } from "@/components/Navbar";
 
 type RecipesPageProps = {
   recipes: RecipeType[];
@@ -13,8 +14,11 @@ const RecipesPage = async () => {
     .lean();
 
   return (
-    <div>
-      <h2 className="text-2xl font-bold mb-4">Recipes List</h2>
+    <div className="p-3">
+      <Navbar />
+      <h2 className="text-2xl font-bold mb-4 text-center bg-gray-300 p-5 text-gray-700">
+        Recipes List
+      </h2>
       <RecipesList recipes={JSON.parse(JSON.stringify(recipes))} />
     </div>
   );

diff --git a/app/user/signin/page.tsx b/app/user/signin/page.tsx
@@ -62,7 +62,7 @@ export default function Home() {
       <div className="flex w-full max-w-6xl items-center justify-between flex-col md:flex-row">
         {/* Title and description section */}
         <div className="w-full md:w-1/2 pr-8 mb-8 md:mb-0">
-          <Logo mobileFontSize="text-4xl" desktopFontSize="text-6xl" />
+          <Logo className="text-4xl md:text-6xl" />
           <p className="text-xl mt-4 text-gray-600 leading-relaxed hidden md:block">
             Welcome to Kanapka AI - your intelligent assistant. Sign in, to
             start using our unique features.

diff --git a/app/user/signup/page.tsx b/app/user/signup/page.tsx
@@ -104,7 +104,7 @@ export default function Home() {
       <div className="flex flex-col w-full max-w-6xl items-center justify-center">
         {/* Title - Kanapka AI */}
         <div className="mb-8">
-          <Logo mobileFontSize="text-4xl" desktopFontSize="text-6xl" />
+          <Logo className="text-4xl md:text-6xl" />
         </div>
 
         {/* Form */}

diff --git a/app/user/status/page.tsx b/app/user/status/page.tsx
@@ -18,7 +18,7 @@ export default function Home() {
   return (
     <main className="min-h-screen p-8">
       <div className="flex justify-center mb-6">
-        <Logo mobileFontSize="text-4xl" desktopFontSize="text-6xl" />
+        <Logo className="text-4xl md:text-6xl" />
       </div>
       <div className="max-w-2xl mx-auto space-y-6">
         {/* Session Status */}

diff --git a/components/Logo.tsx b/components/Logo.tsx
@@ -1,16 +1,12 @@
 interface LogoProps {
-  mobileFontSize: string;
-  desktopFontSize: string;
+  className: string;
 }
 
-export const Logo: React.FC<LogoProps> = ({
-  mobileFontSize,
-  desktopFontSize,
-}) => {
+export const Logo: React.FC<LogoProps> = ({ className }) => {
   return (
     <a
       href="/"
-      className={`font-bold bg-gradient-to-r from-purple-700 to-orange-500 bg-clip-text text-transparent ${mobileFontSize} md:${desktopFontSize}`}
+      className={`font-bold bg-gradient-to-r from-purple-700 to-orange-500 bg-clip-text text-transparent ${className}`}
     >
       Kanapka AI
     </a>

diff --git a/components/Navbar.tsx b/components/Navbar.tsx
@@ -16,7 +16,7 @@ export const Navbar = () => {
   return (
     <nav className="mb-4 mt-1 flex flex-col md:flex-row items-center justify-between gap-4">
       <div className="flex justify-between w-full md:w-auto">
-        <Logo mobileFontSize="text-2xl" desktopFontSize="text-3xl" />
+        <Logo className="text-4xl md:text-5xl" />
         <div className="md:hidden">
           <DropdownMenu />
         </div>