🏖️
Chisfis - Online Booking NextJs template
DemoBuy now
  • Getting Started
  • Folder structure and organization
  • Dependencies
  • Installation
  • Custom color, fonts
  • CSS
  • Component Structure
  • How to fetch data
  • How to deploy
  • How to add metadata
  • Resources and assets
  • Support
  • Change log
    • Change log
  • How to?
    • How to Get Google Maps API Key for Free (in 5 easy steps)
    • Converting a Next.js project from TypeScript to plain JavaScript
Powered by GitBook
On this page

Was this helpful?

Component Structure

Component Structure

The template is built based on the structure of components (Button, Image, Input, Dropdown, Card, etc.), which makes it very easy to customize.

Example Breadcrumb component:

import clsx from 'clsx'
import Link from 'next/link'

const demoBreadcrumbs = [{ id: 1, name: 'Home', href: '/' }]

interface BreadcrumbProps {
  className?: string
  breadcrumbs?: { id: number; name: string; href: string }[]
  currentPage?: string
}

const Breadcrumb = ({ breadcrumbs = demoBreadcrumbs, className, currentPage = 'current page' }: BreadcrumbProps) => {
  return (
    <nav aria-label="Breadcrumb" className={clsx('text-xs/6 font-medium', className)}>
      <ol role="list" className="flex flex-wrap items-center gap-2">
        {breadcrumbs.map((breadcrumb) => (
          <li key={breadcrumb.id}>
            <div className="flex items-center gap-x-2">
              <Link href={breadcrumb.href} className="text-zinc-900 uppercase">
                {breadcrumb.name}
              </Link>
              <svg viewBox="0 0 6 20" aria-hidden="true" className="h-5 w-auto text-zinc-300">
                <path d="M4.878 4.34H3.551L.27 16.532h1.327l3.281-12.19z" fill="currentColor" />
              </svg>
            </div>
          </li>
        ))}
        <li>
          <span aria-current="page" className="text-zinc-500 uppercase hover:text-zinc-600">
            {currentPage}
          </span>
        </li>
      </ol>
    </nav>
  )
}

export default Breadcrumb
PreviousCSSNextHow to fetch data

Last updated 3 days ago

Was this helpful?