added component, lighht and dark mode, and test cases

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/newsletters/page.tsx

@@ -1,10 +1,9 @@
 import { client } from "@/sanity/lib/client";
 import { Newsletter } from "@/types/sanity";
 import { Metadata } from "next";
-import Link from "next/link";
-import { ChevronArrowSpan } from "@/app/components/ChevronArrow";
 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",
@@ -36,19 +35,13 @@ const NewslettersPage = async () => {
           <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) => (
-              <Link 
-                href={`/newsletters/${newsletter.slug.current}`} 
+              <LinkTitleCard
                 key={newsletter.slug.current}
-                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"
+                title={newsletter.title}
+                link={`/newsletters/${newsletter.slug.current}`}
               >
-                  <div className="bg-google-black p-4">
-                    <h5>{newsletter.title}</h5>
-                  </div>
-                  <div className="p-4 gap-y-4 flex flex-col justify-between h-full">
-                    <p>{newsletter.description}</p>
-                    <ChevronArrowSpan>Read now</ChevronArrowSpan>
-                  </div>
-              </Link>
+                <p>{newsletter.description}</p>
+              </LinkTitleCard>
             ))}
           </div>
         </section>