Untitled

'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';

export default function TopBar() {
   const pathname = usePathname();
   const currentQr =
      pathname.split('/')[2]?.charAt(0).toUpperCase() +
      pathname.split('/')[2]?.slice(1);
   console.log(currentQr);

   return (
      <header className='fixed top-0 z-50 bg-white w-full h-14 shadow-slate-200 shadow'>
         <div className='flex items-center h-full px-4'>
            <nav
               className='flex items-center py-2 px-5 text-gray-500 border border-slate-200 rounded-full'
               aria-label='Breadcrumb'
            >
               <ol className='inline-flex items-center space-x-1 md:space-x-3'>
                  <li className='inline-flex items-center'>
                     <Link
                        href='/new-qr'
                        className={`inline-flex gap-1 items-center text-sm font-medium  ${
                           pathname === '/new-qr'
                              ? 'text-blue-700'
                              : 'text-gray-500'
                        }  hover:text-blue-600 dark:text-gray-400 dark:hover:text-white`}
                     >
                        <svg
                           xmlns='http://www.w3.org/2000/svg'
                           fill='none'
                           viewBox='0 0 24 24'
                           strokeWidth='1.5'
                           stroke='currentColor'
                           className={`w-5 h-5 ${
                              currentQr && 'text-green-500'
                           }`}
                        >
                           <path
                              strokeLinecap='round'
                              strokeLinejoin='round'
                              d='M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 013.75 9.375v-4.5zM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0113.5 9.375v-4.5z'
                           />
                           <path
                              strokeLinecap='round'
                              strokeLinejoin='round'
                              d='M6.75 6.75h.75v.75h-.75v-.75zM6.75 16.5h.75v.75h-.75v-.75zM16.5 6.75h.75v.75h-.75v-.75zM13.5 13.5h.75v.75h-.75v-.75zM13.5 19.5h.75v.75h-.75v-.75zM19.5 13.5h.75v.75h-.75v-.75zM19.5 19.5h.75v.75h-.75v-.75zM16.5 16.5h.75v.75h-.75v-.75z'
                           />
                        </svg>
                        Type of QR
                     </Link>
                  </li>
                  <li>
                     <div className='flex items-center'>
                        <svg
                           className='w-3 h-3 mx-1 text-gray-400'
                           aria-hidden='true'
                           xmlns='http://www.w3.org/2000/svg'
                           fill='none'
                           viewBox='0 0 6 10'
                        >
                           <path
                              stroke='currentColor'
                              strokeLinecap='round'
                              strokeLinejoin='round'
                              strokeWidth='2'
                              d='m1 9 4-4-4-4'
                           />
                        </svg>
                        <a
                           href='#'
                           className={`ml-1 text-sm font-medium ${
                              currentQr ? 'text-blue-600' : 'text-gray-500'
                           }  hover:text-blue-600 md:ml-2 dark:text-gray-400 dark:hover:text-white`}
                        >
                           {currentQr ? currentQr : 'Content'}
                        </a>
                     </div>
                  </li>
                  <li>
                     <div className='flex items-center'>
                        <svg
                           className='w-3 h-3 mx-1 text-gray-400'
                           aria-hidden='true'
                           xmlns='http://www.w3.org/2000/svg'
                           fill='none'
                           viewBox='0 0 6 10'
                        >
                           <path
                              stroke='currentColor'
                              strokeLinecap='round'
                              strokeLinejoin='round'
                              strokeWidth='2'
                              d='m1 9 4-4-4-4'
                           />
                        </svg>
                        <a
                           href='#'
                           className='ml-1 text-sm font-medium text-gray-500 hover:text-blue-600 md:ml-2 dark:text-gray-400 dark:hover:text-white'
                        >
                           QR Code
                        </a>
                     </div>
                  </li>
               </ol>
            </nav>
         </div>
      </header>
   );
}