Skip to content

Commit c935e5a

Browse files
antosanantosan
authored
Merge pull request #93 from EspiraMarvin/events-section
2 parents a2d1683 + 77d327d commit c935e5a

11 files changed

Lines changed: 130 additions & 151 deletions

File tree

‎e2e/events.spec.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { test, expect } from '@playwright/test';
2+
3+
test.beforeEach(async ({ page }) => {
4+
await page.goto('http://localhost:3000');
5+
});
6+
7+
test.describe('Test if see more link is clickable', () => {
8+
test('should navigate to the correct URL when See More is clicked', async ({
9+
page,
10+
}) => {
11+
const [newPage] = await Promise.all([
12+
page.waitForEvent('popup'),
13+
page.locator('#events >> text="See More"').click(),
14+
]);
15+
await expect(newPage).toHaveURL(
16+
'https://kommunity.com/reactjs-developer-community-kenya-reactdevske/events'
17+
);
18+
});
19+
});

‎public/images/community_sessions.png‎

325 KB
Loading

‎public/images/no-image.jpeg‎

38 KB
Loading

‎public/images/physical_meetup.jpg‎

232 KB
Loading

‎public/images/weekly_standups.png‎

1.05 MB
Loading

src/components/EventsDisplay/DisplayRC.tsx renamed to src/components/Events/DisplayRC.tsx

Lines changed: 13 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,22 @@ import React, { useState } from 'react';
22
import Image from 'next/image';
33
import { booleanFilter } from '../../util/booleanFilter';
44
import type { EventData } from '../../types';
5+
import Link from 'next/link';
56

67
type DisplayRCProps = EventData;
78

89
export default function DisplayRC({
9-
name,
10-
src,
11-
event,
10+
title,
11+
image_url: src,
1212
description,
13-
venue,
14-
date,
13+
target,
1514
}: DisplayRCProps) {
1615
const [loading, setLoading] = useState(true);
1716
return (
18-
<div className="bg-white flex flex-col rounded-lg px-6 py-4 gap-y-2 shadow-md">
19-
<div className="aspect-w-1 aspect-h-1 w-full overflow-hidden rounded-lg">
17+
<div className="flex flex-col px-6 py-4 bg-white rounded-lg shadow-md gap-y-2">
18+
<div className="w-full overflow-hidden rounded-lg cursor-auto aspect-w-1 aspect-h-1">
2019
<Image
21-
alt=" "
20+
alt={description}
2221
src={!src ? 'https://bit.ly/placeholder-img' : src}
2322
layout="fill"
2423
objectFit="cover"
@@ -31,15 +30,12 @@ export default function DisplayRC({
3130
onLoadingComplete={() => setLoading(false)}
3231
/>
3332
</div>
34-
<h2 className="text-lg font-bold">{name}</h2>
35-
{event ? (
36-
<div className="flex flex-col gap-y-4 md:py-5 lg:py-10">
37-
<p className="text-md font-medium">Venue: {venue}</p>
38-
<p className="text-md font-medium">Date: {date}</p>
39-
</div>
40-
) : (
41-
<p className="flex justify-center text-md ">{description}</p>
42-
)}
33+
<h2 className="text-lg md:text-xl font-bold cursor-pointer hover:text-[#09AFC6]">
34+
<Link href={target}>
35+
<a target="_blank">{title}</a>
36+
</Link>
37+
</h2>
38+
<p className="flex justify-center text-md md:pb-1">{description}</p>
4339
</div>
4440
);
4541
}

‎src/components/Events/Events.tsx‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
import Link from 'next/link';
2+
import React from 'react';
3+
import type { EventData } from '../../types/index';
4+
import DisplayRC from './DisplayRC';
5+
6+
const events: EventData[] = [
7+
{
8+
id: 1,
9+
title: 'Physical Meetups',
10+
description: 'Physical meetups where we share, learn and network.',
11+
image_url: '/images/physical_meetup.jpg',
12+
target:
13+
'https://kommunity.com/reactjs-developer-community-kenya-reactdevske/events',
14+
},
15+
{
16+
id: 2,
17+
title: 'Weekly Online Standups',
18+
description:
19+
'Weekly open calls in the community’s Telegram group discussing industry-related topics.',
20+
image_url: '/images/weekly_standups.png',
21+
target: 'https://bit.ly/joinreactdevske',
22+
},
23+
{
24+
id: 3,
25+
title: 'Community Power Sessions',
26+
description:
27+
'Community members meet and share technical concepts with other members of the community.',
28+
image_url: '/images/community_sessions.png',
29+
target: 'https://www.youtube.com/channel/UC9_eVcPBk4T-DcZLHpQfy4w/videos',
30+
},
31+
{
32+
id: 4,
33+
title: 'Joint Meetups',
34+
description: 'Meetups hosted in collaboration with other tech communities.',
35+
image_url: 'https://bit.ly/placeholder-img',
36+
target:
37+
'https://kommunity.com/reactjs-developer-community-kenya-reactdevske/events',
38+
},
39+
{
40+
id: 5,
41+
title: 'Monthly Online Standups',
42+
description:
43+
'Monthly open calls on Google Meet bringing together people from different communities.',
44+
image_url: '/images/physical_meetup.jpg',
45+
target:
46+
'https://kommunity.com/reactjs-developer-community-kenya-reactdevske/events',
47+
},
48+
{
49+
id: 6,
50+
title: 'Community Challenges',
51+
description:
52+
'We organize open source challenges to keep the community engaged.',
53+
image_url: '/images/physical_meetup.jpg',
54+
target: 'https://github.com/reactdeveloperske/community-coding-challenges',
55+
},
56+
];
57+
58+
export default function Events() {
59+
return (
60+
<section
61+
id="events"
62+
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"
63+
>
64+
<p className="flex items-center justify-center font-light tracking-wide">
65+
Events
66+
</p>
67+
<h2 className="pb-2 text-2xl font-bold md:pb-10">Community Events</h2>
68+
<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">
69+
{events.map((event) => (
70+
<DisplayRC
71+
key={event.id}
72+
id={event.id}
73+
title={event.title}
74+
image_url={event.image_url}
75+
description={event.description}
76+
target={event.target}
77+
/>
78+
))}
79+
80+
<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">
81+
<Link href="https://kommunity.com/reactjs-developer-community-kenya-reactdevske/events">
82+
<a target="_blank">See More</a>
83+
</Link>
84+
</div>
85+
</div>
86+
</section>
87+
);
88+
}

‎src/components/EventsDisplay/index.ts‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎src/pages/events/index.page.tsx‎

Lines changed: 0 additions & 124 deletions
This file was deleted.

‎src/pages/index.page.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import Head from 'next/head';
22
import Image from 'next/image';
33
import logo from '../../public/reactdevske.svg';
4+
import Events from '../components/Events/Events';
45

56
export default function Home() {
67
return (
@@ -20,21 +21,21 @@ export default function Home() {
2021
</Head>
2122

2223
<main className="">
23-
<h1 className="text-center pt-6 text-3xl text-white font-bold font-montserrat">
24+
<h1 className="pt-6 text-3xl font-bold text-center text-white font-montserrat">
2425
React Developer Community Kenya
2526
</h1>
26-
<p className="text-center text-xl text-white font-montserrat">
27+
<p className="text-xl text-center text-white font-montserrat">
2728
A Community of Reactjs developers in Kenya
2829
</p>
29-
<div className="flex flex-col justify-center content-center pt-5">
30+
<div className="flex flex-col content-center justify-center pt-5">
3031
<Image
3132
src={logo}
3233
className="App-logo"
3334
alt="logo"
3435
width={400}
3536
height={400}
3637
/>
37-
<p className="flex justify-center text-white pt-10">
38+
<p className="flex justify-center pt-10 text-white">
3839
🚧Under construction...
3940
</p>
4041
<a
@@ -48,6 +49,7 @@ export default function Home() {
4849
</button>
4950
</a>
5051
</div>
52+
<Events />
5153
</main>
5254
</div>
5355
);

0 commit comments

Comments
 (0)