NippoBreadcrumbs を詳細画面で表示した

itizawa · Dec 17, 2023 · 851b8f7 · 851b8f7
1 parent d6501bc
commit 851b8f7
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 3 deletions.
diff --git a/src/app/[slug]/[date]/_components/NippoBreadcrumbs.tsx b/src/app/[slug]/[date]/_components/NippoBreadcrumbs.tsx
@@ -0,0 +1,24 @@
+'use client';
+
+import { BreadcrumbItem, Breadcrumbs, Link } from '@nextui-org/react';
+import { FC } from 'react';
+import { URLS } from '~/app/_constants/urls';
+import { Objective } from '~/domains/Objective';
+
+type Props = {
+  objective: Objective;
+  date: string;
+};
+
+export const NippoBreadcrumbs: FC<Props> = ({ objective, date }) => {
+  return (
+    <Breadcrumbs>
+      <BreadcrumbItem>
+        <Link href={URLS.SLUG(objective.slug)} className="text-black">
+          {objective.name}
+        </Link>
+      </BreadcrumbItem>
+      <BreadcrumbItem>{date}</BreadcrumbItem>
+    </Breadcrumbs>
+  );
+};
diff --git a/src/app/[slug]/[date]/page.tsx b/src/app/[slug]/[date]/page.tsx
@@ -1,12 +1,12 @@
 import { Metadata } from 'next';
+import { NippoBreadcrumbs } from './_components/NippoBreadcrumbs';
 import { getNippoByDate } from '~/app/_actions/nippoActions';
 import { getObjectiveBySlug } from '~/app/_actions/objectiveActions';
 import { URLS } from '~/app/_constants/urls';
 import { generateNippoMetadata } from '~/libs/generateNippoMetadata';
 import { fetchMe } from '~/app/_actions/userActions';
 import { NippoEditor } from '~/app/_components/domains/Nippo/NippoEditor';
 import { getDateString } from '~/libs/getDateString';
-import { ObjectiveStickyHeader } from '~/app/_components/domains/Objective/ObjectiveStickyHeader';
 import { NippoPreview } from '~/app/_components/domains/Nippo/NippoPreview';
 
 type Props = { params: { slug: string; date: string } };
@@ -29,8 +29,8 @@ export default async function Page({ params }: Props) {
   return (
     <div className="drop-shadow-sm">
       <div className="min-h-[500px] max-w-[1024px] mx-auto flex gap-[16px] md:gap-[48px]">
-        <div className="px-[8px] pt-[16px] pb-[32px] w-[100%]">
-          <ObjectiveStickyHeader objective={objective} />
+        <div className="px-[8px] pt-[8px] pb-[32px] w-[100%]">
+          <NippoBreadcrumbs objective={objective} date={dateString} />
           <p className="mt-[32px] text-xl font-bold mb-[8px] text-gray-700">{dateString}</p>
           {currentUser?._id === objective.createdUserId ? (
             <NippoEditor objectiveId={objective._id} nippo={nippo} />