Component Structure

Component Structure

The template is built based on the structure of components (Button, Image, Input, Dropdown, Cart, 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