96 lines
1.9 KiB
TypeScript
96 lines
1.9 KiB
TypeScript
import React from 'react';
|
|
import { Box, Grid, ResponsiveContext, Heading } from 'grommet';
|
|
|
|
import { Album } from './Album';
|
|
import { Artists } from '../interfaces';
|
|
import { Other } from './Other';
|
|
|
|
export const Results = ({ artists }: { artists: Artists }) => {
|
|
const {
|
|
name: selectedName,
|
|
image: selectedImage,
|
|
albums: selectedAlbums,
|
|
} = artists[0];
|
|
|
|
return (
|
|
<Grid
|
|
as='section'
|
|
rows={['fit', 'fit']}
|
|
columns={['fit', '2/3']}
|
|
gap='small'
|
|
areas={[
|
|
['artist-title', 'other-title'],
|
|
['artist', 'other'],
|
|
['disco-title', 'disco-title'],
|
|
['discography', 'discography'],
|
|
]}
|
|
>
|
|
<Heading
|
|
level='1'
|
|
gridArea='artist-title'
|
|
margin={{ vertical: 'none' }}
|
|
>
|
|
{selectedName}
|
|
</Heading>
|
|
<Grid
|
|
gridArea='artist'
|
|
margin={{ bottom: 'medium' }}
|
|
>
|
|
<Box
|
|
round='full'
|
|
background={{
|
|
repeat: 'no-repeat',
|
|
size: 'cover',
|
|
image: `url(${selectedImage})`,
|
|
}}
|
|
height='300px'
|
|
width='300px'
|
|
/>
|
|
</Grid>
|
|
<Heading
|
|
level='2'
|
|
gridArea='other-title'
|
|
margin={{ vertical: 'none' }}
|
|
alignSelf='end'
|
|
size="small"
|
|
>
|
|
Other results
|
|
</Heading>
|
|
<ResponsiveContext.Consumer>
|
|
{(size) => (
|
|
<Box gridArea='other' direction='row' wrap>
|
|
{artists.slice(1, artists.length).map((artist) => (
|
|
<Other
|
|
key={artist.id}
|
|
image={artist.image}
|
|
name={artist.name}
|
|
/>
|
|
))}
|
|
</Box>
|
|
)}
|
|
</ResponsiveContext.Consumer>
|
|
<Heading level='2' gridArea='disco-title' size='large'>
|
|
Discography
|
|
</Heading>
|
|
<ResponsiveContext.Consumer>
|
|
{(size) => (
|
|
<Grid
|
|
gridArea='discography'
|
|
align='start'
|
|
columns={{ count: 'fill', size: '300px' }}
|
|
gap='large'
|
|
>
|
|
{selectedAlbums.map((album) => (
|
|
<Album
|
|
key={album.id}
|
|
image={album.image}
|
|
name={album.name}
|
|
/>
|
|
))}
|
|
</Grid>
|
|
)}
|
|
</ResponsiveContext.Consumer>
|
|
</Grid>
|
|
);
|
|
};
|