feat(specialties): enhance specialties components to include city and state names in metadata and links

app/specialties/page.js

@@ -20,10 +20,14 @@ export async function generateMetadata() {
 }
 
 async function Specialties() {
-  const { matchedCity } = await getStateInfo();
+  const { matchedCity, matchedState } = await getStateInfo();
   return (
     <Layout name="/specialties">
-      <SpecialtiesPage cityId={matchedCity?.id ?? null} />
+      <SpecialtiesPage
+        cityId={matchedCity?.id ?? null}
+        cityName={matchedCity?.name ?? null}
+        stateName={matchedState?.name ?? null}
+      />
     </Layout>
   );
 }

components/specialties/index.js

@@ -8,7 +8,7 @@ import specialtiesData from "@/data/specialties.json";
 import { searchOnList } from "@/helper";
 import { request } from "@/services/response";
 
-function SpecialtiesPage({ cityId }) {
+function SpecialtiesPage({ cityId, cityName, stateName }) {
   const [all, setAll] = useState(specialtiesData);
   const [filtered, setFiltered] = useState(specialtiesData);
 
@@ -38,7 +38,7 @@ function SpecialtiesPage({ cityId }) {
           handleSearch={handleSearch}
         />
       </HeadPageList>
-      <List specialties={filtered} />
+      <List specialties={filtered} cityName={cityName} stateName={stateName} />
     </>
   );
 }

components/specialties/list/ItemSpecialties.js

@@ -1,13 +1,15 @@
 import Link from "next/link";
 
-function ItemSpecialties({ data }) {
+function ItemSpecialties({ data, cityName, stateName }) {
   return (
     <li>
       <Link
         href={{
           pathname: "/doctors",
           query: {
-            specialties: data.id,
+            specialty: data.name,
+            ...(cityName && { city: cityName }),
+            ...(stateName && { state: stateName }),
           },
         }}
         className="py-[17.5px] px-[12px] flex flex-col justify-center items-center gap-[16px] 

components/specialties/list/index.js

@@ -1,7 +1,7 @@
 import MenuS from "@/components/icons/MenuS";
 import ItemSpecialties from "./ItemSpecialties";
 
-function List({ specialties = [] }) {
+function List({ specialties = [], cityName, stateName }) {
   return (
     <div className="bg-[#FAFAFA]">
       <div className="flex items-center justify-center gap-[12px] pt-[24px] mb-[40px]">
@@ -21,7 +21,12 @@ function List({ specialties = [] }) {
               gap-y-[16px] sm:gap-y-[24px] md:gap-y-[32px] lg:gap-y-[40px]"
         >
           {specialties.map((speciality) => (
-            <ItemSpecialties data={speciality} key={speciality.id} />
+            <ItemSpecialties
+              data={speciality}
+              key={speciality.id}
+              cityName={cityName}
+              stateName={stateName}
+            />
           ))}
         </ul>
       )}