From dc90be862221a15610197956afe09d06a2efec34 Mon Sep 17 00:00:00 2001 From: RizqiSyahrendra <rizqialaudinsyahrendra@gmail.com> Date: Wed, 5 Mar 2025 22:52:42 +0700 Subject: [PATCH] fix: staff member detail - add slug - responsive styling --- .../[slug]/page.tsx | 37 ++++++++++++------- src/components/Blocks/OurTeam/index.tsx | 1 + src/components/Team.tsx | 33 ++++++++++------- src/components/Teams/CardTeam.tsx | 14 ------- src/services/payload/team.ts | 5 +-- 5 files changed, 46 insertions(+), 44 deletions(-) rename src/app/(main)/{biography => staff_member}/[slug]/page.tsx (79%) diff --git a/src/app/(main)/biography/[slug]/page.tsx b/src/app/(main)/staff_member/[slug]/page.tsx similarity index 79% rename from src/app/(main)/biography/[slug]/page.tsx rename to src/app/(main)/staff_member/[slug]/page.tsx index 1daf0bc..a5b242a 100644 --- a/src/app/(main)/biography/[slug]/page.tsx +++ b/src/app/(main)/staff_member/[slug]/page.tsx @@ -1,36 +1,45 @@ import { BeforeFooterBlock } from "@/components/Blocks/BeforeFooter"; import HeroOther from "@/components/HeroOther"; import { fetchTeamDetail } from "@/services/payload/team"; +import { getDefaultMetadata } from "@/utils/metadata"; import { RichText } from "@payloadcms/richtext-lexical/react"; import Image from "next/image"; import { Metadata } from "next/types"; import { Suspense } from "react"; export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> { - const name = "Cochise Oncology"; + const defaultMetadata = await getDefaultMetadata(); + const name = defaultMetadata.openGraph?.siteName ?? ""; let title = "Page"; - let description = "Page"; let imgUrl = ""; const slug = (await params).slug; - const blog = await fetchTeamDetail(decodeURIComponent(slug)); + const team = await fetchTeamDetail(decodeURIComponent(slug)); // check for blog data - if (!!blog) { - title = `${name} Staff - ${blog.data.name}`; - description = `${name} Staff - ${blog.data.name}`; - imgUrl = blog.imgUrl; + if (!!team) { + title = `${team.data.name} - ${name}`; + imgUrl = team.imgUrl; } - return { + defaultMetadata.title = title; + if (!!defaultMetadata.openGraph) { + // @ts-ignore + defaultMetadata.openGraph.type = "article"; + defaultMetadata.openGraph.title = title; + defaultMetadata.openGraph.images = !!imgUrl ? [imgUrl] : undefined; + } + defaultMetadata.twitter = { + card: "summary_large_image", title: title, - description: description, - openGraph: { - title: title, - description: description, - images: !!imgUrl ? { url: imgUrl } : undefined, - }, + images: !!imgUrl ? [imgUrl] : undefined, }; + defaultMetadata.other = { + "twitter:label1": "Est. reading time", + "twitter:data1": "1 minute", + }; + + return defaultMetadata; } export default async function BiographySinglePage({ params }: { params: Promise<{ slug: string }> }) { diff --git a/src/components/Blocks/OurTeam/index.tsx b/src/components/Blocks/OurTeam/index.tsx index 3340c2f..aca1d93 100644 --- a/src/components/Blocks/OurTeam/index.tsx +++ b/src/components/Blocks/OurTeam/index.tsx @@ -2,6 +2,7 @@ import Team from "@/components/Team"; type Team = { id: number; + slug: string; name: string; role: string; img: { url: string; alt: string }; diff --git a/src/components/Team.tsx b/src/components/Team.tsx index 573a036..2ef6f5d 100644 --- a/src/components/Team.tsx +++ b/src/components/Team.tsx @@ -2,25 +2,32 @@ import Link from "next/link"; import { CardTeam } from "./Teams/CardTeam"; -export default function Team({ data }: any) { +type Team = { + id: number; + slug: string; + name: string; + role: string; + img: { url: string; alt: string }; + biography: string; +}; + +export default function Team({ data }: { data: Team[] }) { return ( <div className="container"> - <div className="row"> - <div className="col-md-12 offset-md-2 col-lg-6 offset-lg-3 text-center"> - <h2 className="section-title mb-30 mb-sm-20"> - <span className="text-gray">Our</span> Team - <span className="text-gray">.</span> - </h2> - </div> + <div className="flex justify-center"> + <h2 className="text-4xl mb-30 mb-sm-20"> + <span className="text-gray">Our</span> Team + <span className="text-gray">.</span> + </h2> </div> - <div className="grid grid-cols-4 gap-5"> + <div className="grid grid-cols-1 md:grid-cols-3 xl:grid-cols-4 gap-x-5 gap-y-2"> {/* Team item */} {data.map((member: any, index: any) => ( - <div key={index} className="text-center"> + <div key={index} className="flex flex-col text-center justify-between"> <CardTeam data={member} /> - <Link href={`/biography/${member.name}`} passHref> - <button className="bg-[#64B3B4] text-white px-5 py-1 m-3 rounded-3xl hover:opacity-[0.7]"> - Biography + <Link href={`/staff_member/${member.slug}`} passHref> + <button className="bg-extColorPrimary6 text-white px-5 py-1 m-3 rounded-3xl hover:bg-extColorPrimary4 transition-colors duration-500"> + BIOGRAPHY </button> </Link> </div> diff --git a/src/components/Teams/CardTeam.tsx b/src/components/Teams/CardTeam.tsx index bdc8552..bab7387 100644 --- a/src/components/Teams/CardTeam.tsx +++ b/src/components/Teams/CardTeam.tsx @@ -21,20 +21,6 @@ export function CardTeam({ data }: CardTeamProps) { data-wow-duration="1.2s" alt={`Image of ${data.name}`} /> - <div className="team-item-detail"> - <div className="team-social-links"> - {[ - { platform: "Facebook", icon: "fa-facebook-f", url: "#" }, - { platform: "Twitter", icon: "fa-twitter", url: "#" }, - { platform: "Pinterest", icon: "fa-pinterest-p", url: "#" }, - ].map((social, idx) => ( - <a key={idx} href={social.url} target="_blank" rel="noopener nofollow"> - <div className="visually-hidden">{social.platform}</div> - <i className={social.icon} /> - </a> - ))} - </div> - </div> </div> <div className="team-item-descr"> <div className="team-item-name">{data.name}</div> diff --git a/src/services/payload/team.ts b/src/services/payload/team.ts index 2d96fcd..7cf3f5b 100644 --- a/src/services/payload/team.ts +++ b/src/services/payload/team.ts @@ -2,17 +2,16 @@ import payloadConfig from "@/payload.config"; import { formatDate } from "@/utils/datetime"; import { getPayload } from "payload"; -export async function fetchTeamDetail(name: string | undefined) { +export async function fetchTeamDetail(slug: string) { const payload = await getPayload({ config: payloadConfig }); const blogDataQuery = await payload.find({ collection: "teams", where: { - name: { like: `%${name}%` }, + slug: { equals: slug }, }, limit: 1, pagination: false, }); - console.log("data", name); if (!blogDataQuery?.docs?.[0]) return null;