62 lines
1.4 KiB
TypeScript
62 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import { Box, Grid, Avatar, Image, ResponsiveContext, Heading } from 'grommet';
|
|
|
|
import { Card as Album } from './Card';
|
|
import { Artists } from '../interfaces';
|
|
import { size } from 'lodash';
|
|
|
|
export const Results = ({ artists }: { artists: Artists }) => {
|
|
const {
|
|
name: selectedName,
|
|
image: selectedImage,
|
|
albums: selectedAlbums,
|
|
} = artists[0];
|
|
|
|
return (
|
|
<Grid
|
|
rows={['fit', 'fit']}
|
|
columns={['1/4', '3/4']}
|
|
gap='small'
|
|
areas={[
|
|
['artist', 'other'],
|
|
['discography', 'discography'],
|
|
]}
|
|
>
|
|
<Box gridArea='artist' height='300px' >
|
|
<h1>{selectedName}</h1>
|
|
<Image src={selectedImage} fit='cover' />
|
|
</Box>
|
|
<Box gridArea='other' background='light-2'>
|
|
<h3>Other results</h3>
|
|
{artists.map((artist) => (
|
|
<Box gridArea='artist' key={artist.id}>
|
|
<Avatar src={artist.image} />
|
|
<h4>{artist.name}</h4>
|
|
</Box>
|
|
))}
|
|
</Box>
|
|
<ResponsiveContext.Consumer>
|
|
{(size) => (
|
|
<Grid
|
|
gridArea='discography'
|
|
align='start'
|
|
columns={{ count: 'fill', size: '300px' }}
|
|
gap='medium'
|
|
>
|
|
<Heading level='1'>
|
|
Discography
|
|
</Heading>
|
|
{selectedAlbums.map((album) => (
|
|
<Album
|
|
key={album.id}
|
|
image={album.image}
|
|
name={album.name}
|
|
/>
|
|
))}
|
|
</Grid>
|
|
)}
|
|
</ResponsiveContext.Consumer>
|
|
</Grid>
|
|
);
|
|
};
|