Build a Finance SaaS Platform -3 (Header)

Add Header

Add components/header.tsx

import React from 'react'
import HeaderLogo from './header-logo'
import Navigation from './navigation'

export default function Header() {
  return (
    <div className='bg-gradient-to-b from-blue-700 to-blue-500 px-4 py-8 lg:px-14 pb-36'>
      <div className='max-w-screen-2xl mx-auto'>
        <div className='w-full flex items-center justify-between mb-14'>
          <div className='flex items-center lg:gap-x-16'>
            <HeaderLogo />
            <Navigation />
          </div>
        </div>
      </div>
    </div>
  )
}

Add Headlogo

Add components/header-logo.tsx

import React from 'react';
import Link from 'next/link';
import Image from 'next/image';

export default function HeaderLogo() {
  return (
    <Link href='/'>
      <div className='items-center hidden lg:flex'>
        <Image src='/vim-logo.svg' alt='logo' height={28} width={28} />
        <p className='font-semibold text-white text-2xl ml-2.5'>
          Finance
        </p>
      </div>
    </Link>
  )
}

Add Navigation

Add components/navigation.tsx

"use client"

import React from 'react'
import { usePathname } from 'next/navigation';

import NavButton from './nav-buttion';

const routes = [
  {
    href: '/',
    label: 'Overview',
  },
  {
    href: '/transactions',
    label: 'Transactions',
  },
  {
    href: '/accounts',
    label: 'Accounts',
  },
  {
    href: '/categories',
    label: 'Categories',
  },
  {
    href: '/settings',
    label: 'Settings',
  },
]

export default function Navigation() {
  const pathName = usePathname();

  return (
    <nav className='hidden lg:flex items-center gap-x-2 overflow-x-auto'>
      { routes.map((route)=>(
        <NavButton 
          key= {route.href}
          href={route.href}
          label={route.label}
          isActive={pathName === route.href}
        />
      ))}
    </nav>
  )
}

Add Nav-Buttion

Add components/nav-buttion.tsx

import React from 'react'
import  Link  from 'next/link';

import { Button } from './ui/button';
import { cn } from '@/lib/utils';

type Props = {
  href: string;
  label: string;
  isActive ?:boolean;
}

export default function NavButton({
  href,
  label,
  isActive,
}:Props) {
  return (
    <Button
      asChild
      size="sm"
      variant="outline"
      className={cn(
        "w-full lg:w-auto justify-center font-normal hover:bg-white/20 hover:text-white border-none focus-visible:ring-transparent outline-none text-white focus:bg-white/30 transition",
        isActive ? "bg-white/10 text-white" : "bg-transparent",
      )}
    >
      <Link href={href}>
        {label}
      </Link>
    </Button>
  )
}