120 lines
4.1 KiB
JavaScript
120 lines
4.1 KiB
JavaScript
import Layout from "@/components/layout/Layout";
|
||
import Link from "next/link";
|
||
import { teamMembers } from "@/utils/constant.utils";
|
||
|
||
const ProgressBar = ({ label, percent }) => (
|
||
<div className="progress-box">
|
||
<p>{label}</p>
|
||
<div className="bar">
|
||
<div className="bar-inner count-bar" style={{ width: `${percent}%` }}></div>
|
||
<div className="count-text">{`${percent}%`}</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
|
||
export async function generateStaticParams() {
|
||
return teamMembers.map((member) => ({
|
||
slug: member.slug,
|
||
}));
|
||
}
|
||
|
||
export async function generateMetadata({ params }) {
|
||
const member = teamMembers.find((item) => item.slug === params.slug);
|
||
|
||
if (!member) {
|
||
return {
|
||
title: "Team Member Not Found – Rapha Rehab Clinic",
|
||
description: "Team member not found at Rapha Rehab Clinic.",
|
||
};
|
||
}
|
||
|
||
return {
|
||
title: member.metaTitle || `${member.name} – Rapha Rehab Clinic`,
|
||
description: member.metaDis || `Learn more about ${member.name}, their experience, expertise, and services at Rapha Rehab Clinic in Etobicoke and Scarborough.`,
|
||
};
|
||
}
|
||
|
||
export default function TeamDetails({ params }) {
|
||
const member = teamMembers.find((item) => item.slug === params.slug);
|
||
|
||
if (!member) {
|
||
return (
|
||
<Layout headerStyle={1} footerStyle={1} breadcrumbTitle="Not Found">
|
||
<div className="auto-container">
|
||
<h2>Team member not found!</h2>
|
||
<Link href="/" className="theme-btn btn-one">Go Back</Link>
|
||
</div>
|
||
</Layout>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<Layout
|
||
headerStyle={1}
|
||
footerStyle={1}
|
||
breadcrumbTitle={member.name}
|
||
bannerImage={member.bannerImage}
|
||
>
|
||
<section className="team-details sec-pad-2">
|
||
<div className="auto-container">
|
||
<div className="team-details-content mb_50">
|
||
<div className="row clearfix">
|
||
<div className="col-lg-5 col-md-12 col-sm-12 image-column">
|
||
<figure className="image-box mr_15">
|
||
<img src={member.imageDetail} alt={member.name} />
|
||
</figure>
|
||
</div>
|
||
<div className="col-lg-7 col-md-12 col-sm-12 content-column">
|
||
<div className="content-box">
|
||
<h2>{member.name}</h2>
|
||
<span className="designation">{member.designation}</span>
|
||
<p>{member.description}</p>
|
||
<ul className="info-list mb_30 clearfix">
|
||
<li><strong>Experience: </strong>{member.experience}</li>
|
||
<li><strong>Email: </strong><Link href={`mailto:${member.email}`}>{member.email}</Link></li>
|
||
<li><strong>Phone: </strong><Link href={`tel:${member.phone}`}>{member.phone}</Link></li>
|
||
</ul>
|
||
<ul className="social-links clearfix">
|
||
{member.socials.map((social, idx) => (
|
||
<li key={idx}>
|
||
<Link href={social.link}>
|
||
<i className={social.icon}></i>
|
||
</Link>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="experience-details mb_50">
|
||
<h2>Personal Experience</h2>
|
||
<p>{member.about1}</p>
|
||
<p>{member.about2}</p>
|
||
</div>
|
||
|
||
<div className="two-column">
|
||
<div className="row clearfix">
|
||
<div className="col-lg-6 col-md-6 col-sm-12 skills-column">
|
||
<div className="skills-box">
|
||
<div className="text-box mb_30">
|
||
<h2>Expertise & Skills</h2>
|
||
<p>Professional expertise and top-level skills demonstrated below:</p>
|
||
</div>
|
||
<div className="progress-inner">
|
||
{member.skills.map((skill, index) => (
|
||
<ProgressBar key={index} label={skill.label} percent={skill.percent} />
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
</Layout>
|
||
);
|
||
}
|