From 4838dba9865129a09ba19f7644f63e857643964a Mon Sep 17 00:00:00 2001
From: rui hildt <ruihildt@protonmail.com>
Date: Thu, 23 Jul 2020 21:17:31 +0200
Subject: [PATCH] Implement cards for discography

---
 src/components/Card.tsx    | 27 ++++++++++++++++++++++
 src/components/Results.tsx | 46 +++++++++++++++++++++++++-------------
 2 files changed, 57 insertions(+), 16 deletions(-)
 create mode 100644 src/components/Card.tsx

diff --git a/src/components/Card.tsx b/src/components/Card.tsx
new file mode 100644
index 0000000..01cf181
--- /dev/null
+++ b/src/components/Card.tsx
@@ -0,0 +1,27 @@
+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>
+	);
+};
diff --git a/src/components/Results.tsx b/src/components/Results.tsx
index a70f895..90fdad1 100644
--- a/src/components/Results.tsx
+++ b/src/components/Results.tsx
@@ -1,7 +1,9 @@
 import React from 'react';
-import { Box, Grid, Avatar } from 'grommet';
+import { Box, Grid, Avatar, Image, ResponsiveContext, Heading } from 'grommet';
 
+import { Card as Album } from './Card';
 import { Artists } from '../interfaces';
+import { size } from 'lodash';
 
 export const Results = ({ artists }: { artists: Artists }) => {
 	const {
@@ -16,32 +18,44 @@ export const Results = ({ artists }: { artists: Artists }) => {
 			columns={['1/4', '3/4']}
 			gap='small'
 			areas={[
-				['artist', 'similar'],
+				['artist', 'other'],
 				['discography', 'discography'],
 			]}
 		>
-			<Box gridArea='artist' background='light-5'>
-				<Avatar src={selectedImage} />
+			<Box gridArea='artist' height='300px' >
 				<h1>{selectedName}</h1>
+				<Image src={selectedImage} fit='cover' />
 			</Box>
-			<Box gridArea='similar' background='light-2'>
-				<h3>Similar results</h3>
+			<Box gridArea='other' background='light-2'>
+				<h3>Other results</h3>
 				{artists.map((artist) => (
-					<Box gridArea='artist' background='light-5' key={artist.id}>
+					<Box gridArea='artist' 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>
+			<ResponsiveContext.Consumer>
+				{(size) => (
+					<Grid
+						gridArea='discography'
+						align='start'
+						columns={{ count: 'fill', size: '300px' }}
+						gap='medium'
+					>
+						<Heading level='1'>
+							Discography
+						</Heading>
+						{selectedAlbums.map((album) => (
+							<Album
+								key={album.id}
+								image={album.image}
+								name={album.name}
+							/>
+						))}
+					</Grid>
+				)}
+			</ResponsiveContext.Consumer>
 		</Grid>
 	);
 };