react-icons/hi#HiExternalLink TypeScript Examples

function Track({track}: {track: TrackObjectFull}) {
	const [statsOpen, setStatsOpen] = useState(false);

	const image = track.album.images[0].url;
	const artists = track.artists.map(artist => artist.name).join(', ');

	const close = () => {
		setStatsOpen(false);
	};

	const open = () => {
		setStatsOpen(true);
	};

	const album = track.album as AlbumObjectFull;

	return (
		<button
			key={track.id}
			type="button"
			className="group flex flex-col space-y-2 text-left no-underline align-top outline-none focus:outline-none focus:ring focus:ring-offset-4 dark:focus:ring-offset-gray-900"
			aria-roledescription="Opens a stats modal"
			onClick={open}
		>
			<Modal
				isOpen={statsOpen}
				setIsOpen={close}
				title={<SiSpotify size={24} />}
			>
				<div className="space-y-4">
					<div className="aspect-[3/1] relative">
						<Image
							src={image}
							layout="fill"
							alt={`Album cover art of ${track.album.name} by ${artists}`}
							className="object-cover rounded-md"
						/>
					</div>

					<a
						href={track.external_urls.spotify}
						className="group flex justify-between p-3 no-underline bg-gray-100 dark:bg-gray-900 rounded-md border dark:border-0"
						target="_blank"
						rel="noreferrer"
					>
						<div>
							<h2 className="text-2xl font-bold group-hover:underline">
								{track.name}
							</h2>
							<h3 className="text-sm italic text-gray-400">By {artists}</h3>
						</div>

						<div>
							<HiExternalLink size={24} />
						</div>
					</a>

					<div>
						<Details
							details={[
								{
									name: 'Released:',
									value: (
										<span>
											{dayjs(album.release_date).fromNow()} (
											{dayjs(album.release_date).format('DD MMM YYYY')})
										</span>
									),
								},
								{
									name: 'Album:',
									value: album.name,
								},
								{
									name: 'Duration:',
									value: ms(track.duration_ms, {long: true}),
								},
							]}
						/>
					</div>
				</div>
			</Modal>

			<div className="overflow-hidden w-full rounded-md image-span-block">
				<Image
					src={image}
					className="rounded-md brightness-75 group-hover:brightness-100 transition-all duration-300 group-hover:scale-110"
					alt={`Album cover art for ${track.name} by ${artists}`}
					width={400}
					height={400}
				/>
			</div>

			<h2 className="py-0.5 text-lg">
				<span className="font-bold">
					{track.explicit && <MdExplicit className="inline -mt-1" />}{' '}
					{track.name}
				</span>{' '}
				<span className="text-neutral-700 dark:text-neutral-400">
					• {artists}
				</span>
			</h2>
		</button>
	);
}