Add Other component and refactor markup

src/components/Album.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Box, Heading, Image } from 'grommet';
+
+export const Album = ({ image, name }: { image: string; name: string }) => {
+	return (
+		<Box round='xxsmall' elevation='small' overflow='hidden'>
+			<Box height='300px'>
+				<Image src={image} fit='cover' />
+			</Box>
+			<Heading
+				level='4'
+				margin={{ bottom: 'small', top: 'small', left: 'small' }}
+			>
+				{name}
+			</Heading>
+		</Box>
+	);
+};

src/components/Card.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import { Box, Heading, Image } from 'grommet';
-
-export const Card = ({ image, name }: { image: string; name: string }) => {
-	return (
-		<Box round='xxsmall' elevation='small' overflow='hidden'>
-			<Box height='300px'>
-				<Image src={image} fit='cover' />
-			</Box>
-
-			<Box pad={{ horizontal: 'small' }}>
-				<Box
-					margin={{ top: 'small' }}
-					direction='row'
-					align='center'
-					justify='between'
-				>
-					<Box>
-						<Heading level='4' margin={{bottom: "small", top : "xsmall"}}>
-							{name}
-						</Heading>
-					</Box>
-				</Box>
-			</Box>
-		</Box>
-	);
-};

src/components/Other.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Box, Heading, Image } from 'grommet';
+
+export const Other = ({ image, name }: { image: string; name: string }) => {
+	return (
+		<Box round='xxsmall' overflow='hidden' align='center' pad='small'>
+			<Heading
+				level='4'
+				margin={{ bottom: 'small', top: 'small', left: 'small' }}
+			>
+				{name}
+			</Heading>
+			<Box
+				height='small'
+				width='small'
+				round='full'
+				background={{
+					repeat: 'no-repeat',
+					size: 'cover',
+					image: `url(${image})`,
+				}}
+			/>
+		</Box>
+	);
+};

src/components/Results.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { Box, Grid, Avatar, Image, ResponsiveContext, Heading } from 'grommet';
+import { Box, Grid, ResponsiveContext, Heading } from 'grommet';
 
-import { Card as Album } from './Card';
+import { Album } from './Album';
 import { Artists } from '../interfaces';
-import { size } from 'lodash';
+import { Other } from './Other';
 
 export const Results = ({ artists }: { artists: Artists }) => {
 	const {
@@ -14,38 +14,72 @@ export const Results = ({ artists }: { artists: Artists }) => {
 
 	return (
 		<Grid
+			as='section'
 			rows={['fit', 'fit']}
-			columns={['1/4', '3/4']}
+			columns={['fit', '2/3']}
 			gap='small'
 			areas={[
+				['artist-title', 'other-title'],
 				['artist', 'other'],
+				['disco-title', 'disco-title'],
 				['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>
+			<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>
-				))}
-			</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='medium'
+						gap='large'
 					>
-						<Heading level='1'>
-							Discography
-						</Heading>
 						{selectedAlbums.map((album) => (
 							<Album
 								key={album.id}