パンくずリスト

Author: nakamuraitsuki

src/app/news/[slug]/page.tsx

@@ -53,7 +53,7 @@ export default async function NewsDetail({ params }: Props) {
           <Breadcrumb
             items={[
               { title: 'Top', href: '/' },
-              { title: 'news', href: '/news' },
+              { title: 'News', href: '/news' },
               { title: data.title, href: `/news/${slug}` },
             ]}
           />

src/app/news/page.tsx

@@ -3,6 +3,7 @@ import { Metadata } from 'next';
 import Link from 'next/link';
 import { getMarkdowns } from '../../utils/markdown';
 import style from './page.module.scss';
+import { Breadcrumb } from '@/components/Breadcrumb';
 import { HeroImage } from '@/components/HeroImage';
 import { NewsPageList } from '@/components/news-page-list/news-page-list';
 
@@ -27,15 +28,12 @@ export default async function News() {
       <main className={style.main}>
         <div className={style.hero}>
           <HeroImage title='新着情報' type='default' blur={true} />
-          <div className={style.breadcrumb}>
-            <Link href='/' className={style.breadcrumbLink}>
-              Top
-            </Link>
-            <p className={style.breadcrumbLink}>&nbsp;&gt;&nbsp;</p>
-            <Link href='/news' className={style.breadcrumbLink}>
-              News
-            </Link>
-          </div>
+          <Breadcrumb
+            items={[
+              { title: 'Top', href: '/' },
+              { title: 'News', href: '/news' },
+            ]}
+          />
         </div>
         <div className={style.contents}>
           <h1 className={style.contentTitle}>ニュース一覧</h1>