135 lines
2.6 KiB
TypeScript
135 lines
2.6 KiB
TypeScript
import React from 'react';
|
|
import { Box, Heading } from 'grommet';
|
|
|
|
import { Album } from './Album';
|
|
import { Artists, Albums } from '../interfaces';
|
|
import { Other } from './Other';
|
|
import placeholder from '../assets/placeholder-music.jpg';
|
|
|
|
export const Results = ({
|
|
artists,
|
|
handleClick,
|
|
}: {
|
|
artists: Artists;
|
|
handleClick: (name: string) => void;
|
|
}) => {
|
|
const { name: selectedName, image, albums } = artists[0];
|
|
const otherArtists = artists.slice(1, artists.length);
|
|
let selectedAlbums: Albums = [];
|
|
let selectedImage: string = image;
|
|
|
|
// Load placeholder image if none provided
|
|
if (!image) {
|
|
selectedImage = placeholder;
|
|
}
|
|
|
|
// Remove duplicate albums based on `name`
|
|
// Might need to refine this according to the data quality
|
|
const uniqueAlbums = new Set();
|
|
albums.forEach((album) => {
|
|
if (!uniqueAlbums.has(album.name)) {
|
|
uniqueAlbums.add(album.name);
|
|
selectedAlbums.push(album);
|
|
}
|
|
});
|
|
|
|
return (
|
|
<>
|
|
<Box
|
|
width='xxlarge'
|
|
margin={{
|
|
vertical: '0',
|
|
horizontal: 'auto',
|
|
}}
|
|
>
|
|
<Heading level='1' size='medium'>
|
|
{selectedName}
|
|
</Heading>
|
|
</Box>
|
|
<Box
|
|
as='section'
|
|
direction='row'
|
|
width='xxlarge'
|
|
margin={{
|
|
vertical: '0',
|
|
horizontal: 'auto',
|
|
}}
|
|
>
|
|
<Box
|
|
direction='column'
|
|
align='center'
|
|
width={{ min: '320px', max: '320px' }}
|
|
margin={{
|
|
top: '0',
|
|
bottom: '0',
|
|
left: '20px',
|
|
right: '80px',
|
|
}}
|
|
>
|
|
<Box>
|
|
<Box
|
|
round='full'
|
|
background={{
|
|
repeat: 'no-repeat',
|
|
size: 'cover',
|
|
image: `url(${selectedImage})`,
|
|
}}
|
|
height='270px'
|
|
width='270px'
|
|
margin={{
|
|
top: '0',
|
|
bottom: '15px',
|
|
left: '0',
|
|
right: '0',
|
|
}}
|
|
/>
|
|
</Box>
|
|
|
|
<Box>
|
|
<Heading
|
|
level='2'
|
|
size='small'
|
|
>
|
|
Other results
|
|
</Heading>
|
|
|
|
<Box direction='row-reverse' justify='around' wrap>
|
|
{otherArtists.map((artist) => (
|
|
<Other
|
|
key={artist.id}
|
|
image={artist.image}
|
|
name={artist.name}
|
|
handleClick={handleClick}
|
|
/>
|
|
))}
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
|
|
<Box
|
|
direction='column'
|
|
width={{ min: '320px' }}
|
|
margin={{ top: '-52px' }}
|
|
>
|
|
<Heading
|
|
level='2'
|
|
size='medium'
|
|
>
|
|
Discography
|
|
</Heading>
|
|
|
|
<Box direction='row' justify='start' wrap>
|
|
{selectedAlbums.map((album) => (
|
|
<Album
|
|
key={album.id}
|
|
image={album.image}
|
|
name={album.name}
|
|
/>
|
|
))}
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
</>
|
|
);
|
|
};
|