Merge pull request #93 from EspiraMarvin/events-section

e2e/events.spec.ts

@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test';
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('http://localhost:3000');
+});
+
+test.describe('Test if see more link is clickable', () => {
+  test('should navigate to the correct URL when See More is clicked', async ({
+    page,
+  }) => {
+    const [newPage] = await Promise.all([
+      page.waitForEvent('popup'),
+      page.locator('#events >> text="See More"').click(),
+    ]);
+    await expect(newPage).toHaveURL(
+      'https://kommunity.com/reactjs-developer-community-kenya-reactdevske/events'
+    );
+  });
+});

src/components/EventsDisplay/DisplayRC.tsx → src/components/Events/DisplayRC.tsx

@@ -2,23 +2,22 @@ import React, { useState } from 'react';
 import Image from 'next/image';
 import { booleanFilter } from '../../util/booleanFilter';
 import type { EventData } from '../../types';
+import Link from 'next/link';
 
 type DisplayRCProps = EventData;
 
 export default function DisplayRC({
-  name,
-  src,
-  event,
+  title,
+  image_url: src,
   description,
-  venue,
-  date,
+  target,
 }: DisplayRCProps) {
   const [loading, setLoading] = useState(true);
   return (
-    <div className="bg-white flex flex-col rounded-lg px-6 py-4 gap-y-2 shadow-md">
-      <div className="aspect-w-1 aspect-h-1 w-full overflow-hidden rounded-lg">
+    <div className="flex flex-col px-6 py-4 bg-white rounded-lg shadow-md gap-y-2">
+      <div className="w-full overflow-hidden rounded-lg cursor-auto aspect-w-1 aspect-h-1">
         <Image
-          alt=" "
+          alt={description}
           src={!src ? 'https://bit.ly/placeholder-img' : src}
           layout="fill"
           objectFit="cover"
@@ -31,15 +30,12 @@ export default function DisplayRC({
           onLoadingComplete={() => setLoading(false)}
         />
       </div>
-      <h2 className="text-lg font-bold">{name}</h2>
-      {event ? (
-        <div className="flex flex-col gap-y-4 md:py-5 lg:py-10">
-          <p className="text-md font-medium">Venue: {venue}</p>
-          <p className="text-md font-medium">Date: {date}</p>
-        </div>
-      ) : (
-        <p className="flex justify-center text-md ">{description}</p>
-      )}
+      <h2 className="text-lg md:text-xl font-bold cursor-pointer hover:text-[#09AFC6]">
+        <Link href={target}>
+          <a target="_blank">{title}</a>
+        </Link>
+      </h2>
+      <p className="flex justify-center text-md md:pb-1">{description}</p>
     </div>
   );
 }

src/components/Events/Events.tsx

@@ -0,0 +1,88 @@
+import Link from 'next/link';
+import React from 'react';
+import type { EventData } from '../../types/index';
+import DisplayRC from './DisplayRC';
+
+const events: EventData[] = [
+  {
+    id: 1,
+    title: 'Physical Meetups',
+    description: 'Physical meetups where we share, learn and network.',
+    image_url: '/images/physical_meetup.jpg',
+    target:
+      'https://kommunity.com/reactjs-developer-community-kenya-reactdevske/events',
+  },
+  {
+    id: 2,
+    title: 'Weekly Online Standups',
+    description:
+      'Weekly open calls in the community’s Telegram group discussing industry-related topics.',
+    image_url: '/images/weekly_standups.png',
+    target: 'https://bit.ly/joinreactdevske',
+  },
+  {
+    id: 3,
+    title: 'Community Power Sessions',
+    description:
+      'Community members meet and share technical concepts with other members of the community.',
+    image_url: '/images/community_sessions.png',
+    target: 'https://www.youtube.com/channel/UC9_eVcPBk4T-DcZLHpQfy4w/videos',
+  },
+  {
+    id: 4,
+    title: 'Joint Meetups',
+    description: 'Meetups hosted in collaboration with other tech communities.',
+    image_url: 'https://bit.ly/placeholder-img',
+    target:
+      'https://kommunity.com/reactjs-developer-community-kenya-reactdevske/events',
+  },
+  {
+    id: 5,
+    title: 'Monthly Online Standups',
+    description:
+      'Monthly open calls on Google Meet  bringing together people from different communities.',
+    image_url: '/images/physical_meetup.jpg',
+    target:
+      'https://kommunity.com/reactjs-developer-community-kenya-reactdevske/events',
+  },
+  {
+    id: 6,
+    title: 'Community Challenges',
+    description:
+      'We organize open source challenges to keep the community engaged.',
+    image_url: '/images/physical_meetup.jpg',
+    target: 'https://github.com/reactdeveloperske/community-coding-challenges',
+  },
+];
+
+export default function Events() {
+  return (
+    <section
+      id="events"
+      className="relative flex flex-col items-center justify-center w-full py-16 bg-white md:py-20 gap-y-2 md:gap-y-5"
+    >
+      <p className="flex items-center justify-center font-light tracking-wide">
+        Events
+      </p>
+      <h2 className="pb-2 text-2xl font-bold md:pb-10">Community Events</h2>
+      <div className="grid grid-cols-1 gap-y-4 md:gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 xl:gap-x-8 md:grid-cols-2 bg-[#09AFC6] px-4 md:px-10 lg:px-16 py-8 md:py-14 xl:py-16">
+        {events.map((event) => (
+          <DisplayRC
+            key={event.id}
+            id={event.id}
+            title={event.title}
+            image_url={event.image_url}
+            description={event.description}
+            target={event.target}
+          />
+        ))}
+
+        <div className="flex items-center justify-center pt-1 tracking-wide text-white md:pt-0 md:text-right md:absolute md:bottom-24 md:right-10 2xl:bottom-36 lg:right-16 hover:tracking-widest hover:transition-all hover:duration-500 hover:underline">
+          <Link href="https://kommunity.com/reactjs-developer-community-kenya-reactdevske/events">
+            <a target="_blank">See More</a>
+          </Link>
+        </div>
+      </div>
+    </section>
+  );
+}

src/pages/index.page.tsx

@@ -1,6 +1,7 @@
 import Head from 'next/head';
 import Image from 'next/image';
 import logo from '../../public/reactdevske.svg';
+import Events from '../components/Events/Events';
 
 export default function Home() {
   return (
@@ -20,21 +21,21 @@ export default function Home() {
       </Head>
 
       <main className="">
-        <h1 className="text-center pt-6 text-3xl text-white font-bold font-montserrat">
+        <h1 className="pt-6 text-3xl font-bold text-center text-white font-montserrat">
           React Developer Community Kenya
         </h1>
-        <p className="text-center text-xl text-white font-montserrat">
+        <p className="text-xl text-center text-white font-montserrat">
           A Community of Reactjs developers in Kenya
         </p>
-        <div className="flex flex-col justify-center content-center pt-5">
+        <div className="flex flex-col content-center justify-center pt-5">
           <Image
             src={logo}
             className="App-logo"
             alt="logo"
             width={400}
             height={400}
           />
-          <p className="flex justify-center text-white pt-10">
+          <p className="flex justify-center pt-10 text-white">
             🚧Under construction...
           </p>
           <a
@@ -48,6 +49,7 @@ export default function Home() {
             </button>
           </a>
         </div>
+        <Events />
       </main>
     </div>
   );

src/types/index.ts

@@ -1,8 +1,7 @@
 export type EventData = {
-  name: string;
-  src: string;
-  event: boolean;
+  id: number;
+  title: string;
+  image_url: string;
   description: string;
-  venue: string;
-  date: string;
+  target: string;
 };