Skip to content

Commit 19cb2f9

Browse files
orama254orama254
authored
Merge pull request #50 from AJ-Kulundu/events-page
Events page and events reusable component [Fixes #43]
2 parents fab94d9 + 7ba3f32 commit 19cb2f9

7 files changed

Lines changed: 110 additions & 14 deletions

File tree

‎components/DisplayRC.jsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React, { useState } from "react";
2+
import Image from "next/image";
3+
import {booleanFilter} from '../util/booleanFilter';
4+
5+
export default function DislpayRC({
6+
name,
7+
src,
8+
event,
9+
description,
10+
venue,
11+
date,
12+
}) {
13+
const [loading, setLoading] = useState(true);
14+
return (
15+
<div className="bg-white flex flex-col rounded-lg px-6 py-4 gap-y-2 shadow-md">
16+
<div className="aspect-w-1 aspect-h-1 w-full overflow-hidden rounded-lg">
17+
<Image
18+
alt=" "
19+
src={!src ? "https://bit.ly/placeholder-img" : src}
20+
layout="fill"
21+
objectFit="cover"
22+
className={booleanFilter(
23+
"duration-700 ease-in-out group-hover:opacity-75",
24+
loading
25+
? "scale-110 blur-2xl grayscale"
26+
: "scale-100 blur-0 grayscale-0"
27+
)}
28+
onLoadingComplete={() => setLoading(false)}
29+
/>
30+
</div>
31+
<h2 className="text-lg font-bold">{name}</h2>
32+
{event ? (
33+
<div className="flex flex-col gap-y-4 md:py-5 lg:py-10">
34+
<p className="text-md font-medium">Venue: {venue}</p>
35+
<p className="text-md font-medium">Date: {date}</p>
36+
</div>
37+
) : (
38+
<p className="flex justify-center text-md ">{description}</p>
39+
)}
40+
</div>
41+
);
42+
}

‎next.config.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
/** @type {import('next').NextConfig} */
22
const nextConfig = {
33
reactStrictMode: true,
4+
images:{
5+
domains:['bit.ly']
6+
}
47
}
58

69
module.exports = nextConfig

‎package-lock.json‎

Lines changed: 17 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"react-dom": "18.1.0"
1616
},
1717
"devDependencies": {
18+
"@tailwindcss/aspect-ratio": "^0.4.0",
1819
"@playwright/test": "1.22.2",
1920
"autoprefixer": "10.4.7",
2021
"eslint": "8.17.0",

‎pages/events.jsx‎

Lines changed: 38 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,40 @@
1-
import React from "react";
2-
import Head from "next/head";
1+
import React from 'react';
2+
import DisplayRC from '../components/DisplayRC';
3+
import logo from '../public/reactdevske.svg'
4+
import Head from 'next/head';
35

4-
export default function EventsPage() {
5-
return (
6-
<>
7-
<Head>
8-
<title>React Devs Kenya - Events</title>
9-
</Head>
10-
<main className="flex justify-center items-center min-h-screen">
11-
<h1 className="text-white">Events page will be here</h1>
12-
</main>
13-
</>
14-
);
6+
export const getStaticProps = async () => {
7+
const data=[{name:"Event 1",src:"https://bit.ly/placeholder-img",event:true,description:"This is a description for event 1",venue:"iHub",date:"2022-06-15"},
8+
{name:"Event 2",src:"https://bit.ly/placeholder-img",event:true,description:"This is a description for event 1",venue:"iHub",date:"2022-06-15"},
9+
{name:"Event 3",src:"https://bit.ly/placeholder-img",event:true,description:"This is a description for event 1",venue:"iHub",date:"2022-06-15"},
10+
{name:"Event 4",src:"https://bit.ly/placeholder-img",event:true,description:"This is a description for event 1",venue:"iHub",date:"2022-06-15"},
11+
{name:"Event 5",src:"https://bit.ly/placeholder-img",event:true,description:"This is a description for event 1",venue:"iHub",date:"2022-06-15"},
12+
{name:"Event 6",src:"https://bit.ly/placeholder-img",event:true,description:"This is a description for event 1",venue:"iHub",date:"2022-06-15"},
13+
{name:"Reactjs Developer Community in Kenya",src:logo,event:false,description:"React js Developer Community Kenya is a community of react js developers using react related technologies in the Kenyan software development eco system.",venue:"iHub",date:"2022-06-15"},
14+
{name:"Reactjs Developer Community in Kenya",src:logo,event:false,description:"React js Developer Community Kenya is a community of react js developers using react related technologies in the Kenyan software development eco system.",venue:"iHub",date:"2022-06-15"},
15+
{name:"Event 7",src:"https://bit.ly/placeholder-img",event:true,description:"This is a description for event 1",venue:"iHub",date:"2022-06-15"},]
16+
return{
17+
props:{
18+
data
19+
}
20+
}
1521
}
22+
23+
export default function Events({data}){
24+
return(
25+
<div>
26+
<Head>
27+
<title>React Devs Kenya - Forum</title>
28+
</Head>
29+
<div className='bg-white flex flex-col w-full gap-y-5 px-16 py-6 justify-center items-center'>
30+
<h2 className='text-2xl font-bold'>Community Events</h2>
31+
<p className='text-lg'> We organise several events for the community.</p>
32+
<div className='grid grid-cols-1 gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8 md:grid-cols-2'>
33+
{data.map((event,index)=>(
34+
<DisplayRC key={index} name={event.name} src={event.src} event={event.event} description={event.description} venue={event.venue} date={event.date}/>
35+
))}
36+
</div>
37+
</div>
38+
</div>
39+
)
40+
}

‎tailwind.config.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,5 +11,8 @@ module.exports = {
1111
},
1212
},
1313
},
14-
plugins: [],
14+
corePlugins: {
15+
aspectRatio: false,
16+
},
17+
plugins: [require('@tailwindcss/aspect-ratio'),],
1518
}

‎util/booleanFilter.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
// A function to filter tailwindcss utilities depending on the value of a boolean property
2+
3+
export const booleanFilter = (...classes) => {
4+
return classes.filter(Boolean).join(" ");
5+
}

0 commit comments

Comments
 (0)