spoti-search/src/components/Results.tsx

import React from 'react';
import { Box, Grid } from 'grommet';

import { Artists } from '../interfaces';

export const Results = ({ artists, selected }: { artists: Artists, selected: boolean }) => {
	console.log('artists', artists);

	return selected ? (
		<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>
	) : (
		<></>
	);
};