react-icons/hi#HiExternalLink TypeScript Examples

The following examples show how to use react-icons/hi#HiExternalLink. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: about.tsx    From website with Apache License 2.0 4 votes vote down vote up
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>
	);
}