From 7bc546e98505380237a6dbb8ba022fd0b9dd1d79 Mon Sep 17 00:00:00 2001 From: nico Date: Fri, 6 Mar 2026 16:19:01 +0800 Subject: [PATCH] Fix Responsive --- .../(pages)/musik/musik-desa/page.tsx | 119 ++++++----- src/app/darmasaba/_com/FixedPlayerBar.tsx | 185 ++++++++---------- .../_com/main-page/apbdes/lib/paguTable.tsx | 46 +++-- .../main-page/apbdes/lib/realisasiTable.tsx | 92 +++++---- 4 files changed, 230 insertions(+), 212 deletions(-) diff --git a/src/app/darmasaba/(pages)/musik/musik-desa/page.tsx b/src/app/darmasaba/(pages)/musik/musik-desa/page.tsx index 7e20e2f2..77d64130 100644 --- a/src/app/darmasaba/(pages)/musik/musik-desa/page.tsx +++ b/src/app/darmasaba/(pages)/musik/musik-desa/page.tsx @@ -92,10 +92,10 @@ const MusicPlayer = () => { } return ( - + { > - +
- Selamat Datang Kembali - Temukan musik favorit Anda hari ini + Selamat Datang Kembali + Temukan musik favorit Anda hari ini
- - } - radius="xl" - w={280} - value={search} - onChange={(e) => setSearch(e.target.value)} - styles={{ input: { backgroundColor: '#fff' } }} - /> - - + } + radius="xl" + w={{ base: '100%', sm: 280 }} + value={search} + onChange={(e) => setSearch(e.target.value)} + styles={{ input: { backgroundColor: '#fff' } }} + /> + +
Sedang Diputar {currentSong ? ( - - + + - -
- {currentSong.judul} + + + {currentSong.judul} {currentSong.artis} {currentSong.genre && ( {currentSong.genre} )} -
+ {formatTime(currentTime)} { {formatTime(duration || 0)} - + ) : ( @@ -175,28 +185,29 @@ const MusicPlayer = () => { playSong(song)} > - + - + {song.judul} - {song.artis} - {song.durasi} + {song.artis} {currentSong?.id === song.id && isPlaying && ( - Memutar + Playing )} @@ -207,34 +218,42 @@ const MusicPlayer = () => { )}
- - + {/* Control Player Section */} - - + + {/* Song Info */} +
{currentSong ? ( <> {currentSong.judul} - {currentSong.artis} + {currentSong.artis} ) : ( Tidak ada lagu @@ -242,29 +261,31 @@ const MusicPlayer = () => {
- - + {/* Controls + Progress */} + + {isShuffle ? : } - + {isPlaying ? : } - + { color="#0B4F78" onClick={toggleRepeatHandler} radius="xl" + size="md" > {isRepeat ? : } @@ -290,7 +312,8 @@ const MusicPlayer = () => { - + {/* Volume Control - Hidden on mobile, shown on md and up */} + {isMuted || volume === 0 ? : } diff --git a/src/app/darmasaba/_com/FixedPlayerBar.tsx b/src/app/darmasaba/_com/FixedPlayerBar.tsx index f05a31cc..f32291ec 100644 --- a/src/app/darmasaba/_com/FixedPlayerBar.tsx +++ b/src/app/darmasaba/_com/FixedPlayerBar.tsx @@ -93,28 +93,19 @@ export default function FixedPlayerBar() { mt="md" style={{ position: 'fixed', - top: '50%', // Menempatkan titik atas ikon di tengah layar + top: '50%', left: '0px', - transform: 'translateY(-50%)', // Menggeser ikon ke atas sebesar setengah tingginya sendiri agar benar-benar di tengah + transform: 'translateY(-50%)', borderBottomRightRadius: '20px', borderTopRightRadius: '20px', cursor: 'pointer', transition: 'transform 0.2s ease', - zIndex: 1 + zIndex: 1000 // Higher z-index }} onClick={handleRestorePlayer} - onMouseEnter={(e) => { - e.currentTarget.style.transform = 'translateY(-50%) scale(1.1)'; - }} - onMouseLeave={(e) => { - e.currentTarget.style.transform = 'translateY(-50%)'; - }} > - + - - {/* Spacer to prevent content from being hidden behind player */} - ); } @@ -131,132 +122,125 @@ export default function FixedPlayerBar() { bottom={0} left={0} right={0} - p="sm" - shadow="lg" + p={{ base: 'xs', sm: 'sm' }} + shadow="xl" style={{ - zIndex: 1, + zIndex: 1000, borderTop: '1px solid rgba(0,0,0,0.1)', + backgroundColor: 'rgba(255, 255, 255, 0.95)', + backdropFilter: 'blur(10px)', }} > - + {/* Song Info - Left */} - + - - + + {currentSong.judul} - + {currentSong.artis} - {/* Controls + Progress - Center */} - - {/* Control Buttons */} - - - - + {/* Controls - Center */} + + {/* Shuffle - Desktop Only */} + + + - - - + + + - - {isPlaying ? ( - - ) : ( - - )} - + + {isPlaying ? ( + + ) : ( + + )} + - - - + + + - - {isRepeat ? : } - - + {/* Repeat - Desktop Only */} + + {isRepeat ? : } + - {/* Progress Bar - Desktop */} - + {/* Progress Bar - Desktop Only */} + formatTime(value)} /> {/* Right Controls - Volume + Close */} - + + {/* Volume Control - Tablet/Desktop */} setShowVolume(true)} onMouseLeave={() => setShowVolume(false)} pos="relative" + visibleFrom="sm" > - {isMuted ? ( - - ) : ( - - )} + {isMuted ? : } {(style) => ( @@ -288,30 +272,29 @@ export default function FixedPlayerBar() { - {/* Progress Bar - Mobile */} - + {/* Progress Bar - Mobile (Base) */} + formatTime(value)} /> {/* Spacer to prevent content from being hidden behind player */} - + ); } diff --git a/src/app/darmasaba/_com/main-page/apbdes/lib/paguTable.tsx b/src/app/darmasaba/_com/main-page/apbdes/lib/paguTable.tsx index 2df04199..9f9a77e9 100644 --- a/src/app/darmasaba/_com/main-page/apbdes/lib/paguTable.tsx +++ b/src/app/darmasaba/_com/main-page/apbdes/lib/paguTable.tsx @@ -1,24 +1,28 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ -import { Paper, Table, Title } from '@mantine/core'; +import { Paper, Table, Title, Text } from '@mantine/core'; function Section({ title, data }: any) { if (!data || data.length === 0) return null; return ( <> - + - {title} + {title} {data.map((item: any) => ( - {item.kode} - {item.uraian} + + {item.kode} - {item.uraian} + - Rp {item.anggaran.toLocaleString('id-ID')} + + Rp {item.anggaran.toLocaleString('id-ID')} + ))} @@ -39,22 +43,24 @@ export default function PaguTable({ apbdesData }: any) { const pembiayaan = items.filter((i: any) => i.tipe === 'pembiayaan'); return ( - - {title} + + {title} - - - - Uraian - Anggaran (Rp) - - - -
-
-
- -
+ + + + + Uraian + Anggaran (Rp) + + + +
+
+
+ +
+ ); } \ No newline at end of file diff --git a/src/app/darmasaba/_com/main-page/apbdes/lib/realisasiTable.tsx b/src/app/darmasaba/_com/main-page/apbdes/lib/realisasiTable.tsx index 889429c8..ef961e9d 100644 --- a/src/app/darmasaba/_com/main-page/apbdes/lib/realisasiTable.tsx +++ b/src/app/darmasaba/_com/main-page/apbdes/lib/realisasiTable.tsx @@ -30,56 +30,62 @@ export default function RealisasiTable({ apbdesData }: any) { }; return ( - - {title} + + {title} {allRealisasiRows.length === 0 ? ( Belum ada data realisasi ) : ( - - - - Uraian - Realisasi (Rp) - % - - - - {allRealisasiRows.map(({ realisasi, parentItem }) => { - const persentase = parentItem.anggaran > 0 - ? (realisasi.jumlah / parentItem.anggaran) * 100 - : 0; + +
+ + + Uraian + Realisasi (Rp) + % + + + + {allRealisasiRows.map(({ realisasi, parentItem }) => { + const persentase = parentItem.anggaran > 0 + ? (realisasi.jumlah / parentItem.anggaran) * 100 + : 0; - return ( - - - {realisasi.kode || '-'} - {realisasi.keterangan || '-'} - - - - {formatRupiah(realisasi.jumlah || 0)} - - - - = 100 - ? 'teal' - : persentase >= 60 - ? 'yellow' - : 'red' - } - > - {persentase.toFixed(2)}% - - - - ); - })} - -
+ return ( + + + + {realisasi.kode || '-'} - {realisasi.keterangan || '-'} + + + + + {formatRupiah(realisasi.jumlah || 0)} + + + + = 100 + ? 'teal' + : persentase >= 60 + ? 'yellow' + : 'red' + } + > + {persentase.toFixed(1)}% + + + + ); + })} + + + )} ); -- 2.49.1