Skip to content

Commit 817bcc1

Browse files
tyrelchamberstyrelchambers
authored
Feat/129 community (#143)
* html foundation * finish * Update CommunityEvents.module.css * Update CommunityEvents.astro * update styling * Update fetchEvents.ts * Update CommunityEvents.astro * Update CommunityEvents.module.css
1 parent 1cf006b commit 817bcc1

File tree

9 files changed

+505
-1
lines changed

9 files changed

+505
-1
lines changed

‎src/components/CommunityEvents/CommunityEvents.astro‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
---
2+
import { SvgArrowRight2, Typography } from "@chainlink/blocks"
3+
import EventCard from "./EventCard.astro"
4+
import ImageGallery from "./ImageGallery.astro"
5+
import type { GalleryImage } from "./types"
6+
import { fetchEventsFromRSS } from "./fetchEvents"
7+
import styles from "./CommunityEvents.module.css"
8+
9+
// Community event gallery images
10+
const galleryImages: GalleryImage[] = [
11+
// Top row - scrolls left
12+
{
13+
id: "1",
14+
imageUrl:
15+
"https://cdn.prod.website-files.com/64cc2c23d8dbd707cdb556d8/677d1da974d919ae98a3bd59_home-community-5.webp",
16+
alt: "Chainlink community event",
17+
},
18+
{
19+
id: "2",
20+
imageUrl:
21+
"https://cdn.prod.website-files.com/64cc2c23d8dbd707cdb556d8/677d1da974d919ae98a3bd55_home-community-2.webp",
22+
alt: "Chainlink community event",
23+
},
24+
{
25+
id: "3",
26+
imageUrl:
27+
"https://cdn.prod.website-files.com/64cc2c23d8dbd707cdb556d8/677d1da974d919ae98a3bd30_home-community-4.webp",
28+
alt: "Chainlink community event",
29+
},
30+
{
31+
id: "4",
32+
imageUrl:
33+
"https://cdn.prod.website-files.com/64cc2c23d8dbd707cdb556d8/677d1da974d919ae98a3bd46_home-community-11.webp",
34+
alt: "Chainlink community event",
35+
},
36+
{
37+
id: "5",
38+
imageUrl:
39+
"https://cdn.prod.website-files.com/64cc2c23d8dbd707cdb556d8/677d1da974d919ae98a3bd51_home-community-3.webp",
40+
alt: "Chainlink community event",
41+
},
42+
{
43+
id: "6",
44+
imageUrl:
45+
"https://cdn.prod.website-files.com/64cc2c23d8dbd707cdb556d8/677d1da974d919ae98a3bd42_home-community-10.webp",
46+
alt: "Chainlink community event",
47+
},
48+
// Bottom row - scrolls right
49+
{
50+
id: "7",
51+
imageUrl:
52+
"https://cdn.prod.website-files.com/64cc2c23d8dbd707cdb556d8/677d1da974d919ae98a3bd24_community-photo-12.webp",
53+
alt: "Chainlink community event",
54+
},
55+
{
56+
id: "8",
57+
imageUrl:
58+
"https://cdn.prod.website-files.com/64cc2c23d8dbd707cdb556d8/677d1da974d919ae98a3bd2b_community-photo-10.webp",
59+
alt: "Chainlink community event",
60+
},
61+
{
62+
id: "9",
63+
imageUrl:
64+
"https://cdn.prod.website-files.com/64cc2c23d8dbd707cdb556d8/677d1da974d919ae98a3bd4c_community-photo-24.webp",
65+
alt: "Chainlink community event",
66+
},
67+
{
68+
id: "10",
69+
imageUrl:
70+
"https://cdn.prod.website-files.com/64cc2c23d8dbd707cdb556d8/677d1da974d919ae98a3bd3d_community-photo-22.webp",
71+
alt: "Chainlink community event",
72+
},
73+
{
74+
id: "11",
75+
imageUrl:
76+
"https://cdn.prod.website-files.com/64cc2c23d8dbd707cdb556d8/677d1da974d919ae98a3bd36_community-photo-30.webp",
77+
alt: "Chainlink community event",
78+
},
79+
]
80+
81+
const events = await fetchEventsFromRSS()
82+
---
83+
84+
<section class={styles.wrapper}>
85+
<header class={styles.sectionHeader}>
86+
<Typography
87+
variant="h2"
88+
style={{
89+
fontSize: "32px",
90+
}}
91+
>
92+
Community Events
93+
</Typography>
94+
95+
<a href="https://chain.link/community/events" class={styles.arrow}>
96+
<SvgArrowRight2 height={12} width={12} />
97+
</a>
98+
</header>
99+
<section class={styles.component}>
100+
<div class={styles.contentLeft}>
101+
<div role="list" class={styles.eventList}>
102+
{events.map((event) => <EventCard event={event} />)}
103+
</div>
104+
</div>
105+
106+
<div class={styles.contentRight}>
107+
<ImageGallery images={galleryImages} />
108+
</div>
109+
</section>
110+
</section>

‎src/components/CommunityEvents/CommunityEvents.module.css‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
.wrapper {
2+
margin: 86px 0;
3+
}
4+
.component {
5+
display: grid;
6+
grid-template-columns: 1fr 1fr;
7+
grid-template-rows: auto;
8+
grid-auto-columns: 1fr;
9+
align-items: center;
10+
gap: 33px;
11+
width: 100%;
12+
}
13+
14+
.contentLeft {
15+
justify-self: end;
16+
width: 100%;
17+
max-width: calc(var(--fullwidth-max-width) / 2);
18+
padding-left: var(--space-10x);
19+
}
20+
21+
.contentRight {
22+
display: flex;
23+
align-items: center;
24+
overflow: hidden;
25+
}
26+
27+
.sectionHeader {
28+
display: flex;
29+
gap: var(--space-4x);
30+
align-items: end;
31+
max-width: var(--fullwidth-max-width);
32+
margin-bottom: var(--space-8x);
33+
margin-left: auto;
34+
margin-right: auto;
35+
padding: 0 var(--space-10x);
36+
}
37+
38+
.arrow {
39+
padding: 10px;
40+
border: 1px solid var(--border);
41+
height: fit-content;
42+
cursor: pointer;
43+
transition: border-color 0.2s ease;
44+
}
45+
46+
.arrow:hover {
47+
border: 1px solid var(--foreground);
48+
}
49+
50+
.eventList {
51+
display: flex;
52+
flex-direction: column;
53+
gap: var(--space-6x);
54+
}
55+
56+
/* Tablet */
57+
@media (max-width: 1024px) {
58+
.component {
59+
display: flex;
60+
flex-direction: column-reverse;
61+
}
62+
63+
.contentRight {
64+
margin-left: 0;
65+
width: 100%;
66+
}
67+
68+
.contentLeft {
69+
max-width: 100%;
70+
}
71+
}
72+
73+
/* Mobile */
74+
@media (max-width: 768px) {
75+
.sectionHeader {
76+
margin-bottom: var(--space-6x);
77+
margin-left: unset;
78+
margin-right: unset;
79+
& > h2 {
80+
font-size: 28px;
81+
}
82+
}
83+
84+
.wrapper {
85+
margin: 36px 0;
86+
}
87+
}

‎src/components/CommunityEvents/EventCard.astro‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
---
2+
import { SvgArrowRight2, Typography } from "@chainlink/blocks"
3+
import type { CommunityEvent } from "./types"
4+
import styles from "./EventCard.module.css"
5+
6+
interface Props {
7+
event: CommunityEvent
8+
}
9+
10+
const { event } = Astro.props
11+
---
12+
13+
<a href={event.eventUrl} target="_blank" class={styles.eventCardLink}>
14+
<div class={styles.eventDate}>
15+
<Typography className={styles.eventMonth} color="muted">{event.month}</Typography>
16+
<Typography variant="body-semi-l" className={styles.eventDay}>{event.day}</Typography>
17+
</div>
18+
<div class={styles.eventCardDesc}>
19+
<div class={styles.eventCardCountry}>
20+
<div class={styles.eventCardFlag}>
21+
<img src={event.flagUrl} loading="lazy" alt={`${event.country} flag`} class={styles.coverImg} />
22+
</div>
23+
<Typography variant="code-s" className={styles.eventCardCountryName}>{event.location}</Typography>
24+
</div>
25+
<div class={styles.eventCardHWrap}>
26+
<Typography variant="body-semi-l" className={styles.eventCardH}>
27+
{event.title}
28+
</Typography>
29+
<img src="/assets/icons/upper-right-arrow.svg" alt="arrow" class={styles.linkArr} />
30+
</div>
31+
</div>
32+
</a>

‎src/components/CommunityEvents/EventCard.module.css‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
.eventCardLink {
2+
display: flex;
3+
align-items: center;
4+
gap: var(--space-4x);
5+
border-radius: 0.5rem;
6+
text-decoration: none;
7+
transition: all 0.3s ease;
8+
background-color: var(--background);
9+
}
10+
11+
.eventCardLink:hover .eventCardH {
12+
color: var(--brand) !important;
13+
}
14+
15+
.eventCardLink:hover .linkArr {
16+
opacity: 1 !important;
17+
}
18+
19+
.eventDate {
20+
display: flex;
21+
flex-direction: column;
22+
align-items: center;
23+
justify-content: center;
24+
padding: var(--space-2x) var(--space-5x);
25+
flex-shrink: 0;
26+
border: 1px solid var(--border);
27+
background-color: var(--muted);
28+
}
29+
30+
.eventCardDesc {
31+
display: flex;
32+
flex-direction: column;
33+
gap: var(--space-2x);
34+
flex: 1;
35+
min-width: 0;
36+
}
37+
38+
.eventCardCountry {
39+
display: flex;
40+
align-items: center;
41+
gap: var(--space-2x);
42+
}
43+
44+
.eventCardFlag {
45+
width: 16px;
46+
max-width: 16px;
47+
height: 16px;
48+
border-radius: 100%;
49+
overflow: hidden;
50+
flex-shrink: 0;
51+
position: relative;
52+
}
53+
54+
.coverImg {
55+
width: 100%;
56+
height: 100%;
57+
object-fit: cover;
58+
display: block;
59+
}
60+
61+
.eventCardCountryName {
62+
text-transform: uppercase;
63+
color: var(--gray-600);
64+
}
65+
66+
.eventCardHWrap {
67+
display: flex;
68+
align-items: baseline;
69+
gap: var(--space-3x);
70+
}
71+
72+
.linkArr {
73+
opacity: 0;
74+
}
75+
76+
@media (max-width: 768px) {
77+
.eventCardLink {
78+
gap: var(--space-3x);
79+
}
80+
}

‎src/components/CommunityEvents/ImageGallery.astro‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
---
2+
import type { GalleryImage } from "./types"
3+
import styles from "./ImageGallery.module.css"
4+
5+
interface Props {
6+
images: GalleryImage[]
7+
}
8+
9+
const { images } = Astro.props
10+
11+
// Split images into two rows for the gallery
12+
const topRowImages = images.slice(0, Math.ceil(images.length / 2))
13+
const bottomRowImages = images.slice(Math.ceil(images.length / 2))
14+
15+
// Duplicate images for seamless infinite scroll
16+
const topRowDuplicated = [...topRowImages, ...topRowImages]
17+
const bottomRowDuplicated = [...bottomRowImages, ...bottomRowImages]
18+
---
19+
20+
<div class={styles.gallery}>
21+
<!-- Top row - scrolls left -->
22+
<div class={styles.row}>
23+
{
24+
topRowDuplicated.map((image) => (
25+
<div class={styles.imageWrapper}>
26+
<img src={image.imageUrl} alt={image.alt} loading="lazy" class={styles.image} />
27+
</div>
28+
))
29+
}
30+
</div>
31+
32+
<!-- Bottom row - scrolls right -->
33+
<div class={`${styles.row} ${styles.rowReverse}`}>
34+
{
35+
bottomRowDuplicated.map((image) => (
36+
<div class={styles.imageWrapper}>
37+
<img src={image.imageUrl} alt={image.alt} loading="lazy" class={styles.image} />
38+
</div>
39+
))
40+
}
41+
</div>
42+
</div>

0 commit comments

Comments
 (0)