Skip to content

Commit 68edd2b

Browse files
megasanjaymegasanjay
committed
feat: add support for short dates
1 parent af47879 commit 68edd2b

5 files changed

Lines changed: 73 additions & 56 deletions

File tree

‎src/components/events/EventDates.tsx‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,13 @@ import dayjs from 'dayjs';
33
interface EventDateItemProps {
44
startDateTime: string;
55
endDateTime: string;
6+
short?: boolean;
67
}
78

89
const EventDates: React.FC<EventDateItemProps> = ({
910
startDateTime,
1011
endDateTime,
12+
short = false,
1113
}) => {
1214
const isSameDay = dayjs(startDateTime).isSame(dayjs(endDateTime), `day`);
1315
const isTimeProvided = dayjs(startDateTime).format(`hh:mm a`) !== `12:00 am`;
@@ -16,19 +18,28 @@ const EventDates: React.FC<EventDateItemProps> = ({
1618
<p className="font-medium text-slate-100">
1719
<time>
1820
{dayjs(startDateTime).format(
19-
isTimeProvided ? `MMMM D, YYYY - hh:mm a` : `MMMM D, YYYY`,
21+
isTimeProvided
22+
? short
23+
? `MMMM D, YYYY`
24+
: `MMMM D, YYYY - hh:mm a`
25+
: `MMMM D, YYYY`,
2026
)}
2127
</time>
2228
{` `}
23-
<span className="text-xs">to</span>
29+
2430
{` `}
2531
{isSameDay ? (
26-
<time>{dayjs(endDateTime).format(`hh:mm a`)}</time>
32+
<time>{short ? '' : 'to ' + dayjs(endDateTime).format(`hh:mm a`)}</time>
2733
) : (
2834
<time>
29-
{dayjs(endDateTime).format(
30-
isTimeProvided ? `MMMM D, YYYY - hh:mm a` : `MMMM D, YYYY`,
31-
)}
35+
{'to ' +
36+
dayjs(endDateTime).format(
37+
isTimeProvided
38+
? short
39+
? `MMMM D, YYYY`
40+
: `MMMM D, YYYY - hh:mm a`
41+
: `MMMM D, YYYY`,
42+
)}
3243
</time>
3344
)}
3445
</p>

‎src/components/events/EventFeatured.tsx‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -63,29 +63,32 @@ export default function EventFeatured({
6363
)}
6464

6565
<div className="p-5 sm:p-6">
66-
<div className="mb-2 flex flex-wrap items-center gap-2 text-xs text-slate-600">
67-
<span className="bg-primary inline-flex items-center rounded-lg border border-white px-2 py-0.5">
66+
<div className="mb-2 flex flex-wrap items-center justify-between gap-2 text-xs text-slate-600">
67+
<span className="inline-flex items-center rounded-lg border border-white bg-primary px-2 py-0.5">
6868
<EventDates
6969
startDateTime={startDateTime}
7070
endDateTime={endDateTime}
7171
/>
7272
</span>
73-
{type && (
74-
<span className="rounded-full border border-slate-300 px-2 py-0.5 text-[11px]">
75-
{type}
76-
</span>
77-
)}
78-
{location && (
79-
<span className="rounded-full border border-slate-300 px-2 py-0.5 text-[11px]">
80-
{location}
81-
</span>
82-
)}
73+
74+
<div className="flex items-center gap-2">
75+
{type && (
76+
<span className="rounded-full border border-slate-300 px-2 py-0.5 text-[11px]">
77+
{type}
78+
</span>
79+
)}
80+
{location && (
81+
<span className="rounded-full border border-slate-300 px-2 py-0.5 text-[11px]">
82+
{location}
83+
</span>
84+
)}
85+
</div>
8386
</div>
8487

8588
<motion.h2
8689
variants={titleV}
8790
transition={{ duration: 0.2 }}
88-
className="group-hover:text-primary text-2xl leading-tight font-bold text-balance text-slate-900 group-hover:underline sm:text-3xl"
91+
className="text-balance text-2xl font-bold leading-tight text-slate-900 group-hover:text-primary group-hover:underline sm:text-3xl"
8992
>
9093
{title}
9194
</motion.h2>
@@ -97,7 +100,7 @@ export default function EventFeatured({
97100
)}
98101

99102
{/* Styled CTA, not a link (the whole card already is) */}
100-
<span className="group-hover:text-primary mt-4 inline-flex items-center text-sm font-medium underline-offset-4 group-hover:underline">
103+
<span className="mt-4 inline-flex items-center text-sm font-medium underline-offset-4 group-hover:text-primary group-hover:underline">
101104
View details
102105
<Icon
103106
icon="solar:arrow-right-broken"

‎src/components/events/EventListItem.tsx‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -57,18 +57,18 @@ export default function EventListItem({
5757

5858
<div className="min-w-0 flex-1">
5959
<div className="flex-items-center flex justify-between gap-6">
60-
<h3 className="group-hover:text-primary font-semibold text-slate-900 transition-all sm:text-lg">
60+
<h3 className="font-semibold text-slate-900 transition-all group-hover:text-primary sm:text-lg">
6161
{title}
6262
</h3>
6363

64-
<div className="flex items-center gap-2 text-xs">
64+
<div className="flex w-max items-start gap-2 pt-1 text-xs">
6565
{type && (
66-
<span className="group-hover:border-primary/50 rounded-lg border border-slate-300 px-2 py-0.5 transition-all">
66+
<span className="w-max rounded-lg border border-slate-300 px-2 py-0.5 transition-all group-hover:border-primary/50">
6767
{type}
6868
</span>
6969
)}
7070
{location && (
71-
<span className="group-hover:border-primary/50 rounded-lg border border-slate-300 px-2 py-0.5 transition-all">
71+
<span className="w-max rounded-lg border border-slate-300 px-2 py-0.5 transition-all group-hover:border-primary/50">
7272
{location}
7373
</span>
7474
)}
@@ -79,8 +79,8 @@ export default function EventListItem({
7979
<p className="line-clamp-2 text-sm text-slate-700">{subtitle}</p>
8080
)}
8181

82-
<div className="text-slate-700s mt-4 flex items-center justify-between gap-2">
83-
<span className="group-hover:text-primary items-center text-sm font-medium transition-all">
82+
<div className="mt-4 flex items-center justify-between gap-2 text-slate-700">
83+
<span className="items-center text-sm font-medium transition-all group-hover:text-primary">
8484
{isPast ? `View recap` : `Learn more`}
8585
<Icon
8686
icon="solar:arrow-right-broken"
@@ -89,10 +89,11 @@ export default function EventListItem({
8989
/>
9090
</span>
9191

92-
<span className="bg-primary items-center rounded-lg px-2 py-0.5 text-xs">
92+
<span className="items-center rounded-lg bg-primary px-2 py-0.5 text-xs">
9393
<EventDates
9494
startDateTime={startDateTime}
9595
endDateTime={endDateTime}
96+
short
9697
/>
9798
</span>
9899
</div>

‎src/pages/events/[slug].tsx‎

Lines changed: 23 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ const EventPost: React.FC<PostProps> = ({ slug, frontMatter, postContent }) => {
8686
/>
8787

8888
<Link href="/events" passHref>
89-
<div className="text-url top-0 left-0 mx-4 my-4 cursor-pointer py-1 text-[14px] font-semibold hover:underline sm:absolute sm:text-base">
89+
<div className="text-url left-0 top-0 mx-4 my-4 cursor-pointer py-1 text-[14px] font-semibold hover:underline sm:absolute sm:text-base">
9090
<div className="flex items-center justify-center">
9191
<Icon icon="eva:arrow-ios-back-fill" /> All Events
9292
</div>
@@ -111,7 +111,7 @@ const EventPost: React.FC<PostProps> = ({ slug, frontMatter, postContent }) => {
111111
aria-label="Image author"
112112
target="_blank"
113113
rel="noopener"
114-
className="absolute right-1 bottom-1 z-20 flex flex-row justify-center opacity-0 transition-all group-hover:opacity-100"
114+
className="absolute bottom-1 right-1 z-20 flex flex-row justify-center opacity-0 transition-all group-hover:opacity-100"
115115
>
116116
<div className="glass-container flex items-center justify-center rounded-md px-1 py-[2px] text-slate-700 transition-all hover:text-black">
117117
<Icon icon="ic:baseline-photo-camera-front" />
@@ -123,27 +123,29 @@ const EventPost: React.FC<PostProps> = ({ slug, frontMatter, postContent }) => {
123123
</div>
124124
<div className=" ">
125125
<Link href={`/category/${category}`} passHref>
126-
<h3 className="text-accent mb-2 cursor-pointer text-lg font-bold hover:underline">
126+
<h3 className="mb-2 cursor-pointer text-lg font-bold text-accent hover:underline">
127127
{category}
128128
</h3>
129129
</Link>
130130

131-
<div className="my-2 flex items-center space-x-2">
132-
<span className="me-2 rounded bg-purple-100 px-2.5 py-0.5 text-sm font-medium text-purple-800">
133-
{type}
134-
</span>
135-
<span className="me-2 rounded bg-pink-100 px-2.5 py-0.5 text-sm font-medium text-pink-800">
136-
{location}
131+
<div className="my-2 flex items-center justify-between">
132+
<div className="flex items-center gap-2">
133+
<span className="me-2 rounded bg-purple-100 px-2.5 py-0.5 text-sm font-medium text-purple-800">
134+
{type}
135+
</span>
136+
<span className="me-2 rounded bg-pink-100 px-2.5 py-0.5 text-sm font-medium text-pink-800">
137+
{location}
138+
</span>
139+
</div>
140+
141+
<span className="inline-flex items-center rounded-lg border border-white bg-primary px-2 py-0.5">
142+
<EventDates
143+
startDateTime={startDateTime}
144+
endDateTime={endDateTime}
145+
/>
137146
</span>
138147
</div>
139148

140-
<span className="bg-primary inline-flex items-center rounded-lg border border-white px-2 py-0.5">
141-
<EventDates
142-
startDateTime={startDateTime}
143-
endDateTime={endDateTime}
144-
/>
145-
</span>
146-
147149
<hr className="my-4 border-dashed border-slate-200" />
148150

149151
<h1 className="mb-6 text-5xl font-extrabold text-slate-700">
@@ -164,7 +166,7 @@ const EventPost: React.FC<PostProps> = ({ slug, frontMatter, postContent }) => {
164166
href={`http://twitter.com/share?text=I just read this article and think y'all need to take a look at this&url=https://fairdataihub.org/events/${slug}&hashtags=FAIRData,OpenScience,OpenSource`}
165167
target="_blank"
166168
rel="noopener"
167-
className="hover:text-accent mx-2 text-slate-500 transition-all"
169+
className="mx-2 text-slate-500 transition-all hover:text-accent"
168170
data-umami-event="Share article"
169171
data-umami-event-type="Twitter"
170172
aria-label="Share on Twitter"
@@ -175,7 +177,7 @@ const EventPost: React.FC<PostProps> = ({ slug, frontMatter, postContent }) => {
175177
href={`https://www.facebook.com/sharer/sharer.php?u=https://fairdataihub.org/events/${slug}"`}
176178
target="_blank"
177179
rel="noopener"
178-
className="hover:text-accent mx-2 text-slate-500 transition-all"
180+
className="mx-2 text-slate-500 transition-all hover:text-accent"
179181
data-umami-event="Share article"
180182
data-umami-event-type="Facebook"
181183
aria-label="Share on Facebook"
@@ -186,7 +188,7 @@ const EventPost: React.FC<PostProps> = ({ slug, frontMatter, postContent }) => {
186188
href={`https://www.linkedin.com/sharing/share-offsite/?url=https://fairdataihub.org/events/${slug}`}
187189
target="_blank"
188190
rel="noopener"
189-
className="hover:text-accent mx-2 text-slate-500 transition-all"
191+
className="mx-2 text-slate-500 transition-all hover:text-accent"
190192
data-umami-event="Share article"
191193
data-umami-event-type="LinkedIn"
192194
aria-label="Share on LinkedIn"
@@ -199,7 +201,7 @@ const EventPost: React.FC<PostProps> = ({ slug, frontMatter, postContent }) => {
199201
</a>
200202
<div
201203
onClick={copyLinkToClipboard}
202-
className="hover:text-accent mx-2 cursor-pointer text-slate-500 transition-all"
204+
className="mx-2 cursor-pointer text-slate-500 transition-all hover:text-accent"
203205
data-umami-event="Share article"
204206
data-umami-event-type="Copy URL"
205207
aria-label="Copy to clipboard"
@@ -208,7 +210,7 @@ const EventPost: React.FC<PostProps> = ({ slug, frontMatter, postContent }) => {
208210
</div>
209211
</div>
210212

211-
<div className="mt-10 mb-10">
213+
<div className="mb-10 mt-10">
212214
<Giscus
213215
key={slug}
214216
id="comments"

‎src/pages/events/index.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ export default function Events({ eventsList }: EventsProps) {
6161
const [featured, ...upcomingRest] = upcoming;
6262

6363
return (
64-
<div className="relative pt-26">
64+
<div className="pt-26 relative">
6565
<Seo
6666
templateTitle="Events"
6767
templateUrl="https://fairdataihub.org/events"
@@ -70,26 +70,26 @@ export default function Events({ eventsList }: EventsProps) {
7070
/>
7171

7272
<div aria-hidden className="pointer-events-none fixed inset-0 -z-10">
73-
<div className="absolute top-0 left-1/2 h-[720px] w-[1000px] -translate-x-1/2 bg-[radial-gradient(ellipse_at_center,rgba(211,75,171,0.30),rgba(211,75,171,0.12)_40%,transparent_75%)] blur-3xl" />
73+
<div className="absolute left-1/2 top-0 h-[720px] w-[1000px] -translate-x-1/2 bg-[radial-gradient(ellipse_at_center,rgba(211,75,171,0.30),rgba(211,75,171,0.12)_40%,transparent_75%)] blur-3xl" />
7474
</div>
7575

76-
<section className="container mx-auto w-full max-w-screen-xl px-4 pt-8 pb-16 xl:min-w-[1280px]">
76+
<section className="container mx-auto w-full max-w-screen-xl px-4 pb-16 pt-8 xl:min-w-[1280px]">
7777
<motion.header
7878
initial={{ opacity: 0, y: 8 }}
7979
animate={{ opacity: 1, y: 0 }}
8080
transition={{ duration: 0.35, ease: `easeOut` }}
8181
className="mb-8 sm:mb-10"
8282
>
83-
<h1 className="text-4xl font-black tracking-tight text-pretty text-stone-900 sm:text-5xl dark:text-stone-100">
83+
<h1 className="text-pretty text-4xl font-black tracking-tight text-stone-900 dark:text-stone-100 sm:text-5xl">
8484
Events
8585
</h1>
86-
<p className="font-asap my-2 max-w-2xl text-lg text-stone-700 dark:text-stone-300">
86+
<p className="my-2 max-w-2xl font-asap text-lg text-stone-700 dark:text-stone-300">
8787
Join our talks, workshops, and community sessions on FAIR practices.
8888
</p>
89-
<div className="via-primary/60 h-px w-full bg-gradient-to-r from-transparent to-transparent" />
89+
<div className="h-px w-full bg-gradient-to-r from-transparent via-primary/60 to-transparent" />
9090
</motion.header>
9191

92-
<h2 className="mb-3 text-sm font-semibold tracking-wider text-stone-500 uppercase">
92+
<h2 className="mb-3 text-sm font-semibold uppercase tracking-wider text-stone-500">
9393
Upcoming Events
9494
</h2>
9595

@@ -133,7 +133,7 @@ export default function Events({ eventsList }: EventsProps) {
133133

134134
<div className="my-8 h-px w-full bg-gradient-to-r from-transparent via-slate-200 to-transparent" />
135135

136-
<h2 className="mb-3 text-sm font-semibold tracking-wider text-stone-500 uppercase">
136+
<h2 className="mb-3 text-sm font-semibold uppercase tracking-wider text-stone-500">
137137
Past Events
138138
</h2>
139139

0 commit comments

Comments
 (0)