Update navigation and recipe components

KiraLT · Nov 10, 2023 · a3fb469 · a3fb469
1 parent 6918e73
commit a3fb469
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 21 deletions.
diff --git a/src/components/navigation.tsx b/src/components/navigation.tsx
@@ -1,7 +1,8 @@
 'use client'
 
-import { FaMagnifyingGlass } from 'react-icons/fa6'
+import { FaMagnifyingGlass, FaBars, FaHouse, FaList } from 'react-icons/fa6'
 import { useRouter } from 'next/navigation'
+import { Navbar, Menu, Dropdown } from 'react-daisyui'
 
 import logo from 'public/logo.svg'
 import Link from 'next/link'
@@ -10,38 +11,64 @@ const links = [
     {
         name: 'Home',
         href: '/',
+        icon: <FaHouse />,
     },
     {
         name: 'Lists',
         href: '/lists',
+        icon: <FaList />,
     },
 ]
 
 export function Navigation(): JSX.Element {
     return (
-        <nav className="navbar bg-base-100">
-            <Link href="/" className="flex-1 hidden md:block">
-                {/* eslint-disable-next-line @next/next/no-img-element */}
-                <img className="h-8 md:h-10" src={logo.src} alt="" />
-            </Link>
-            <div className="flex-none">
-                <ul className="menu menu-horizontal px-1 items-center">
-                    <li className="md:mr-5">
-                        <SearchBar />
-                    </li>
+        <Navbar>
+            <Navbar.Start className="hidden md:block">
+                <Link href="/">
+                    {/* eslint-disable-next-line @next/next/no-img-element */}
+                    <img className="h-8 md:h-10" src={logo.src} alt="" />
+                </Link>
+            </Navbar.Start>
+            <Navbar.Center className="grow">
+                <SearchBar />
+            </Navbar.Center>
+            <Navbar.End className="shrink w-auto">
+                <Menu className="hidden md:flex" horizontal={true}>
                     {links.map((link) => (
-                        <li key={link.href}>
+                        <Menu.Item key={link.href}>
                             <Link
                                 className="p-3 hover:text-blue-700"
                                 href={link.href}
                             >
+                                {link.icon}
                                 {link.name}
                             </Link>
-                        </li>
+                        </Menu.Item>
                     ))}
-                </ul>
-            </div>
-        </nav>
+                </Menu>
+                <Dropdown className="md:hidden">
+                    <Dropdown.Toggle
+                        className="btn btn-ghost rounded-btn text-2xl"
+                        button={false}
+                    >
+                        <FaBars />
+                    </Dropdown.Toggle>
+                    <Dropdown.Menu className="w-100 mt-4 bg-base-300 z-50 !fixed inset-x-0">
+                        {links.map((link) => (
+                            <Menu.Item key={link.href}>
+                                <Link
+                                    className="p-3 hover:text-blue-700"
+                                    href={link.href}
+                                >
+                                    {link.icon}
+                                    {link.name}
+                                </Link>
+                            </Menu.Item>
+                        ))}
+                    </Dropdown.Menu>
+                </Dropdown>
+            </Navbar.End>
+        </Navbar>
     )
 }
 
@@ -50,7 +77,7 @@ function SearchBar(): JSX.Element {
 
     return (
         <form
-            className="flex items-center bg-base-200 p-2 rounded-full"
+            className="flex items-center bg-base-200 p-2 rounded-full w-full"
             onSubmit={(event) => {
                 event.preventDefault()
 
@@ -68,7 +95,7 @@ function SearchBar(): JSX.Element {
         >
             <FaMagnifyingGlass className="h-5 w-5 pt-0.5" />
             <input
-                className="ml-2 outline-none bg-transparent"
+                className="ml-2 outline-none bg-transparent w-full"
                 type="search"
                 name="query"
                 placeholder="Search..."

diff --git a/src/components/recipes.tsx b/src/components/recipes.tsx
@@ -28,7 +28,7 @@ export function Recipes({ recipes }: { recipes: Recipe[] }): JSX.Element {
                                     className="object-cover h-[16rem] w-[32rem] dark:opacity-60"
                                 />
                             </figure>
-                            <div className="card-body items-center text-center p-4">
+                            <div className="card-body items-center text-center p-4 bg-base-200">
                                 <h2 className="card-title">
                                     {recipe.data.name}
                                 </h2>

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -10,8 +10,8 @@ const config: Config = {
     ],
     plugins: [require('@tailwindcss/typography'), require('daisyui')],
     daisyui: {
-        themes: ['cupcake', 'night'],
-        darkTheme: 'night',
+        themes: ['cupcake', 'dark'],
+        darkTheme: 'dark',
         logs: false,
     },
 }