Refactor and improve layout

src/components/Album.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, Heading, Image } from 'grommet';
+import { Box, Heading } from 'grommet';
 
 import placeholder from '../assets/placeholder-music.jpg';
 
@@ -10,10 +10,16 @@ export const Album = ({ image, name }: { image: string; name: string }) => {
 	}
 
 	return (
-		<Box round='xxsmall' elevation='small' overflow='hidden'>
+		<Box width='255px' margin={{right: '20px'}}>
-			<Box height='300px'>
+			<Box
-				<Image src={image} fit='cover' />
+				height='255px'
-			</Box>
+				width='255px'
+				background={{
+					repeat: 'no-repeat',
+					size: 'cover',
+					image: `url(${image})`,
+				}}
+			/>
 			<Heading
 				level='4'
 				margin={{ bottom: 'small', top: 'small', left: 'small' }}

src/components/Results.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, Grid, ResponsiveContext, Heading } from 'grommet';
+import { Box, Heading } from 'grommet';
 
 import { Album } from './Album';
 import { Artists, Albums } from '../interfaces';
@@ -34,87 +34,91 @@ export const Results = ({
 	});
 
 	return (
-		<Grid
+		<>
-			as='section'
-			rows={['fit', 'fit']}
-			columns={['fit', 'fit']}
-			gap='large'
-			areas={[
-				['title', 'title'],
-				['artist-other', 'artist-other'],
-				['disco-title', 'disco-title'],
-				['discography', 'discography'],
-			]}
-			pad='xlarge'
-		>
-			<Heading
-				level='1'
-				gridArea='title'
-				size='medium'
-				margin={{ vertical: 'none' }}
-			>
-				{selectedName}
-			</Heading>
 			<Box
-				gridArea='artist-other'
+				width='xxlarge'
-				direction='row-responsive'
+				margin={{
-				responsive
+					vertical: '0',
-				gap='large'
+					horizontal: 'auto',
+				}}
 			>
-				<Box width={{ min: '300px', max: '300px' }}>
+				<Heading level='1' size='medium'>
-					<Box
+					{selectedName}
-						round='full'
+				</Heading>
-						background={{
+			</Box>
-							repeat: 'no-repeat',
+			<Box
-							size: 'cover',
+				as='section'
-							image: `url(${selectedImage})`,
+				direction='row'
-						}}
+				width='xxlarge'
-						height='300px'
+				margin={{
-						width='300px'
+					vertical: '0',
-					/>
+					horizontal: 'auto',
-				</Box>
+				}}
-				<Box justify='center'>
+			>
-					<Heading
+				<Box
-						level='2'
+					direction='column'
-						margin={{ vertical: 'none' }}
+					align='center'
-						size='small'
+					width={{ min: '320px', max: '320px' }}
-					>
+					margin={{
-						Other results
+						top: '0',
-					</Heading>
+						bottom: '0',
-					<Box
+						left: '20px',
-						direction='row-reverse'
+						right: '80px',
-						justify='end'
+					}}
-						wrap
+				>
-						gap='medium'
+					<Box>
-						width={{ min: '332px' }}
+						<Box
-					>
+							round='full'
-						{otherArtists.map((artist) => (
+							background={{
-							<Other
+								repeat: 'no-repeat',
-								key={artist.id}
+								size: 'cover',
-								image={artist.image}
+								image: `url(${selectedImage})`,
-								name={artist.name}
+							}}
-								handleClick={handleClick}
+							height='270px'
-							/>
+							width='270px'
-						))}
+							margin={{
+								top: '0',
+								bottom: '15px',
+								left: '0',
+								right: '0',
+							}}
+						/>
+					</Box>
+
+					<Box>
+						<Heading
+							level='2'
+							size='small'
+						>
+							Other results
+						</Heading>
+
+						<Box direction='row-reverse' justify='around' wrap>
+							{otherArtists.map((artist) => (
+								<Other
+									key={artist.id}
+									image={artist.image}
+									name={artist.name}
+									handleClick={handleClick}
+								/>
+							))}
+						</Box>
 					</Box>
 				</Box>
-			</Box>
+
-			<Heading
+				<Box
-				level='2'
+					direction='column'
-				gridArea='disco-title'
+					width={{ min: '320px' }}
-				size='medium'
+					margin={{ top: '-52px' }}
-				margin={{ bottom: 'none' }}
+				>
-			>
+					<Heading
-				Discography
+						level='2'
-			</Heading>
+						size='medium'
-			<ResponsiveContext.Consumer>
-				{(size) => (
-					<Grid
-						gridArea='discography'
-						align='start'
-						columns={{ count: 'fill', size: '260px' }}
-						gap='large'
 					>
+						Discography
+					</Heading>
+
+					<Box direction='row' justify='start' wrap>
 						{selectedAlbums.map((album) => (
 							<Album
 								key={album.id}
@@ -122,9 +126,9 @@ export const Results = ({
 								name={album.name}
 							/>
 						))}
-					</Grid>
+					</Box>
-				)}
+				</Box>
-			</ResponsiveContext.Consumer>
+			</Box>
-		</Grid>
+		</>
 	);
 };