Skip to content

Commit fca6a66

Browse files
meetoza30meetoza30
committed
few changes and ui fixes
1 parent 37cbbeb commit fca6a66

File tree

2 files changed

+128
-79
lines changed

2 files changed

+128
-79
lines changed

‎src/pages/broadcasts/index.css‎

Lines changed: 94 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,9 @@
55
}
66

77
.broadcast-page {
8-
font-family: 'Inter', sans-serif;
8+
/* font-family: 'Inter', sans-serif;
9+
10+
*/
911
background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 50%, #e8ebff 100%);
1012
min-height: 100vh;
1113
animation: pageSlideIn 0.8s ease-out;
@@ -620,8 +622,8 @@
620622

621623
.card-title {
622624
font-size: 22px;
623-
font-weight: 700;
624-
color: #1e293b;
625+
font-weight: 600 !important; /* Extra light font weight */
626+
color: #1e293b;
625627
margin: 0 0 16px 0;
626628
line-height: 1.3;
627629
letter-spacing: -0.01em;
@@ -632,6 +634,8 @@
632634
overflow: hidden;
633635
}
634636

637+
638+
635639
.broadcast-card:hover .card-title {
636640
color: #6366f1;
637641
}
@@ -644,12 +648,6 @@
644648
color: #a78bfa;
645649
}
646650

647-
.card-meta {
648-
display: flex;
649-
align-items: center;
650-
justify-content: flex-start;
651-
gap: 12px;
652-
}
653651

654652
.video-type {
655653
font-size: 13px;
@@ -678,15 +676,50 @@
678676
border-radius: 12px;
679677
cursor: pointer;
680678
font-weight: 600;
679+
font-size: 15px;
681680
transition: all 0.3s ease;
682681
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
682+
display: inline-flex;
683+
align-items: center;
684+
gap: 8px;
685+
white-space: nowrap;
686+
min-width: 130px;
687+
justify-content: center;
688+
}
689+
690+
[data-theme='dark'] .pagination-btn {
691+
background: linear-gradient(145deg, #242526 0%, #1a202c 100%);
692+
color: #94a3b8;
693+
border: 1px solid rgba(74, 85, 104, 0.5);
694+
}
695+
696+
.pagination-arrow {
697+
display: inline-flex;
698+
align-items: center;
699+
font-size: 16px;
700+
transition: transform 0.2s ease;
683701
}
684702

685703
.pagination-btn:hover:not(:disabled) {
686704
transform: translateY(-2px);
687-
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
705+
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
688706
border-color: #6366f1;
689707
color: #6366f1;
708+
background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
709+
}
710+
711+
[data-theme='dark'] .pagination-btn:hover:not(:disabled) {
712+
background: linear-gradient(145deg, #242526 0%, #1a202c 100%);
713+
color: #a78bfa;
714+
border-color: #a78bfa;
715+
}
716+
717+
.pagination-btn:hover:not(:disabled) .pagination-arrow:first-child {
718+
transform: translateX(-3px);
719+
}
720+
721+
.pagination-btn:hover:not(:disabled) .pagination-arrow:last-child {
722+
transform: translateX(3px);
690723
}
691724

692725
.pagination-btn:disabled {
@@ -695,19 +728,68 @@
695728
cursor: not-allowed;
696729
transform: none;
697730
box-shadow: none;
731+
opacity: 0.6;
732+
}
733+
734+
[data-theme='dark'] .pagination-btn:disabled {
735+
background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
736+
color: #475569;
737+
border: 1px solid rgba(74, 85, 104, 0.3);
698738
}
699739

700740
.pagination-info {
701741
font-weight: 600;
702-
color: #64748b;
742+
color: #1e293b;
703743
padding: 12px 24px;
704744
background: linear-gradient(145deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%);
705745
border-radius: 12px;
706746
border: 1px solid rgba(99, 102, 241, 0.2);
707-
min-width: 120px;
747+
min-width: 140px;
708748
text-align: center;
749+
font-size: 15px;
709750
}
710751

752+
[data-theme='dark'] .pagination-info {
753+
color: #f1f5f9;
754+
background: linear-gradient(145deg, rgba(99, 102, 241, 0.15) 0%, rgba(168, 85, 247, 0.15) 100%);
755+
border: 1px solid rgba(99, 102, 241, 0.3);
756+
}
757+
758+
/* Responsive Pagination */
759+
@media (max-width: 767px) {
760+
.pagination {
761+
flex-wrap: wrap;
762+
gap: 12px;
763+
}
764+
765+
.pagination-btn {
766+
min-width: 120px;
767+
padding: 10px 20px;
768+
font-size: 14px;
769+
}
770+
771+
.pagination-info {
772+
min-width: 130px;
773+
padding: 10px 20px;
774+
font-size: 14px;
775+
}
776+
}
777+
778+
@media (max-width: 480px) {
779+
.pagination {
780+
flex-direction: column;
781+
width: 100%;
782+
padding: 20px 16px;
783+
}
784+
785+
.pagination-btn,
786+
.pagination-info {
787+
width: 100%;
788+
max-width: 300px;
789+
}
790+
}
791+
792+
711793
/* Responsive adjustments */
712794
@media (max-width: 767px) and (min-width: 576px) {
713795
.card-content {

‎src/pages/broadcasts/index.tsx‎

Lines changed: 34 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -151,10 +151,8 @@ const VideoCard: React.FC<{
151151
)}
152152
</div>
153153
<div className="card-content">
154-
<h3 className="card-title">{title}</h3>
155-
<div className="card-meta">
156-
<span className="video-type">{getTypeLabel()}</span>
157-
</div>
154+
<span className="card-title">{title}</span>
155+
158156
</div>
159157
</div>
160158
);
@@ -213,27 +211,10 @@ export default function Broadcasts(): ReactElement {
213211
Featured <span className="gradient-text">Content</span>
214212
</h1>
215213
<p className="broadcast-main-subtitle">
216-
Watch our curated collection of videos and shorts
214+
Watch our curated collection of videos and shorts.
217215
</p>
218-
<div className="hero-stats">
219-
<div className="stat-item">
220-
<span className="stat-number">{videos.length}</span>
221-
<span className="stat-label">Total Videos</span>
222-
</div>
223-
<div className="stat-divider"></div>
224-
<div className="stat-item">
225-
<span className="stat-number">
226-
{videos.filter((v) => v.type === 'video').length}
227-
</span>
228-
<span className="stat-label">Videos</span>
229-
</div>
230-
<div className="stat-divider"></div>
231-
<div className="stat-item">
232-
<span className="stat-number">
233-
{videos.filter((v) => v.type === 'live').length}
234-
</span>
235-
<span className="stat-label">Live Streams</span>
236-
</div>
216+
<div className="">
217+
<h1 className='stat-number'>Latest Videos</h1>
237218
</div>
238219
</div>
239220
</div>
@@ -242,39 +223,24 @@ export default function Broadcasts(): ReactElement {
242223
{/* Main Content Section */}
243224
<section className="latest-broadcasts-section">
244225
<div className="broadcasts-container">
245-
<div className="section-header">
246-
<h2 className="section-title">Latest Content</h2>
247-
<p className="section-subtitle">
248-
Explore tutorials, live streams, and quick tips
249-
</p>
250-
</div>
226+
251227

252228
{/* Tabs */}
253229
<div className="broadcast-tabs">
254-
<button
255-
className={`tab-button ${activeTab === 'all' ? 'active' : ''}`}
256-
onClick={() => setActiveTab('all')}
257-
>
258-
All ({videos.length})
259-
</button>
230+
260231
<button
261232
className={`tab-button ${activeTab === 'video' ? 'active' : ''}`}
262233
onClick={() => setActiveTab('video')}
263234
>
264-
Videos ({videos.filter((v) => v.type === 'video').length})
235+
🎥 Videos ({videos.filter((v) => v.type === 'video').length})
265236
</button>
266237
<button
267238
className={`tab-button ${activeTab === 'live' ? 'active' : ''}`}
268239
onClick={() => setActiveTab('live')}
269240
>
270-
Live ({videos.filter((v) => v.type === 'live').length})
271-
</button>
272-
<button
273-
className={`tab-button ${activeTab === 'other' ? 'active' : ''}`}
274-
onClick={() => setActiveTab('other')}
275-
>
276-
Shorts ({videos.filter((v) => v.type === 'other').length})
241+
🔴 Past Live ({videos.filter((v) => v.type === 'live').length})
277242
</button>
243+
278244
</div>
279245

280246
{/* Grid */}
@@ -284,30 +250,31 @@ export default function Broadcasts(): ReactElement {
284250
))}
285251
</div>
286252

287-
{/* Pagination */}
253+
288254
{totalPages > 1 && (
289-
<div className="pagination">
290-
<button
291-
onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
292-
disabled={currentPage === 1}
293-
className="pagination-btn"
294-
>
295-
<span className="pagination-arrow">←</span>
296-
<span>Previous</span>
297-
</button>
298-
<span className="pagination-info">
299-
Page {currentPage} of {totalPages}
300-
</span>
301-
<button
302-
onClick={() => setCurrentPage((prev) => Math.min(prev + 1, totalPages))}
303-
disabled={currentPage === totalPages}
304-
className="pagination-btn"
305-
>
306-
<span>Next</span>
307-
<span className="pagination-arrow">→</span>
308-
</button>
309-
</div>
310-
)}
255+
<div className="pagination">
256+
<button
257+
onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
258+
disabled={currentPage === 1}
259+
className="pagination-btn"
260+
>
261+
<span className="pagination-arrow">←</span>
262+
<span>Previous</span>
263+
</button>
264+
<span className="pagination-info">
265+
Page {currentPage} of {totalPages}
266+
</span>
267+
<button
268+
onClick={() => setCurrentPage((prev) => Math.min(prev + 1, totalPages))}
269+
disabled={currentPage === totalPages}
270+
className="pagination-btn"
271+
>
272+
<span>Next</span>
273+
<span className="pagination-arrow">→</span>
274+
</button>
275+
</div>
276+
)}
277+
311278
</div>
312279
</section>
313280
</div>

0 commit comments

Comments
 (0)