|
1 | 1 | import { observer } from 'mobx-react'; |
2 | 2 | import { GetServerSideProps } from 'next'; |
3 | 3 | import { FC, useContext } from 'react'; |
4 | | -import { Badge, Button, Card, Col, Container, Row } from 'react-bootstrap'; |
5 | | -import { UserRankView } from 'idea-react'; |
| 4 | +import { Badge, Card, Col, Container, Row } from 'react-bootstrap'; |
| 5 | +import { text2color, UserRankView } from 'idea-react'; |
6 | 6 |
|
7 | 7 | import { PageHead } from '../../components/Layout/PageHead'; |
8 | 8 | import { GitCard } from '../../components/Git/Card'; |
@@ -44,40 +44,19 @@ interface HackathonDetailProps { |
44 | 44 | }; |
45 | 45 | } |
46 | 46 |
|
| 47 | +const formatDateTime = (dateString: string) => { |
| 48 | + const date = new Date(dateString); |
| 49 | + return date.toLocaleString('zh-CN', { |
| 50 | + month: 'numeric', |
| 51 | + day: 'numeric', |
| 52 | + hour: '2-digit', |
| 53 | + minute: '2-digit', |
| 54 | + }); |
| 55 | +}; |
| 56 | + |
47 | 57 | const HackathonDetail: FC<HackathonDetailProps> = observer(({ hackathon }) => { |
48 | 58 | const { t } = useContext(I18nContext); |
49 | 59 |
|
50 | | - const formatDateTime = (dateString: string) => { |
51 | | - const date = new Date(dateString); |
52 | | - return date.toLocaleString('zh-CN', { |
53 | | - month: 'numeric', |
54 | | - day: 'numeric', |
55 | | - hour: '2-digit', |
56 | | - minute: '2-digit', |
57 | | - }); |
58 | | - }; |
59 | | - |
60 | | - const getTypeColor = (type: string) => { |
61 | | - const colors: Record<string, string> = { |
62 | | - workshop: 'info', |
63 | | - presentation: 'danger', |
64 | | - coding: 'success', |
65 | | - break: 'warning', |
66 | | - ceremony: 'primary', |
67 | | - }; |
68 | | - return colors[type] || 'secondary'; |
69 | | - }; |
70 | | - |
71 | | - const getLevelColor = (level: string) => { |
72 | | - const colors: Record<string, string> = { |
73 | | - gold: 'warning', |
74 | | - silver: 'secondary', |
75 | | - bronze: 'dark', |
76 | | - special: 'info', |
77 | | - }; |
78 | | - return colors[level] || 'primary'; |
79 | | - }; |
80 | | - |
81 | 60 | return ( |
82 | 61 | <> |
83 | 62 | <PageHead title={`${hackathon.title} - ${t('hackathon_detail')}`} /> |
@@ -112,63 +91,48 @@ const HackathonDetail: FC<HackathonDetailProps> = observer(({ hackathon }) => { |
112 | 91 | </section> |
113 | 92 |
|
114 | 93 | <Container className="my-5"> |
115 | | - {/* Header: Agenda and Prizes side by side */} |
116 | | - <Row> |
117 | | - {/* Agenda Section */} |
118 | | - <Col lg={6}> |
119 | | - <section className={styles.section}> |
120 | | - <h2 className={styles.sectionTitle}>📅 {t('agenda')}</h2> |
121 | | - <div className="mt-4"> |
122 | | - {hackathon.agenda.map((item, index) => ( |
123 | | - <div key={index} className={`${styles.agendaItem} ${styles[item.type]}`}> |
124 | | - <h5 className="text-white mb-2">{item.name}</h5> |
125 | | - <p className="text-white-50 small mb-2">{item.summary}</p> |
126 | | - <div className="d-flex justify-content-between align-items-center"> |
127 | | - <Badge bg={getTypeColor(item.type)} className="me-2"> |
128 | | - {t(item.type as any)} |
129 | | - </Badge> |
130 | | - <div className="text-white-50 small"> |
131 | | - {formatDateTime(item.startedAt)} - {formatDateTime(item.endedAt)} |
132 | | - </div> |
133 | | - </div> |
| 94 | + <section className={`${styles.section} ${styles.prizeSection}`}> |
| 95 | + <h2 className={styles.sectionTitle}>🏆 {t('prizes')}</h2> |
| 96 | + <div className="mt-4"> |
| 97 | + <UserRankView |
| 98 | + title={t('hackathon_prizes')} |
| 99 | + rank={hackathon.prizes.map((prize, index) => ({ |
| 100 | + id: `prize-${index}`, |
| 101 | + name: prize.name, |
| 102 | + avatar: prize.image, |
| 103 | + score: prize.price, |
| 104 | + email: prize.sponsor, |
| 105 | + }))} |
| 106 | + /> |
| 107 | + </div> |
| 108 | + </section> |
| 109 | + |
| 110 | + <section className={styles.section}> |
| 111 | + <h2 className={styles.sectionTitle}>📅 {t('agenda')}</h2> |
| 112 | + <div className="mt-4"> |
| 113 | + {hackathon.agenda.map((item, index) => ( |
| 114 | + <div key={index} className={`${styles.agendaItem} ${styles[item.type]}`}> |
| 115 | + <h5 className="text-white mb-2">{item.name}</h5> |
| 116 | + <p className="text-white-50 small mb-2">{item.summary}</p> |
| 117 | + <div className="d-flex justify-content-between align-items-center"> |
| 118 | + <Badge bg={text2color(item.type)} className="me-2"> |
| 119 | + {t(item.type as any)} |
| 120 | + </Badge> |
| 121 | + <div className="text-white-50 small"> |
| 122 | + {formatDateTime(item.startedAt)} - {formatDateTime(item.endedAt)} |
134 | 123 | </div> |
135 | | - ))} |
| 124 | + </div> |
136 | 125 | </div> |
137 | | - </section> |
138 | | - </Col> |
139 | | - |
140 | | - {/* Prizes Section - Using UserRankView */} |
141 | | - <Col lg={6}> |
142 | | - <section className={`${styles.section} ${styles.prizeSection}`}> |
143 | | - <h2 className={styles.sectionTitle}>🏆 {t('prizes')}</h2> |
144 | | - <div className="mt-4"> |
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 | | - /> |
155 | | - </div> |
156 | | - </section> |
157 | | - </Col> |
158 | | - </Row> |
| 126 | + ))} |
| 127 | + </div> |
| 128 | + </section> |
159 | 129 |
|
160 | 130 | {/* Mid-front: Organizations - Horizontal logo layout */} |
161 | 131 | <section className={styles.section}> |
162 | 132 | <h2 className={styles.sectionTitle}>🏢 {t('organizations')}</h2> |
163 | 133 | <div className={styles.orgContainer}> |
164 | 134 | {hackathon.organizations.map((org, index) => ( |
165 | | - <a |
166 | | - key={index} |
167 | | - href={org.link} |
168 | | - target="_blank" |
169 | | - rel="noreferrer" |
170 | | - title={org.name} |
171 | | - > |
| 135 | + <a key={index} href={org.link} target="_blank" rel="noreferrer" title={org.name}> |
172 | 136 | <img src={org.logo} alt={org.name} className={styles.orgLogo} /> |
173 | 137 | </a> |
174 | 138 | ))} |
|
0 commit comments