| 1 | import Image from "next/image"; |
| 2 | |
| 3 | export function AudioInfo(props: { }) { |
| 4 | const numberPlayed = 785; |
| 5 | const difficulty = "Difficulty: Hard"; |
| 6 | const imageUrl = "https://img.freepik.com/free-psd/square-flyer-template-maximalist-business_23-2148524497.jpg?w=1800&t=st=1699458420~exp=1699459020~hmac=5b00d72d6983d04966cc08ccd0fc1f80ad0d7ba75ec20316660e11efd18133cd" |
| 7 | return ( |
| 8 | <div className="flex items-center space-x-4"> |
| 9 | <Image |
| 10 | src={imageUrl} |
| 11 | alt="" |
| 12 | width="88" |
| 13 | height="88" |
| 14 | className="flex-none rounded-lg bg-slate-100" |
| 15 | loading="lazy" |
| 16 | /> |
| 17 | <div className="min-w-0 flex-auto space-y-1 font-semibold"> |
| 18 | <p className="text-cyan-500 dark:text-cyan-400 text-sm leading-6"> |
| 19 | <abbr title="Track">Played:</abbr> {numberPlayed} |
| 20 | </p> |
| 21 | <h2 className="text-slate-500 dark:text-slate-400 text-sm leading-6 truncate"> |
| 22 | Key: C Major |
| 23 | </h2> |
| 24 | <p className="text-slate-500 dark:text-slate-50 text-lg">{difficulty}</p> |
| 25 | </div> |
| 26 | </div> |
| 27 | ); |
| 28 | } |