Skip to content

Commit e9f2f7d

Browse files
CopilotTechQuery
Copilot
and
TechQuery
committed
Use UserRankView for prizes, GitCard for templates, and improve card contrast
Co-authored-by: TechQuery <19969570+TechQuery@users.noreply.github.com>
1 parent a167b04 commit e9f2f7d

5 files changed

Lines changed: 102 additions & 130 deletions

File tree

‎pages/hackathon/[id].tsx‎

Lines changed: 35 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,10 @@ import { observer } from 'mobx-react';
22
import { GetServerSideProps } from 'next';
33
import { FC, useContext } from 'react';
44
import { Badge, Button, Card, Col, Container, Row } from 'react-bootstrap';
5+
import { UserRankView } from 'idea-react';
56

67
import { PageHead } from '../../components/Layout/PageHead';
8+
import { GitCard } from '../../components/Git/Card';
79
import { generateMockHackathon, Hackathon } from '../../models/Hackathon';
810
import { I18nContext } from '../../models/Translation';
911
import styles from '../../styles/Hackathon.module.less';
@@ -135,95 +137,58 @@ const HackathonDetail: FC<HackathonDetailProps> = observer(({ hackathon }) => {
135137
</section>
136138
</Col>
137139

138-
{/* Prizes Section - Frameless vertical cards */}
140+
{/* Prizes Section - Using UserRankView */}
139141
<Col lg={6}>
140-
<section className={styles.section}>
142+
<section className={`${styles.section} ${styles.prizeSection}`}>
141143
<h2 className={styles.sectionTitle}>🏆 {t('prizes')}</h2>
142144
<div className="mt-4">
143-
{hackathon.prizes.map((prize, index) => (
144-
<div key={index} className={styles.prizeCard}>
145-
<Row className="align-items-center">
146-
<Col xs={3}>
147-
<img src={prize.image} alt={prize.name} className={styles.prizeImage} />
148-
</Col>
149-
<Col xs={9}>
150-
<h5 className="text-white mb-2">{prize.name}</h5>
151-
<div className="d-flex justify-content-between align-items-center mb-2">
152-
<Badge bg={getLevelColor(prize.level)}>{t(prize.level as any)}</Badge>
153-
<span className="text-white fw-bold">
154-
¥{prize.price.toLocaleString()}
155-
</span>
156-
</div>
157-
<div className="text-white-50 small">
158-
<strong>{t('sponsor')}:</strong> {prize.sponsor} • <strong>{t('amount')}:</strong> {prize.amount}
159-
</div>
160-
</Col>
161-
</Row>
162-
</div>
163-
))}
145+
<UserRankView
146+
title={t('hackathon_prizes')}
147+
rank={hackathon.prizes.map((prize, index) => ({
148+
id: `prize-${index}`,
149+
name: prize.name,
150+
avatar: prize.image,
151+
score: prize.price,
152+
email: prize.sponsor,
153+
}))}
154+
/>
164155
</div>
165156
</section>
166157
</Col>
167158
</Row>
168159

169-
{/* Mid-front: Organizations - Frameless vertical cards */}
160+
{/* Mid-front: Organizations - Horizontal logo layout */}
170161
<section className={styles.section}>
171162
<h2 className={styles.sectionTitle}>🏢 {t('organizations')}</h2>
172-
<div className="mt-4">
163+
<div className={styles.orgContainer}>
173164
{hackathon.organizations.map((org, index) => (
174-
<div key={index} className={styles.orgCard}>
175-
<Row className="align-items-center mb-3">
176-
<Col xs={2} md={1}>
177-
<img src={org.logo} alt={org.name} className={styles.logo} />
178-
</Col>
179-
<Col xs={10} md={11}>
180-
<h5 className="text-white mb-2">{org.name}</h5>
181-
<a href={org.link} target="_blank" rel="noreferrer" className="text-info small">
182-
{org.link}
183-
</a>
184-
</Col>
185-
</Row>
186-
<div className="text-white-50 small mb-2">
187-
<strong>{t('members')}:</strong> {org.members.join(', ')}
188-
</div>
189-
<div className="text-white-50 small">
190-
<strong>{t('prizes')}:</strong> {org.prizes.join(', ')}
191-
</div>
192-
</div>
165+
<a
166+
key={index}
167+
href={org.link}
168+
target="_blank"
169+
rel="noreferrer"
170+
title={org.name}
171+
>
172+
<img src={org.logo} alt={org.name} className={styles.orgLogo} />
173+
</a>
193174
))}
194175
</div>
195176
</section>
196177

197-
{/* Mid-back: Templates - Narrow cards, 3-4 per row */}
198-
<section className={styles.section}>
178+
{/* Mid-back: Templates - Using GitCard, 3-4 per row */}
179+
<section className={`${styles.section} ${styles.templateSection}`}>
199180
<h2 className={styles.sectionTitle}>🛠️ {t('templates')}</h2>
200181
<Row className="mt-4">
201182
{hackathon.templates.map((template, index) => (
202183
<Col key={index} md={6} lg={4} xl={3}>
203-
<Card className={styles.templateCard}>
204-
<Card.Body>
205-
<h6 className="text-white mb-3">{template.name}</h6>
206-
<p className="text-white-50 small mb-3">{template.summary}</p>
207-
<div className="d-flex flex-column gap-2">
208-
<Button
209-
variant="outline-primary"
210-
size="sm"
211-
href={template.sourceLink}
212-
target="_blank"
213-
>
214-
{t('source_code')}
215-
</Button>
216-
<Button
217-
variant="outline-success"
218-
size="sm"
219-
href={template.previewLink}
220-
target="_blank"
221-
>
222-
{t('preview')}
223-
</Button>
224-
</div>
225-
</Card.Body>
226-
</Card>
184+
<GitCard
185+
full_name={template.name}
186+
html_url={template.sourceLink}
187+
languages={[]}
188+
topics={[]}
189+
description={template.summary}
190+
homepage={template.previewLink}
191+
/>
227192
</Col>
228193
))}
229194
</Row>

‎styles/Hackathon.module.less‎

Lines changed: 64 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -75,19 +75,51 @@
7575
font-size: 2rem;
7676
}
7777

78-
// Agenda items with gradient pink background
78+
// Dark cards - Blue/Purple gradient background
79+
.darkCard {
80+
transition: all 0.3s ease;
81+
margin-bottom: 1rem;
82+
border-radius: 8px;
83+
background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.15));
84+
padding: 1.5rem;
85+
color: #fff;
86+
87+
&:hover {
88+
transform: translateY(-3px);
89+
box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
90+
background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(139, 92, 246, 0.2));
91+
}
92+
}
93+
94+
// Light cards - Pink gradient background
95+
.lightCard {
96+
transition: all 0.3s ease;
97+
margin-bottom: 1rem;
98+
border-radius: 8px;
99+
background: linear-gradient(135deg, rgba(244, 114, 182, 0.15), rgba(236, 72, 153, 0.1));
100+
padding: 1.5rem;
101+
color: #1f2937;
102+
103+
&:hover {
104+
transform: translateY(-3px);
105+
box-shadow: 0 8px 20px rgba(244, 114, 182, 0.25);
106+
background: linear-gradient(135deg, rgba(244, 114, 182, 0.2), rgba(236, 72, 153, 0.15));
107+
}
108+
}
109+
110+
// Agenda items with dark background
79111
.agendaItem {
80112
transition: all 0.3s ease;
81113
margin-bottom: 1rem;
82114
border-left: 4px solid;
83115
border-radius: 8px;
84-
background: linear-gradient(135deg, rgba(236, 72, 153, 0.15), rgba(219, 39, 119, 0.1));
116+
background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.15));
85117
padding: 1.5rem;
86118

87119
&:hover {
88120
transform: translateX(5px);
89-
box-shadow: 0 4px 15px rgba(236, 72, 153, 0.2);
90-
background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(219, 39, 119, 0.15));
121+
box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
122+
background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(139, 92, 246, 0.2));
91123
}
92124

93125
&.workshop {
@@ -111,82 +143,54 @@
111143
}
112144
}
113145

114-
// Frameless prize cards with gradient pink
115-
.prizeCard {
116-
transition: all 0.3s ease;
117-
margin-bottom: 1.5rem;
118-
border: none;
119-
border-radius: 0;
120-
background: linear-gradient(135deg, rgba(244, 114, 182, 0.12), rgba(236, 72, 153, 0.08));
121-
padding: 1.5rem;
122-
123-
&:hover {
124-
transform: translateY(-3px);
125-
background: linear-gradient(135deg, rgba(244, 114, 182, 0.18), rgba(236, 72, 153, 0.12));
126-
}
146+
// Prize section using UserRankView
147+
.prizeSection {
148+
margin-bottom: 2rem;
127149
}
128150

129-
.prizeImage {
130-
margin-bottom: 1rem;
131-
border-radius: 8px;
132-
width: 100%;
133-
height: 120px;
134-
object-fit: contain;
151+
// Organization horizontal layout
152+
.orgContainer {
153+
display: flex;
154+
flex-wrap: wrap;
155+
gap: 2rem;
156+
justify-content: center;
157+
align-items: center;
158+
padding: 2rem 0;
135159
}
136160

137-
// Frameless organization cards with gradient pink
138-
.orgCard {
161+
.orgLogo {
139162
transition: all 0.3s ease;
140-
margin-bottom: 1.5rem;
141-
border: none;
142-
border-radius: 0;
143-
background: linear-gradient(135deg, rgba(244, 114, 182, 0.12), rgba(236, 72, 153, 0.08));
144-
padding: 2rem;
163+
border-radius: 12px;
164+
width: 100px;
165+
height: 100px;
166+
object-fit: contain;
167+
filter: grayscale(0.3);
145168

146169
&:hover {
147-
background: linear-gradient(135deg, rgba(244, 114, 182, 0.18), rgba(236, 72, 153, 0.12));
170+
transform: scale(1.1);
171+
filter: grayscale(0);
148172
}
149173
}
150174

151-
.logo {
152-
box-shadow: 0 0 15px rgba(236, 72, 153, 0.2);
153-
border: 2px solid rgba(236, 72, 153, 0.3);
154-
border-radius: 12px;
155-
width: 80px;
156-
height: 80px;
157-
}
158-
159-
// Narrow template cards with gradient pink
160-
.templateCard {
161-
transition: all 0.3s ease;
162-
margin-bottom: 1.5rem;
163-
border: 1px solid rgba(236, 72, 153, 0.2);
164-
border-radius: 12px;
165-
background: linear-gradient(135deg, rgba(244, 114, 182, 0.1), rgba(236, 72, 153, 0.05));
166-
padding: 1.5rem;
167-
168-
&:hover {
169-
transform: translateY(-5px);
170-
box-shadow: 0 8px 25px rgba(236, 72, 153, 0.15);
171-
border-color: rgba(236, 72, 153, 0.35);
172-
background: linear-gradient(135deg, rgba(244, 114, 182, 0.15), rgba(236, 72, 153, 0.1));
173-
}
175+
// Template section using GitCard
176+
.templateSection {
177+
margin-bottom: 2rem;
174178
}
175179

176-
// Narrow project cards with gradient pink
180+
// Project cards with light pink gradient
177181
.projectCard {
178182
transition: all 0.3s ease;
179183
margin-bottom: 1.5rem;
180-
border: 1px solid rgba(236, 72, 153, 0.2);
184+
border: 1px solid rgba(244, 114, 182, 0.3);
181185
border-radius: 12px;
182-
background: linear-gradient(135deg, rgba(244, 114, 182, 0.1), rgba(236, 72, 153, 0.05));
186+
background: linear-gradient(135deg, rgba(244, 114, 182, 0.15), rgba(236, 72, 153, 0.1));
183187
padding: 1.5rem;
184188

185189
&:hover {
186190
transform: translateY(-5px);
187-
box-shadow: 0 8px 25px rgba(236, 72, 153, 0.15);
188-
border-color: rgba(236, 72, 153, 0.35);
189-
background: linear-gradient(135deg, rgba(244, 114, 182, 0.15), rgba(236, 72, 153, 0.1));
191+
box-shadow: 0 8px 25px rgba(244, 114, 182, 0.25);
192+
border-color: rgba(244, 114, 182, 0.5);
193+
background: linear-gradient(135deg, rgba(244, 114, 182, 0.2), rgba(236, 72, 153, 0.15));
190194
}
191195
}
192196

‎translation/en-US.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -197,6 +197,7 @@ export default {
197197
participants: 'Participants',
198198
organizations: 'Organizations',
199199
prizes: 'Prizes',
200+
hackathon_prizes: 'Hackathon Prizes',
200201
templates: 'Templates',
201202
projects: 'Projects',
202203
type: 'Type',

‎translation/zh-CN.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -193,6 +193,7 @@ export default {
193193
participants: '参与者',
194194
organizations: '组织方',
195195
prizes: '奖项',
196+
hackathon_prizes: '黑客松奖项',
196197
templates: '项目模板',
197198
projects: '参赛项目',
198199
type: '类型',

‎translation/zh-TW.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -193,6 +193,7 @@ export default {
193193
participants: '參與者',
194194
organizations: '組織方',
195195
prizes: '獎項',
196+
hackathon_prizes: '黑客松獎項',
196197
templates: '項目模板',
197198
projects: '參賽項目',
198199
type: '類型',

0 commit comments

Comments
 (0)