spoti-search/src/components/Results.tsx

33 lines
721 B
TypeScript

import React from 'react';
import { Box, Grid } from 'grommet';
import { Artists } from '../interfaces';
export const Results = ({ artists }: { artists: Artists }) => {
// Selected artist is always the first of the array
const selectedArtist: Artists = artists?.splice(0, 1);
const otherArtists = artists;
return (
<Grid
rows={['small', 'small']}
columns={['1/4', '3/4']}
gap='small'
areas={[
['artist', 'similar'],
['discography', 'discography'],
]}
>
<Box gridArea='artist' background='light-5'>
Artist
</Box>
<Box gridArea='similar' background='light-2'>
Similar
</Box>
<Box gridArea='discography' background='brand'>
discography
</Box>
</Grid>
);
};