Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | 19x 19x 19x 1x 2x | import { ReactElement } from "react";
import Link from "next/link";
import { Grid, Heading } from "components";
import { chooseImage, colors } from "utils";
interface IBrowseCategoriesProps {
categories: SpotifyApi.PagingObject<SpotifyApi.CategoryObject> | null;
}
export default function BrowseCategories({
categories,
}: Readonly<IBrowseCategoriesProps>): ReactElement {
return (
<Grid>
{categories?.items.map(({ name, id, icons }, i) => {
return (
<Link
key={id}
href={`/genre/${id}`}
style={{ backgroundColor: colors[i] }}
className="BrowseCategories-category"
>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={chooseImage(icons, 100).url} alt={name} />
<Heading number={3} as="h2">
{name}
</Heading>
</Link>
);
})}
<style jsx>{`
:global(.BrowseCategories-category) {
border: none;
border-radius: 8px;
overflow: hidden;
position: relative;
width: 100%;
color: #fff;
}
:global(.BrowseCategories-category::after) {
content: "";
display: block;
padding-bottom: 100%;
}
:global(.BrowseCategories-category h2) {
padding: 16px;
position: absolute;
}
img {
transform: rotate(25deg) translate(18%, -2%);
bottom: 0;
right: 0;
box-shadow: 0 2px 4px 0 rgb(0 0 0 / 20%);
height: 100px;
position: absolute;
width: 100px;
object-fit: cover;
object-position: center center;
}
`}</style>
</Grid>
);
}
|