refactor: replace SocialSharingFooter with SocialSharing component and update Footer and Sidebar for improved layout and functionality

Llewellyn500 · Llewellyn500 · commit 1c415f460c05 · 2025-03-04T11:52:41.000Z
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -3,7 +3,6 @@ import "./globals.css";
 import type { Metadata } from "next";
 import Header from "@/components/Header";
 import Footer from "@/components/Footer";
-// import PodcastContextProvider from "@/context/PodcastContext";
 import ArticleContextProvider from "@/context/ArticleContext";
 
 export const metadata: Metadata = {
@@ -27,13 +26,11 @@ export default function RootLayout({
       </head>
       <body>
         <ArticleContextProvider>
-          {/* <PodcastContextProvider> */}
             <Container>
               <Header />
               {children}
               <Footer />
             </Container>
-          {/* </PodcastContextProvider> */}
         </ArticleContextProvider>
       </body>
     </html>
diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -1,16 +1,12 @@
 "use client";
 
-import NewsletterTicker from "./NewsletterTicker";
-import { Input } from "@/components/ui/input";
-import { Button } from "./ui/button";
 import Link from "next/link";
 import FooterSocialLinks from "./FooterSocialsLinks";
-import NewsletterSignUp from "./NewsletterSignUp";
 import Image from "next/image";
 
 export default function Footer() {
   return (
-    <footer className="bg-[#8a2be2] overflow-hidden">
+    <footer className="overflow-hidden border-t-4 border-[#8a2be2]">
       <div className="max-w-[95rem] mx-auto px-6 mt-11">
         <div className="flex flex-col md:flex-row flex-wrap lg:justify-between gap-6 max-w-[95rem] w-full">
           <Image
diff --git a/components/FooterSocialsLinks.tsx b/components/FooterSocialsLinks.tsx
@@ -1,4 +1,4 @@
-import SocialSharingFooter from "./SocialSharingFooter";
+import SocialSharing from "./SocialSharing";
 import {
   RiInstagramLine,
   RiTwitterFill,
@@ -11,7 +11,7 @@ import {
 export default function FooterSocialLinks() {
   return (
     <div className="flex gap-3">
-      <SocialSharingFooter
+      <SocialSharing
         links={[
           {
             href: "https://www.youtube.com/@lap-tutorials",
diff --git a/components/PopularArticles.tsx b/components/PopularArticles.tsx
@@ -1,35 +1,62 @@
-import { useArticleContext } from "@/hooks/useArticleContext";
+"use client";
+
+import { useEffect, useState } from "react";
+import { collection, onSnapshot, query, where, orderBy } from "firebase/firestore";
+import { db } from "@/lib/firebase";
 import { Separator } from "@radix-ui/react-separator";
 import Link from "next/link";
 
+// Define the structure of an article
+type Article = {
+  id: string;
+  title: string;
+  slug: string;
+  authorName: string;
+  popularity: boolean;
+};
+
 export default function PopularArticles() {
-  const { data } = useArticleContext();
+  const [popularArticles, setPopularArticles] = useState<Article[]>([]);
+  
+  useEffect(() => {
+    // Firestore Query: Get popular articles sorted by popularity
+    const articlesQuery = query(
+      collection(db, "articles"),
+      where("popularity", "==", true),  
+      orderBy("popularity", "asc")  
+    );
 
-  const popularArticles = data.flatMap((author) =>
-    author.articles
-      .filter((article) => article.popular === true)
-      .sort((a, b) => Number(a.popularity) - Number(b.popularity))
-  );
+    const unsubscribe = onSnapshot(articlesQuery, (snapshot) => {
+      const articles: Article[] = snapshot.docs.map((doc) => ({
+        id: doc.id,
+        ...doc.data(),
+      })) as Article[];
+
+      setPopularArticles(articles);
+    });
+
+    return () => unsubscribe();
+  }, []);
 
   return (
     <article>
       <h2 className="uppercase font-semibold mt-16 mb-8">Most Popular</h2>
       {popularArticles.map((article, index) => (
-        <article key={article.title}>
+        <article key={article.id}>
           <div className="grid grid-cols-[0fr_1fr] gap-8">
             <p className="text-2xl font-semibold">{`0${index + 1}`}</p>
             <article className="flex flex-col gap-4">
               <h3 className="text-2xl font-semibold">
                 <Link href={`/magazine/${article.slug}`}>{article.title}</Link>
               </h3>
               <span className="flex gap-2">
-                <p className="font-semibold">Text</p>
-                <p>{data[0].author}</p>
+                <p className="font-semibold">Author:</p>
+                <p>{article.authorName}</p>
               </span>
             </article>
           </div>
           {index < popularArticles.length - 1 && (
-            <Separator className="border border-black my-6" />
+            <Separator className="border border-white my-6" />
           )}
         </article>
       ))}
diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
@@ -2,25 +2,27 @@ import Image from "next/image";
 import NewsletterSignUp from "./NewsletterSignUp";
 import PopularArticles from "./PopularArticles";
 import { Button } from "./ui/button";
-import magazineCover from "@/public/images/homepage/magazine-cover.jpg";
+import magazineCover from "@/public/logos/LAP-Logo-Color.png";
 
 export default function Sidebar() {
+  const youtubeChannelUrl =
+    "https://www.youtube.com/@lap-tutorials?sub_confirmation=1";
+
   return (
     <aside>
-      <h3 className="uppercase font-semibold mb-2">Printmagazine</h3>
-      <p className="text-5xl font-semibold">03/2022</p>
+      <h3 className="uppercase font-semibold mb-2">Subscribe To</h3>
+      <p className="text-4xl font-semibold">L.A.P - Tutorials</p>
       <Image
         className="w-[20rem] pt-8 pb-4"
         src={magazineCover}
-        alt="A rust-colored magazine cover, showing a sculpture of a man, the words 'FYRRE MAGAZINE' on the top left and '03/2022' on the bottom right, a gold badge just above with 'EXCLUSIVE JAKOB GRONBERG INTERVIEW' printed on it, and an arrow pointing in the bottom right corner"
+        alt="A cool and simple logo of L.A.P - Tutorials"
       />
-      <Button>Order</Button>
+      <Button asChild className="hover:bg-[#8a2be2] transition ease-in-out duration-300">
+        <a href={youtubeChannelUrl} target="_blank" rel="noopener noreferrer">
+          Subscribe on YouTube
+        </a>
+      </Button>
       <PopularArticles />
-      <div className="bg-[#f8f8f8] p-[1.88rem] mt-16">
-        <h3 className="uppercase font-semibold mb-2">Newsletter</h3>
-        <p className="heading3-title mb-4">Design News to your Inbox</p>
-        <NewsletterSignUp />
-      </div>
     </aside>
   );
 }
diff --git a/components/SocialSharingFooter.tsx b/components/SocialSharingFooter.tsx
diff --git a/public/logos/LAP-Logo-Color.png b/public/logos/LAP-Logo-Color.png
