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 (
+
+
+
+
+
+
+
+
+
+ {name}
+
+
+
+
+
+ );
+};
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'],
]}
>
-
-
+
{selectedName}
+
-
- Similar results
+
+ Other results
{artists.map((artist) => (
-
+
{artist.name}
))}
-
- discography
- {selectedAlbums.map((albums) => (
-
-
- {albums.name}
-
- ))}
-
+
+ {(size) => (
+
+
+ Discography
+
+ {selectedAlbums.map((album) => (
+
+ ))}
+
+ )}
+
);
};