Merge pull request #21 from T1LT/add-button

feat: add floating add recipe button

Author: T1LT

app/(recipes)/layout.tsx

@@ -1,4 +1,5 @@
 import Navbar from "@/components/navbar";
+import FloatingAddButton from "@/components/floating-add-button";
 
 export const metadata = {
   openGraph: {
@@ -23,6 +24,7 @@ export default function RecipesLayout({
     <>
       <Navbar />
       <div className="w-full flex justify-center px-4 py-12">{children}</div>
+      <FloatingAddButton />
     </>
   );
 }

app/user/layout.tsx

@@ -1,4 +1,5 @@
 import Navbar from "@/components/navbar";
+import FloatingAddButton from "@/components/floating-add-button";
 
 export default function RecipesLayout({
   children,
@@ -9,6 +10,7 @@ export default function RecipesLayout({
     <>
       <Navbar />
       <div className="w-full flex justify-center px-4 py-12">{children}</div>
+      <FloatingAddButton />
     </>
   );
 }

components/floating-add-button.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { Plus } from "lucide-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+export default function FloatingAddButton() {
+  const pathname = usePathname();
+
+  // Don't show the button on the add page
+  if (pathname === "/add") {
+    return null;
+  }
+
+  return (
+    <div className="fixed bottom-6 right-0 left-0 z-50 flex justify-center">
+      <div className="max-w-5xl w-full px-4 lg:px-0 flex justify-end">
+        <Link
+          href="/add"
+          className="w-14 h-14 rounded-full backdrop-filter bg-background/40 backdrop-blur border flex items-center justify-center hover:bg-background/60 transition-all duration-200 shadow-lg hover:shadow-xl"
+          aria-label="Add new recipe"
+        >
+          <Plus className="h-6 w-6" />
+        </Link>
+      </div>
+    </div>
+  );
+}

components/sso-buttons.tsx

@@ -10,9 +10,9 @@ export default function SSOButtons() {
   return (
     <div className="w-full mt-4">
       <div className="flex items-center gap-2 mb-4">
-        <hr className="flex-1 border-gray-300" />
-        <span className="text-xs text-gray-500">OR</span>
-        <hr className="flex-1 border-gray-300" />
+        <hr className="flex-1 border-muted-foreground" />
+        <span className="text-xs text-muted-foreground">OR</span>
+        <hr className="flex-1 border-muted-foreground" />
       </div>
 
       <Button