feat: create UI components breadcrumb

Overview

The task is to create a shared UI component for breadcrumb.

Changes

Added breadcrumb component from shadcn/ui and styled it based on figma

Screenshots or videos

▼Figma Without Chevron

With Chevron Screenshot 2024-04-04 at 10 20 52 PM

▼Sample page(code) Screenshot 2024-04-04 at 10 33 57 PM

Notes(3 notes)

[1] Deleted Elements:

I have removed the component represented by the ellipsis (...) in the form of <BreadcrumbEllipsis /> as there are no plans to utilize it in this project. Screenshot 2024-04-04 at 10 25 10 PM

[2] Regarding the adjusted styles:

1. Gap Adjustment: Initially, a gap of 1.5 was set as default. However, retaining the gap element resulted in excessive spacing when adding the '>' character. Therefore, we have opted to remove the gap. In cases where no '>' character is present, additional margin may be required. Nevertheless, for better flexibility during page creation, we have chosen to maintain consistency without the gap.

2. Text Color: By default, breadcrumb elements other than the current one had a slight gray tint. However, to align with the design in Figma, I have standardized the text color to white (text-white). Additionally, we have removed the hover settings and kept the color consistent as white. (*As discussed and agreed upon during the meeting held on April 4, 2024).

[3] Confirmation Method:

I'm conducting production confirmation based on the code of the Link component.

▼ Reference: To confirm including the Home icon, you can do so by following the steps below.

import { Home } from 'lucide-react';　//Homeアイコンを呼び出す
import Link from 'next/link';

function BreadcrumbCustomized() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink>
            <Link href="/">
              <Home className="w-6 h-6" />
            </Link>
          </BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Current page</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

Additional note: Regarding the Home icon For the Home icon, it's preferable to adjust its size to match the text size, with a width of 24px and a height of 24px (w-6 h-6). *Note: After trying several sizes, we found that this setting was most suitable for the design, so we have implemented it accordingly.

Assignee Checklist:

[x] The base branch is correct (no accidental merges)
[x] The branch name follows our branch naming rules
[x] The PR title follows our PR title rules
[x] My code follows our coding style
[x] I have commented on my code, particularly in hard-to-understand areas
[x] My changes generate no new warnings or errors in the console

Reviewer Checklist:

[x] Code readability and simplicity
[x] Follows best practices and coding standards
[x] Understandable and maintainable code
[x] Don't use wildcard* when some components are imported.

Tascurator / tascurator-frontend