48 lines
1.1 KiB
TypeScript
48 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
import { Box, Grid, Avatar } from 'grommet';
|
|
|
|
import { Artists } from '../interfaces';
|
|
|
|
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', 'similar'],
|
|
['discography', 'discography'],
|
|
]}
|
|
>
|
|
<Box gridArea='artist' background='light-5'>
|
|
<Avatar src={selectedImage} />
|
|
<h1>{selectedName}</h1>
|
|
</Box>
|
|
<Box gridArea='similar' background='light-2'>
|
|
<h3>Similar results</h3>
|
|
{artists.map((artist) => (
|
|
<Box gridArea='artist' background='light-5' key={artist.id}>
|
|
<Avatar src={artist.image} />
|
|
<h4>{artist.name}</h4>
|
|
</Box>
|
|
))}
|
|
</Box>
|
|
<Box gridArea='discography' background='brand'>
|
|
<h2>discography</h2>
|
|
{selectedAlbums.map((albums) => (
|
|
<Box gridArea='albums' background='light-5' key={albums.id}>
|
|
<Avatar src={albums.image} />
|
|
<h4>{albums.name}</h4>
|
|
</Box>
|
|
))}
|
|
</Box>
|
|
</Grid>
|
|
);
|
|
};
|