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;