106 lines
3.3 KiB
TypeScript
106 lines
3.3 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { Play, Pause, Volume2 } from "lucide-react";
|
|
|
|
export default function AudioPlayerSection() {
|
|
const [playing, setPlaying] = useState(false);
|
|
const [progress, setProgress] = useState(30);
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* ===== AUDIO PLAYER CARD ===== */}
|
|
<div className="bg-gray-50 rounded-2xl p-6 border border-gray-200">
|
|
<div className="flex items-center gap-6">
|
|
{/* PLAY BUTTON */}
|
|
<button
|
|
onClick={() => setPlaying(!playing)}
|
|
className="h-16 w-16 rounded-full bg-yellow-400 flex items-center justify-center shadow-md hover:scale-105 transition"
|
|
>
|
|
{playing ? (
|
|
<Pause size={28} className="text-black" />
|
|
) : (
|
|
<Play size={28} className="text-black ml-1" />
|
|
)}
|
|
</button>
|
|
|
|
{/* WAVEFORM + DURATION */}
|
|
<div className="flex-1">
|
|
{/* FAKE WAVEFORM */}
|
|
<div className="h-16 flex items-center gap-[3px]">
|
|
{Array.from({ length: 70 }).map((_, i) => (
|
|
<div
|
|
key={i}
|
|
className={`w-[3px] rounded-full ${
|
|
i < 35 ? "bg-black" : "bg-gray-400"
|
|
}`}
|
|
style={{
|
|
height: `${Math.random() * 40 + 10}px`,
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
{/* TIME */}
|
|
<div className="flex justify-between text-xs text-gray-500 mt-2">
|
|
<span>2:14</span>
|
|
<span>5:00</span>
|
|
</div>
|
|
|
|
{/* PROGRESS */}
|
|
<div className="flex items-center gap-3 mt-3">
|
|
<Volume2 size={16} />
|
|
|
|
<input
|
|
type="range"
|
|
min={0}
|
|
max={100}
|
|
value={progress}
|
|
onChange={(e) => setProgress(Number(e.target.value))}
|
|
className="w-full accent-blue-600"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* ===== META INFO ===== */}
|
|
<div className="flex flex-wrap items-center gap-4 text-sm text-gray-500">
|
|
<span className="bg-red-600 text-white text-xs px-2 py-1 rounded">
|
|
POLRI
|
|
</span>
|
|
|
|
<span>02 Februari 2024</span>
|
|
<span>61</span>
|
|
<span>Kreator: BPKH Jurnalis</span>
|
|
</div>
|
|
|
|
{/* ===== TITLE ===== */}
|
|
<h1 className="text-2xl font-semibold leading-snug">
|
|
Bharatu Mardi Hadji Gugur Saat Bertugas, Diganjar Kenaikan Pangkat Luar
|
|
Biasa
|
|
</h1>
|
|
|
|
{/* ===== ARTICLE ===== */}
|
|
<div className="space-y-4 text-gray-700 leading-relaxed text-[15px]">
|
|
<p>
|
|
Jakarta - Kapolri Jenderal Polisi Drs. Listyo Sigit Prabowo memberikan
|
|
kenaikan pangkat luar biasa anumerta kepada almarhum Bharatu Mardi
|
|
Hadji...
|
|
</p>
|
|
|
|
<p>
|
|
Dengan penghargaan ini, almarhum resmi dinaikkan pangkatnya satu
|
|
tingkat lebih tinggi menjadi Bharaka Anumerta...
|
|
</p>
|
|
|
|
<p>
|
|
Karo Penmas Divisi Humas Polri, Brigjen Pol. Trunoyudo Wisnu Andiko,
|
|
menyatakan bahwa kenaikan pangkat anumerta ini merupakan bentuk
|
|
penghormatan...
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|