From 59002317674a8e3cd0acc7c70a530a1b85376e92 Mon Sep 17 00:00:00 2001
From: Brad Traversy <traversymedia@gmail.com>
Date: Mon, 8 Jul 2024 14:39:39 -0400
Subject: [PATCH] Initial pages and Navbar

---
 app/layout.jsx               |   2 +
 app/page.jsx                 |  12 ++-
 app/properties/[id]/page.jsx |   4 +
 app/properties/add/page.jsx  |   4 +
 app/properties/page.jsx      |   5 +
 components/Navbar.jsx        | 176 +++++++++++++++++++++++++++++++++++
 6 files changed, 200 insertions(+), 3 deletions(-)
 create mode 100644 app/properties/[id]/page.jsx
 create mode 100644 app/properties/add/page.jsx
 create mode 100644 app/properties/page.jsx
 create mode 100644 components/Navbar.jsx

diff --git a/app/layout.jsx b/app/layout.jsx
index dbc1f61..a90d051 100644
--- a/app/layout.jsx
+++ b/app/layout.jsx
@@ -1,3 +1,4 @@
+import Navbar from '@/components/Navbar';
 import '@/assets/styles/globals.css';
 
 export const metadata = {
@@ -10,6 +11,7 @@ const MainLayout = ({ children }) => {
   return (
     <html lang='en'>
       <body>
+        <Navbar />
         <main>{children}</main>
       </body>
     </html>
diff --git a/app/page.jsx b/app/page.jsx
index daf815c..adc67c2 100644
--- a/app/page.jsx
+++ b/app/page.jsx
@@ -1,5 +1,11 @@
-const HomePage = () => {
-  return <h1 className='text-2xl'>HomePage</h1>;
-};
+import Link from 'next/link';
 
+const HomePage = () => {
+  return (
+    <div>
+      <h1 className='text-3xl'>Welcome</h1>
+      <Link href='/properties'>Properties</Link>
+    </div>
+  );
+};
 export default HomePage;
diff --git a/app/properties/[id]/page.jsx b/app/properties/[id]/page.jsx
new file mode 100644
index 0000000..ff7fa43
--- /dev/null
+++ b/app/properties/[id]/page.jsx
@@ -0,0 +1,4 @@
+const PropertyPage = () => {
+  return <div>PropertyPage</div>;
+};
+export default PropertyPage;
diff --git a/app/properties/add/page.jsx b/app/properties/add/page.jsx
new file mode 100644
index 0000000..e57dde3
--- /dev/null
+++ b/app/properties/add/page.jsx
@@ -0,0 +1,4 @@
+const AddPropertyPage = () => {
+  return <div>AddPropertyPage</div>;
+};
+export default AddPropertyPage;
diff --git a/app/properties/page.jsx b/app/properties/page.jsx
new file mode 100644
index 0000000..a539ad5
--- /dev/null
+++ b/app/properties/page.jsx
@@ -0,0 +1,5 @@
+const PropertiesPage = () => {
+  return <div>PropertiesPage</div>;
+};
+
+export default PropertiesPage;
diff --git a/components/Navbar.jsx b/components/Navbar.jsx
new file mode 100644
index 0000000..06b0615
--- /dev/null
+++ b/components/Navbar.jsx
@@ -0,0 +1,176 @@
+import Link from 'next/link';
+import Image from 'next/image';
+import logo from '@/assets/images/logo-white.png';
+import profileDefault from '@/assets/images/profile.png';
+
+const Navbar = () => {
+  return (
+    <nav className='bg-blue-700 border-b border-blue-500'>
+      <div className='mx-auto max-w-7xl px-2 sm:px-6 lg:px-8'>
+        <div className='relative flex h-20 items-center justify-between'>
+          <div className='absolute inset-y-0 left-0 flex items-center md:hidden'>
+            {/* <!-- Mobile menu button--> */}
+            <button
+              type='button'
+              id='mobile-dropdown-button'
+              className='relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white'
+              aria-controls='mobile-menu'
+              aria-expanded='false'
+            >
+              <span className='absolute -inset-0.5'></span>
+              <span className='sr-only'>Open main menu</span>
+              <svg
+                className='block h-6 w-6'
+                fill='none'
+                viewBox='0 0 24 24'
+                strokeWidth='1.5'
+                stroke='currentColor'
+                aria-hidden='true'
+              >
+                <path
+                  strokeLinecap='round'
+                  strokeLinejoin='round'
+                  d='M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5'
+                />
+              </svg>
+            </button>
+          </div>
+
+          <div className='flex flex-1 items-center justify-center md:items-stretch md:justify-start'>
+            {/* <!-- Logo --> */}
+            <Link className='flex flex-shrink-0 items-center' href='/'>
+              <Image className='h-10 w-auto' src={logo} alt='PropertyPulse' />
+
+              <span className='hidden md:block text-white text-2xl font-bold ml-2'>
+                PropertyPulse
+              </span>
+            </Link>
+            {/* <!-- Desktop Menu Hidden below md screens --> */}
+            <div className='hidden md:ml-6 md:block'>
+              <div className='flex space-x-2'>
+                <Link
+                  href='/'
+                  className='text-white bg-black hover:bg-gray-900 hover:text-white rounded-md px-3 py-2'
+                >
+                  Home
+                </Link>
+                <Link
+                  href='/properties'
+                  className='text-white hover:bg-gray-900 hover:text-white rounded-md px-3 py-2'
+                >
+                  Properties
+                </Link>
+                <Link
+                  href='/properties/add'
+                  className='text-white hover:bg-gray-900 hover:text-white rounded-md px-3 py-2'
+                >
+                  Add Property
+                </Link>
+              </div>
+            </div>
+          </div>
+
+          {/* <!-- Right Side Menu (Logged Out) --> */}
+          <div className='hidden md:block md:ml-6'>
+            <div className='flex items-center'>
+              <button className='flex items-center text-white bg-gray-700 hover:bg-gray-900 hover:text-white rounded-md px-3 py-2'>
+                <i className='fa-brands fa-google text-white mr-2'></i>
+                <span>Login or Register</span>
+              </button>
+            </div>
+          </div>
+
+          {/* <!-- Right Side Menu (Logged In) --> */}
+          <div className='absolute inset-y-0 right-0 flex items-center pr-2 md:static md:inset-auto md:ml-6 md:pr-0'>
+            <Link href='/messages' className='relative group'>
+              <button
+                type='button'
+                className='relative rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800'
+              >
+                <span className='absolute -inset-1.5'></span>
+                <span className='sr-only'>View notifications</span>
+                <svg
+                  className='h-6 w-6'
+                  fill='none'
+                  viewBox='0 0 24 24'
+                  strokeWidth='1.5'
+                  stroke='currentColor'
+                  aria-hidden='true'
+                >
+                  <path
+                    strokeLinecap='round'
+                    strokeLinejoin='round'
+                    d='M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0'
+                  />
+                </svg>
+              </button>
+              <span className='absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white transform translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full'>
+                2
+                {/* <!-- Replace with the actual number of notifications --> */}
+              </span>
+            </Link>
+            {/* <!-- Profile dropdown button --> */}
+            <div className='relative ml-3'>
+              <div>
+                <button
+                  type='button'
+                  className='relative flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800'
+                  id='user-menu-button'
+                  aria-expanded='false'
+                  aria-haspopup='true'
+                >
+                  <span className='absolute -inset-1.5'></span>
+                  <span className='sr-only'>Open user menu</span>
+                  <Image
+                    className='h-8 w-8 rounded-full'
+                    src={profileDefault}
+                    alt=''
+                  />
+                </button>
+              </div>
+
+              {/* <!-- Profile dropdown --> */}
+              <div
+                id='user-menu'
+                className='hidden absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none'
+                role='menu'
+                aria-orientation='vertical'
+                aria-labelledby='user-menu-button'
+                tabIndex='-1'
+              >
+                <Link
+                  href='/profile'
+                  className='block px-4 py-2 text-sm text-gray-700'
+                  role='menuitem'
+                  tabIndex='-1'
+                  id='user-menu-item-0'
+                >
+                  Your Profile
+                </Link>
+                <Link
+                  href='properties/saved'
+                  className='block px-4 py-2 text-sm text-gray-700'
+                  role='menuitem'
+                  tabIndex='-1'
+                  id='user-menu-item-2'
+                >
+                  Saved Properties
+                </Link>
+                <Link
+                  href='#'
+                  className='block px-4 py-2 text-sm text-gray-700'
+                  role='menuitem'
+                  tabIndex='-1'
+                  id='user-menu-item-2'
+                >
+                  Sign Out
+                </Link>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+};
+export default Navbar;