Skip to content

Commit 6ffeb32

Browse files
ellerylielleryli
committed
Address remaining review threads
1 parent d6c1dba commit 6ffeb32

14 files changed

Lines changed: 663 additions & 578 deletions

‎components/Activity/Hackathon/HackathonActionHub.module.less‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import './theme.less';
1+
@import "./theme.less";
22

33
.section {
44
.section-shell();
@@ -10,11 +10,19 @@
1010
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
1111
gap: 1.5rem;
1212
align-items: start;
13+
14+
@media (max-width: 1199px) {
15+
grid-template-columns: 1fr;
16+
}
1317
}
1418

1519
.registerCard {
1620
.panel-card();
17-
background: linear-gradient(135deg, rgba(44, 232, 255, 0.08), rgba(123, 97, 255, 0.14));
21+
background: linear-gradient(
22+
135deg,
23+
rgba(44, 232, 255, 0.08),
24+
rgba(123, 97, 255, 0.14)
25+
);
1826
}
1927

2028
.registerCardInner,
@@ -132,9 +140,3 @@
132140
letter-spacing: 0.06em;
133141
text-transform: uppercase;
134142
}
135-
136-
@media (max-width: 1199px) {
137-
.registerWrap {
138-
grid-template-columns: 1fr;
139-
}
140-
}

‎components/Activity/Hackathon/HackathonActionHub.tsx‎

Lines changed: 29 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { FC } from 'react';
1+
import { FC, type PropsWithChildren } from 'react';
22
import { Col, Container, Row } from 'react-bootstrap';
33

44
import { HackathonHeroAction } from './HackathonHero';
@@ -18,25 +18,29 @@ export interface HackathonActionHubProps {
1818
primaryAction?: HackathonHeroAction;
1919
primaryDescription: string;
2020
primaryTitle: string;
21-
secondaryAction: HackathonHeroAction;
2221
subtitle: string;
2322
title: string;
2423
}
2524

26-
const ActionHubLink: FC<{ action: HackathonHeroAction; variant: 'ghost' | 'primary' }> = ({
27-
action,
28-
variant,
29-
}) => (
25+
export const HackathonActionHubLink: FC<{
26+
action: HackathonHeroAction;
27+
variant: 'ghost' | 'primary';
28+
}> = ({ action, variant }) => (
3029
<a
31-
className={variant === 'primary' ? styles.actionButton : styles.actionButtonGhost}
30+
className={
31+
variant === 'primary' ? styles.actionButton : styles.actionButtonGhost
32+
}
3233
href={action.href}
3334
{...(action.external && { target: '_blank', rel: 'noreferrer' })}
3435
>
3536
{action.label}
3637
</a>
3738
);
3839

39-
const ActionEntryCard: FC<{ entry: HackathonActionHubEntry; step: string }> = ({ entry, step }) => (
40+
const ActionEntryCard: FC<{ entry: HackathonActionHubEntry; step: string }> = ({
41+
entry,
42+
step,
43+
}) => (
4044
<article className={styles.entryCard}>
4145
<span className={styles.entryStep}>
4246
{step} · {entry.eyebrow}
@@ -50,7 +54,7 @@ const ActionEntryCard: FC<{ entry: HackathonActionHubEntry; step: string }> = ({
5054
</div>
5155

5256
<nav className={styles.entryLinks} aria-label={entry.title}>
53-
{entry.links.map(link => (
57+
{entry.links.map((link) => (
5458
<a
5559
key={`${link.label}-${link.href}`}
5660
className={styles.entryLink}
@@ -64,13 +68,15 @@ const ActionEntryCard: FC<{ entry: HackathonActionHubEntry; step: string }> = ({
6468
</article>
6569
);
6670

67-
export const HackathonActionHub: FC<HackathonActionHubProps> = ({
71+
export const HackathonActionHub: FC<
72+
PropsWithChildren<HackathonActionHubProps>
73+
> = ({
74+
children,
6875
entries,
6976
facts,
7077
primaryAction,
7178
primaryDescription,
7279
primaryTitle,
73-
secondaryAction,
7480
subtitle,
7581
title,
7682
}) => (
@@ -84,12 +90,17 @@ export const HackathonActionHub: FC<HackathonActionHubProps> = ({
8490
<p className={styles.regDesc}>{primaryDescription}</p>
8591

8692
<nav className={styles.regActions} aria-label={title}>
87-
{primaryAction && <ActionHubLink action={primaryAction} variant="primary" />}
88-
<ActionHubLink action={secondaryAction} variant="ghost" />
93+
{primaryAction && (
94+
<HackathonActionHubLink
95+
action={primaryAction}
96+
variant="primary"
97+
/>
98+
)}
99+
{children}
89100
</nav>
90101

91102
<ul className={`list-unstyled ${styles.regFacts}`}>
92-
{facts.map(fact => (
103+
{facts.map((fact) => (
93104
<li key={fact}>{fact}</li>
94105
))}
95106
</ul>
@@ -105,7 +116,10 @@ export const HackathonActionHub: FC<HackathonActionHubProps> = ({
105116
<Row as="ol" className="list-unstyled g-3 mb-0">
106117
{entries.map((entry, index) => (
107118
<Col as="li" key={entry.title} md={6}>
108-
<ActionEntryCard entry={entry} step={String(index + 1).padStart(2, '0')} />
119+
<ActionEntryCard
120+
entry={entry}
121+
step={String(index + 1).padStart(2, '0')}
122+
/>
109123
</Col>
110124
))}
111125
</Row>

‎components/Activity/Hackathon/HackathonAwards.module.less‎

Lines changed: 6 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,11 @@
1-
@import './theme.less';
1+
@import "./theme.less";
22

3-
.section {
4-
.section-shell();
5-
}
6-
7-
.sectionHeader {
8-
.section-header();
9-
}
3+
.section-frame();
104

11-
.sectionTitle {
12-
.section-title();
13-
}
14-
15-
.sectionSubtitle,
165
.supportEyebrow {
176
.section-subtitle();
187
}
198

20-
.accentLine {
21-
.accent-line();
22-
}
23-
249
.awardsGrid {
2510
display: grid;
2611
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
@@ -116,6 +101,10 @@
116101
gap: 1.25rem;
117102
margin-top: 1.4rem;
118103
padding: 1.55rem;
104+
105+
@media (max-width: 1199px) {
106+
grid-template-columns: 1fr;
107+
}
119108
}
120109

121110
.supportTitle {
@@ -146,9 +135,3 @@
146135
max-height: 58px;
147136
object-fit: contain;
148137
}
149-
150-
@media (max-width: 1199px) {
151-
.supportCard {
152-
grid-template-columns: 1fr;
153-
}
154-
}

‎components/Activity/Hackathon/HackathonAwards.tsx‎

Lines changed: 27 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,9 @@ import { Container } from 'react-bootstrap';
55
import { LarkImage } from '../../LarkImage';
66
import styles from './HackathonAwards.module.less';
77

8-
export interface HackathonAwardsMeta {
9-
label: string;
10-
value: string;
11-
}
8+
export type HackathonAwardsMeta<Value = string> = Record<'label', string> & {
9+
value: Value;
10+
};
1211

1312
export interface HackathonPrizeItem {
1413
description: string;
@@ -36,7 +35,13 @@ export interface HackathonAwardsProps {
3635
title: string;
3736
}
3837

39-
const PrizeCard: FC<HackathonPrizeItem> = ({ description, image, meta, tier, title }) => (
38+
const PrizeCard: FC<HackathonPrizeItem> = ({
39+
description,
40+
image,
41+
meta,
42+
tier,
43+
title,
44+
}) => (
4045
<article className={styles.badgeTile}>
4146
{image && (
4247
<div className={styles.badgeArtWrap}>
@@ -61,11 +66,23 @@ const PrizeCard: FC<HackathonPrizeItem> = ({ description, image, meta, tier, tit
6166
</article>
6267
);
6368

64-
const OrganizationLogo: FC<HackathonOrganizationItem> = ({ href, logo, name }) => {
65-
const imageNode = <LarkImage src={logo} alt={name} className={styles.partnerLogo} />;
69+
const OrganizationLogo: FC<HackathonOrganizationItem> = ({
70+
href,
71+
logo,
72+
name,
73+
}) => {
74+
const imageNode = (
75+
<LarkImage src={logo} alt={name} className={styles.partnerLogo} />
76+
);
6677

6778
return href ? (
68-
<a href={href} target="_blank" rel="noreferrer" title={name} className={styles.partnerLink}>
79+
<a
80+
href={href}
81+
target="_blank"
82+
rel="noreferrer"
83+
title={name}
84+
className={styles.partnerLink}
85+
>
6986
{imageNode}
7087
</a>
7188
) : (
@@ -95,7 +112,7 @@ export const HackathonAwards: FC<HackathonAwardsProps> = ({
95112
</header>
96113

97114
<div className={styles.awardsGrid}>
98-
{prizes.map(prize => (
115+
{prizes.map((prize) => (
99116
<PrizeCard key={prize.id} {...prize} />
100117
))}
101118
</div>
@@ -111,7 +128,7 @@ export const HackathonAwards: FC<HackathonAwardsProps> = ({
111128
</div>
112129

113130
<nav className={styles.partnerGrid} aria-label={supportEyebrow}>
114-
{organizations.map(organization => (
131+
{organizations.map((organization) => (
115132
<OrganizationLogo key={organization.id} {...organization} />
116133
))}
117134
</nav>

‎components/Activity/Hackathon/HackathonHero.tsx‎

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { FC } from 'react';
33
import { Container } from 'react-bootstrap';
44

55
import { LarkImage } from '../../LarkImage';
6+
import type { HackathonAwardsMeta } from './HackathonAwards';
67
import styles from './HackathonHero.module.less';
78

89
export interface HackathonHeroAction {
@@ -17,10 +18,7 @@ export interface HackathonHeroCard {
1718
title: string;
1819
}
1920

20-
export interface HackathonHeroStat {
21-
label: string;
22-
value: number;
23-
}
21+
export type HackathonHeroStat = HackathonAwardsMeta<number>;
2422

2523
export interface HackathonHeroProps {
2624
badges: string[];
@@ -48,23 +46,25 @@ const BadgeToneClass = [
4846
styles.heroBadgeRose,
4947
];
5048

51-
const HeroLink: FC<{ action: HackathonHeroAction; variant: 'ghost' | 'primary' }> = ({
52-
action,
53-
variant,
54-
}) => (
49+
const HeroLink: FC<{
50+
action: HackathonHeroAction;
51+
variant: 'ghost' | 'primary';
52+
}> = ({ action, variant }) => (
5553
<a
56-
className={variant === 'primary' ? styles.actionButton : styles.actionButtonGhost}
54+
className={
55+
variant === 'primary' ? styles.actionButton : styles.actionButtonGhost
56+
}
5757
href={action.href}
5858
{...(action.external && { target: '_blank', rel: 'noreferrer' })}
5959
>
6060
{action.label}
6161
</a>
6262
);
6363

64-
const FloatingCard: FC<{ card: HackathonHeroCard; position: 'bottom' | 'top' }> = ({
65-
card,
66-
position,
67-
}) => (
64+
const FloatingCard: FC<{
65+
card: HackathonHeroCard;
66+
position: 'bottom' | 'top';
67+
}> = ({ card, position }) => (
6868
<div
6969
className={`${styles.heroFloatingCard} ${position === 'top' ? styles.heroFloatingCardTop : styles.heroFloatingCardBottom}`}
7070
>
@@ -140,7 +140,11 @@ export const HackathonHero: FC<HackathonHeroProps> = ({
140140
<div className={styles.mascotGlow} />
141141

142142
{image ? (
143-
<LarkImage src={image} alt={name} className="w-100 h-100 object-fit-cover" />
143+
<LarkImage
144+
src={image}
145+
alt={name}
146+
className="w-100 h-100 object-fit-cover"
147+
/>
144148
) : (
145149
<div className={styles.heroImageFallback}>{imageFallback}</div>
146150
)}

‎components/Activity/Hackathon/HackathonOverview.module.less‎

Lines changed: 7 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,16 @@
1-
@import './theme.less';
1+
@import "./theme.less";
22

3-
.section {
4-
.section-shell();
5-
}
6-
7-
.sectionHeader {
8-
.section-header();
9-
}
10-
11-
.sectionTitle {
12-
.section-title();
13-
}
14-
15-
.sectionSubtitle {
16-
.section-subtitle();
17-
}
18-
19-
.accentLine {
20-
.accent-line();
21-
}
3+
.section-frame();
224

235
.themePanel {
246
margin-bottom: 1.5rem;
257
border: 1px solid rgba(255, 255, 255, 0.08);
268
border-radius: 28px;
27-
background: linear-gradient(135deg, rgba(44, 232, 255, 0.08), rgba(123, 97, 255, 0.12));
9+
background: linear-gradient(
10+
135deg,
11+
rgba(44, 232, 255, 0.08),
12+
rgba(123, 97, 255, 0.12)
13+
);
2814
padding: 1.5rem 1.6rem;
2915
}
3016

0 commit comments

Comments
 (0)