styling

frontend/src/components/RecipeBookTabs.tsx

@@ -0,0 +1,66 @@
+import React, { useState } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+
+const RecipeBookTabs = () => {
+  const location = useLocation();
+
+  const tabs = [
+    { id: '/', label: 'All Recipes', icon: '📚' },
+    { id: '/recipe/', label: 'Recipe', icon: '🥗' },
+    { id: '/search', label: 'Search', icon: '🔎' },
+    { id: '/add-recipe', label: 'Add Recipe', icon: '➕' },
+    { id: '/about', label: 'About', icon: '🍽️' },
+  ];
+
+  return (
+    <div className="bg-gradient-to-b from-amber-50 to-orange-50 h-16 flex-shrink-0 rounded-tl-lg rounded-tr-lg">
+      {/* Navigation Tabs */}
+      <div className="relative h-full">
+        {/* Tab Background Line */}
+        <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-amber-200"></div>
+
+        {/* Tabs Container */}
+        <div className="flex space-x-1 px-6 pt-4 h-full items-end justify-center">
+          {tabs.map((tab) => {
+            const isActive = location.pathname === tab.id || (location.pathname.startsWith(tab.id) && tab.id === "/recipe/");
+
+            return (
+              <Link
+                key={tab.id}
+                to={tab.id}
+                className={`
+                  relative px-6 py-3 rounded-t-lg font-medium text-sm transform
+                  ${isActive
+                    ? 'bg-amber-100 text-amber-800 scale-105 z-10 border-t-2 border-amber-200'
+                    : 'bg-amber-200 text-amber-600 hover:bg-amber-100 hover:text-amber-700 hover:scale-102 shadow-sm'
+                  }
+                  before:absolute before:bottom-0 before:left-0 before:right-0 before:h-0.5 
+                  ${isActive ? '' : ''}
+                `}
+              >
+                <div className="flex items-center space-x-2">
+                  <span className="text-lg">{tab.icon}</span>
+                  <span>{tab.label}</span>
+                </div>
+
+                {/* Tab Shadow Effect */}
+                {isActive && (
+                  <>
+                    <div className="absolute -left-2 bottom-0 w-2 h-2 bg-white">
+                      <div className="absolute top-0 left-0 w-2 h-2 bg-amber-200 rounded-br-lg"></div>
+                    </div>
+                    <div className="absolute -right-2 bottom-0 w-2 h-2 bg-white">
+                      <div className="absolute top-0 right-0 w-2 h-2 bg-amber-200 rounded-bl-lg"></div>
+                    </div>
+                  </>
+                )}
+              </Link>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default RecipeBookTabs;