refactor: update Authors component to fetch data from Firestore and replace LatestArticles with LatestPosts

Author: Llewellyn500

app/page.tsx

@@ -1,5 +1,5 @@
 import Authors from "@/components/Authors/Authors";
-import LatestArticles from "@/components/LatestPosts/LatestPosts";
+import LatestPosts from "@/components/LatestPosts/LatestPosts";
 import NewsLoading from "@/components/NewsTicker/loading";
 import AuthorsLoading from "@/components/Authors/loading";
 import NewsTicker from "@/components/NewsTicker/NewsTicker";
@@ -27,26 +27,14 @@ export default function Home() {
         <NewsTicker />
       </Suspense>
 
-      <LatestArticles />
-
-      {/* <Subheading
-        className="text-subheading"
-        url="/podcasts"
-        linkText="All episodes"
-      >
-        Podcast
-      </Subheading> */}
-{/* 
-      <Suspense fallback={<LatestPodcastsLoading />}>
-        <LatestPodcasts />
-      </Suspense> */}
+      <LatestPosts />
 
       <Subheading
         className="text-subheading"
         url="/authors"
-        linkText="All authors"
+        linkText="Full Team"
       >
-        Authors
+        Team
       </Subheading>
 
       <Suspense fallback={<AuthorsLoading />}>

components/Authors/Authors.tsx

@@ -1,38 +1,64 @@
-import { ArticleType, getArticles } from "@/app/functions/getArticles";
+import { collection, getDocs } from "firebase/firestore";
+import { db } from "@/lib/firebase";
 import Image from "next/image";
 import Link from "next/link";
 
+// Define the structure of an author
+type AuthorType = {
+  id: string;
+  slug: string;
+  name: string;
+  avatar: string;
+  imgAlt: string;
+  job: string;
+  city: string;
+};
+
+// Function to fetch authors from Firestore
+const getAuthors = async (): Promise<AuthorType[]> => {
+  const authorsCollection = collection(db, "authors");
+  const authorsSnapshot = await getDocs(authorsCollection);
+
+  return authorsSnapshot.docs.map((doc) => {
+    const data = doc.data() as AuthorType;
+    return {
+      ...data,
+      id: doc.id,
+    };
+  });
+};
+
 export default async function Authors() {
-  const data: ArticleType[] = await getArticles();
+  const data: AuthorType[] = await getAuthors();
 
   return (
-    <div className="grid grid-cols-1 lg:grid-cols-2 mb-48 max-w-[95rem] w-full mx-auto border border-black border-collapse">
-      {data.map((article) => (
+    <div className="grid grid-cols-1 lg:grid-cols-2 mb-48 max-w-[95rem] w-full mx-auto border border-white border-collapse">
+      {data.map((author) => (
         <article
-          className="flex flex-col sm:flex-row sm:items-center gap-4 sm:gap-8 md:gap-12 p-4 md:p-8 border border-black"
-          key={article.id}
+          className="flex flex-col sm:flex-row sm:items-center gap-4 sm:gap-8 md:gap-12 p-4 md:p-8 border border-white"
+          key={author.id}
         >
-          <Link href={`authors/${article.slug}`}>
+          <Link href={`/authors/${author.slug}`}>
             <Image
               className="w-[9.375rem] h-[9.375rem] object-cover rounded-full hover:scale-105 transition"
-              src={article.avatar}
-              alt={article.imgAlt}
+              src={author.avatar}
+              alt={author.imgAlt}
               width={150}
               height={150}
             />
           </Link>
           <article>
             <p className="heading3-title mb-4">
-              <Link href={`/authors/${article.slug}`}>{article.author}</Link>
+              <Link href={`/authors/${author.slug}`}>{author.name}</Link>
             </p>
             <div className="flex gap-8">
               <span className="flex">
-                <p className="font-semibold pr-2">Job</p>
-                <p className="">{article.job}</p>
+                <p className="font-semibold pr-2">Job:</p>
+                <p className="">{author.job}</p>
               </span>
               <span className="flex">
-                <p className="font-semibold pr-2">City</p>
-                <p className="">{article.city}</p>
+                <p className="font-semibold pr-2">City:</p>
+                <p className="">{author.city}</p>
               </span>
             </div>
           </article>

components/Subheading.tsx

@@ -1,4 +1,5 @@
 import Link from "next/link";
+import { RiArrowRightLine } from "react-icons/ri"; // Import React Icon
 
 type SubheadingProps = {
   children: React.ReactNode;
@@ -27,11 +28,8 @@ export default function Subheading({
         <p className="uppercase font-semibold text-lg hidden sm:block md:text-[2rem]">
           {linkText}
         </p>
-        <img
-          className="w-fit h-fit"
-          src="/icons/ri_arrow-right-line.svg"
-          alt="A right black arrow"
-        />
+        {/* Replace <img> with React Icon */}
+        <RiArrowRightLine className="text-3xl sm:text-4xl" />
       </Link>
     </div>
   );