Untitled
plain_text
a month ago
5.3 kB
1
Indexable
Never
'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> ); }