Merge pull request #11 from DSC-McMaster-U/feature/MB-17-newsletters

Feature/mb 17 newsletters

app/__tests__/LinkTitleCard.test.tsx

@@ -0,0 +1,29 @@
+import { render, screen } from '@testing-library/react';
+import LinkTitleCard from '@/app/components/LinkTitleCard'; // Adjust the import path as necessary
+
+describe('LinkTitleCard', () => {
+    const title = 'Sample Title';
+    const link = '/sample-link';
+    const children = <p>Child content</p>;
+
+    it('renders correctly with given props', () => {
+        render(
+            <LinkTitleCard title={title} link={link}>
+                {children}
+            </LinkTitleCard>
+        );
+
+        // Check if title is rendered
+        expect(screen.getByText(title)).toBeInTheDocument();
+
+        // Check if child content is rendered
+        expect(screen.getByText('Child content')).toBeInTheDocument();
+
+        // Check if "Read now" text is rendered
+        expect(screen.getByText('Read now')).toBeInTheDocument();
+
+        // Check if the link points to the correct URL
+        const linkElement = screen.getByRole('link');
+        expect(linkElement).toHaveAttribute('href', link);
+    });
+});

app/components/LinkTitleCard.tsx

@@ -0,0 +1,29 @@
+import Link from "next/link";
+import { ChevronArrowSpan } from "@/app/components/ChevronArrow";
+import { ReactNode } from "react";
+
+interface LinkTitleCardProps {
+    title: string;
+    link: string;
+    children: ReactNode;
+}
+
+const LinkTitleCard = ({ title, link, children }: LinkTitleCardProps) => {
+    return (
+        <Link 
+            href={link} 
+            key={link}
+            className="button-arrow group flex flex-col relative group w-full bg-white dark:bg-google-grey p-1 dark:bg-opacity-10 rounded-md overflow-hidden shadow-lg border dark:border-google-black border-b-google-lightGrey transition-all duration-200 hover:shadow-2xl"
+        >
+            <div className="bg-google-lightGrey dark:bg-google-black p-4">
+                <h5>{title}</h5>
+            </div>
+            <div className="p-4 gap-y-4 flex flex-col justify-between h-full">
+                {children}
+                <ChevronArrowSpan>Read now</ChevronArrowSpan>
+            </div>
+        </Link>
+    );
+}
+
+export default LinkTitleCard;

app/globals.css

@@ -36,7 +36,7 @@ p {
 }
 
 main {
-  @apply mx-auto max-w-7xl px-4 sm:px-6 lg:px-8;
+  @apply mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 pt-16 md:pt-16 lg:pt-24;
 }
 
 section {

app/newsletters/page.tsx

@@ -1,7 +1,9 @@
 import { client } from "@/sanity/lib/client";
 import { Newsletter } from "@/types/sanity";
 import { Metadata } from "next";
-import Link from "next/link";
+import Header from "@/app/components/Header";
+import Footer from "@/app/components/Footer";
+import LinkTitleCard from "@/app/components/LinkTitleCard";
 
 export const metadata: Metadata = {
     title: "Newsletters | GDSC McMaster U",
@@ -12,7 +14,7 @@ const fetchNewsletters = async () => {
   const newsletters = await client.fetch(
     `*[_type == 'newsletter']{
             title,
-            subtitle,
+            description,
             slug,
             body,
             _updatedAt
@@ -21,30 +23,32 @@ const fetchNewsletters = async () => {
   return newsletters;
 };
 
-const NewsletterPage = async () => {
+const NewslettersPage = async () => {
   const newsletters: Newsletter[] = await fetchNewsletters();
 
   return (
-    <div>
-      <h1>Newsletters</h1>
-      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
-        {newsletters.map((newsletter) => (
-          <div
-            key={newsletter.slug.current}
-            className="border rounded-lg shadow-md p-4 hover:shadow-lg transition-shadow duration-200"
-          >
-            <Link href={`/newsletters/${newsletter.slug.current}`}>
-              <h2 className="text-lg font-bold">{newsletter.title}</h2>
-              <p className="text-sm text-gray-600">{newsletter.description}</p>
-              <p className="text-xs text-gray-400">
-                {new Date(newsletter._updatedAt).toLocaleDateString()}
-              </p>
-            </Link>
+    <>
+      <Header />
+        <main>
+        <section id="newsletters" className="flex flex-col gap-y-4">
+          <h2>Newsletters</h2>
+          <p>Through GDSC McMaster University&apos;s monthly newsletter, stay updated on the latest tech news, events, and innovations. Featuring industry trends, club highlights, and upcoming activities, the newsletter connects members to valuable insights and opportunities in the tech world.</p>
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 pt-10">
+            {newsletters.map((newsletter) => (
+              <LinkTitleCard
+                key={newsletter.slug.current}
+                title={newsletter.title}
+                link={`/newsletters/${newsletter.slug.current}`}
+              >
+                <p>{newsletter.description}</p>
+              </LinkTitleCard>
+            ))}
           </div>
-        ))}
-      </div>
-    </div>
+        </section>
+      </main>
+      <Footer />
+    </>
   );
 };
 
-export default NewsletterPage;
+export default NewslettersPage;

app/page.tsx

@@ -19,7 +19,7 @@ const HeroSection = () => {
   const joinUsHref = socialMedia.find((media) => media.name === "Discord")?.href;
 
   return (
-    <section id="hero" className="flex md:flex-row flex-col gap-y-8 md:gap-y-0 pt-20 md:pt-28 lg:pt-40 justify-center items-center">
+    <section id="hero" className="flex md:flex-row flex-col gap-y-8 md:gap-y-0">
       <div className="md:w-2/3 flex flex-col justify-start gap-y-4" id="hero-content">
         <h1>Google Developer Student Club</h1>
         <h5>McMaster University</h5>

styles/ChevronArrow.css

@@ -23,3 +23,13 @@
     opacity: 1;
     transform: scaleX(2);
 }
+
+/* Optional: Adding a 'group' class for more modular control */
+.button-arrow.group:hover .arrow-head {
+    transform: translateX(3px);
+}
+
+.button-arrow.group:hover .arrow-body {
+    opacity: 1;
+    transform: scaleX(2);
+}