Skip to content

Commit e7ca8c6

Browse files
wackerowwackerow
authored
Merge pull request #13374 from saurabhburade/redesign-events-page
Feat: redesign events page ✨
2 parents 31c84cb + f85cb38 commit e7ca8c6

File tree

5 files changed

+214
-145
lines changed

5 files changed

+214
-145
lines changed

‎public/images/events/event-placeholder.png

1.81 KB
Loading

‎src/components/EventCard.tsx

Lines changed: 99 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
import React from "react"
2-
import { Box, Heading } from "@chakra-ui/react"
2+
import { useRouter } from "next/router"
3+
import { useTranslation } from "react-i18next"
4+
import { BsCalendar3 } from "react-icons/bs"
5+
import { Box, Flex, Heading, Icon } from "@chakra-ui/react"
6+
import { Image } from "@chakra-ui/react"
37

48
import { ButtonLink } from "./Buttons"
5-
import Emoji from "./Emoji"
69
import Text from "./OldText"
710

811
const clearStyles = {
@@ -16,87 +19,113 @@ export type EventCardProps = {
1619
title: string
1720
href: string
1821
date: string
22+
startDate: string
23+
endDate: string
1924
description: string
2025
className?: string
2126
location: string
22-
isEven: boolean
27+
imageUrl?: string
2328
}
2429

2530
const EventCard = ({
2631
title,
2732
href,
28-
date,
2933
description,
3034
className,
3135
location,
32-
isEven,
33-
}: EventCardProps) => (
34-
<Box
35-
className={className}
36-
position="relative"
37-
marginTop={{ base: "30px", md: 0 }}
38-
_before={clearStyles}
39-
_after={clearStyles}
40-
>
41-
<Box
42-
w="24px"
43-
h="24px"
44-
position="absolute"
45-
top="0"
46-
insetInlineStart="50%"
47-
overflow="hidden"
48-
ms="-12px"
49-
backgroundColor="primary.base"
50-
display={{ base: "none", md: "block" }}
51-
/>
36+
imageUrl,
37+
endDate,
38+
startDate,
39+
}: EventCardProps) => {
40+
const { locale } = useRouter()
41+
const { t } = useTranslation("page-community")
42+
const formatedDate = new Intl.DateTimeFormat(locale, {
43+
day: "2-digit",
44+
month: "short",
45+
}).formatRange(
46+
// .replace(/-/g, "/") ==> Fixes Safari Invalid date
47+
new Date(startDate?.replace(/-/g, "/")),
48+
new Date(endDate?.replace(/-/g, "/"))
49+
)
50+
51+
return (
5252
<Box
53-
width={{ base: "100%", md: "45%" }}
54-
padding={6}
55-
backgroundColor="ednBackground"
56-
borderRadius="sm"
57-
border="1px solid"
58-
borderColor="lightBorder"
59-
float={isEven ? "inline-end" : { base: "inline-end", md: "none" }}
60-
marginTop={isEven ? { base: 0, md: "-25%" } : 0}
61-
_before={{
62-
content: '""',
63-
position: "absolute",
64-
top: "10px",
65-
width: 0,
66-
height: "3px",
67-
display: { base: "none", md: "inline" },
68-
...(isEven
69-
? {
70-
insetInlineStart: "inherit",
71-
insetInlineEnd: "45%",
72-
borderInlineStart: 0,
73-
borderInlineEnd: "25px solid",
74-
}
75-
: {
76-
insetInlineStart: "45%",
77-
borderInlineStart: "25px solid",
78-
borderInlineEnd: 0,
79-
}),
80-
borderColor: "primary.base",
81-
}}
53+
className={className}
54+
position="relative"
55+
mt="0"
56+
_before={clearStyles}
57+
_after={clearStyles}
58+
w="full"
59+
h="full"
8260
>
83-
<Text color="primary.base" marginBottom={0} textAlign="end">
84-
{date}
85-
<Emoji text=":spiral_calendar:" fontSize="md" ms={2} />
86-
</Text>
87-
<Text marginBottom={0} textAlign="end">
88-
<Text as="span" opacity={0.6}>
89-
{location}
90-
</Text>
91-
<Emoji text=":round_pushpin:" fontSize="md" ms={2} />
92-
</Text>
93-
<Heading as="h3" marginTop={0} fontWeight="semibold" lineHeight={1.4}>
94-
{title}
95-
</Heading>
96-
<Text>{description}</Text>
97-
<ButtonLink href={href}>View Event</ButtonLink>
61+
<Flex
62+
border="1px solid"
63+
borderColor="lightBorder"
64+
height={"100%"}
65+
direction={"column"}
66+
justifyContent={"space-between"}
67+
rounded="base"
68+
>
69+
<Box>
70+
<Flex
71+
alignItems={"center"}
72+
justifyContent={"center"}
73+
background={"grayBackground"}
74+
padding={2}
75+
gap={2}
76+
borderBottom="1px solid"
77+
borderColor="primary.base"
78+
roundedTop={"4px"}
79+
>
80+
<Icon as={BsCalendar3} boxSize={6} color="primary.base" />
81+
82+
<Text color="primary.base" marginBottom={0} textAlign="end">
83+
{formatedDate}
84+
</Text>
85+
</Flex>
86+
87+
{/* TODO : add image hostname to next config or add event image to public dir */}
88+
<Flex
89+
alignItems="center"
90+
justifyContent="center"
91+
boxShadow="rgb(0 0 0 / 10%) 0px -1px 0px inset;"
92+
>
93+
<Image
94+
src={imageUrl || "/images/events/event-placeholder.png"}
95+
alt={title}
96+
w="full"
97+
height={{ base: "224px", xl: "124px" }}
98+
objectFit={"cover"}
99+
fallbackSrc="/images/events/event-placeholder.png"
100+
/>
101+
</Flex>
102+
<Box padding={4}>
103+
<Box textAlign={"center"}>
104+
<Heading
105+
as="h3"
106+
fontSize={{ base: "md", md: "2xl" }}
107+
marginTop={0}
108+
lineHeight={1.4}
109+
>
110+
{title}
111+
</Heading>
112+
<Text as="span" opacity={0.6}>
113+
{location}
114+
</Text>
115+
</Box>
116+
<Box>
117+
<Text fontSize="sm">{description}</Text>
118+
</Box>
119+
</Box>
120+
</Box>
121+
<Box padding={4} paddingTop={0} width={"100%"}>
122+
<ButtonLink href={href} width={"100%"} variant="outline">
123+
{t("page-community-upcoming-events-view-event")}
124+
</ButtonLink>
125+
</Box>
126+
</Flex>
98127
</Box>
99-
</Box>
100-
)
128+
)
129+
}
101130

102131
export default EventCard

‎src/components/MeetupList.tsx

Lines changed: 18 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import { useState } from "react"
22
import sortBy from "lodash/sortBy"
3+
import { FaChevronRight } from "react-icons/fa6"
34
import {
45
Box,
56
Flex,
7+
Icon,
68
LinkBox,
79
LinkOverlay,
810
List,
@@ -23,8 +25,6 @@ import { trackCustomEvent } from "@/lib/utils/matomo"
2325

2426
import meetups from "@/data/community-meetups.json"
2527

26-
import { useRtlFlip } from "@/hooks/useRtlFlip"
27-
2828
export interface Meetup {
2929
title: string
3030
emoji: string
@@ -49,13 +49,7 @@ const sortedMeetups: Array<Meetup> = sortBy(meetups, ["emoji", "location"])
4949
// TODO prop if ordered list or unordered
5050
const MeetupList = () => {
5151
const [searchField, setSearchField] = useState<string>("")
52-
const { flipForRtl } = useRtlFlip()
5352
const filteredMeetups = filterMeetups(searchField)
54-
const listBoxShadow = useColorModeValue("tableBox.light", "tableBox.dark")
55-
const listItemBoxShadow = useColorModeValue(
56-
"tableItemBox.light",
57-
"tableItemBox.dark"
58-
)
5953

6054
const handleSearch = (event: React.ChangeEvent<HTMLInputElement>): void => {
6155
setSearchField(event.target.value)
@@ -81,14 +75,18 @@ const MeetupList = () => {
8175
results update as you type
8276
</VisuallyHidden>
8377

84-
<List m={0} boxShadow={listBoxShadow} aria-label="Event meetup results">
78+
<List
79+
m={0}
80+
border={"2px solid"}
81+
borderColor={"offBackground"}
82+
aria-label="Event meetup results"
83+
>
8584
{filteredMeetups.map((meetup, idx) => (
8685
<LinkBox
8786
as={ListItem}
8887
key={idx}
8988
display="flex"
9089
justifyContent="space-between"
91-
boxShadow={listItemBoxShadow}
9290
mb={0.25}
9391
p={4}
9492
w="100%"
@@ -98,6 +96,8 @@ const MeetupList = () => {
9896
boxShadow: `0 0 1px ${primaryBaseColor}`,
9997
bg: "tableBackgroundHover",
10098
}}
99+
borderBottom={"2px solid"}
100+
borderColor={"offBackground"}
101101
>
102102
<Flex flex="1 1 75%" me={4}>
103103
<Box me={4} opacity="0.4">
@@ -133,16 +133,14 @@ const MeetupList = () => {
133133
{meetup.location}
134134
</Text>
135135
</Flex>
136-
<Box
137-
as="span"
138-
_after={{
139-
content: '"↗"',
140-
ms: 0.5,
141-
me: 1.5,
142-
transform: flipForRtl,
143-
display: "inline-block",
144-
}}
145-
></Box>
136+
<Flex alignItems={"center"}>
137+
<Icon
138+
as={FaChevronRight}
139+
width={{ base: "14px", xl: "18px" }}
140+
height={{ base: "14px", xl: "18px" }}
141+
color={"text"}
142+
/>
143+
</Flex>
146144
</LinkBox>
147145
))}
148146
</List>

0 commit comments

Comments
 (0)