Add onClick event to Other results cards

src/components/App.tsx

@@ -71,6 +71,10 @@ export default function App() {
 		setSelected(true);
 	};
 
+	const handleClick = () => {
+		console.log('click')
+	}
+
 	useEffect(() => {
 		// TODO optimize re-rendering, probably by using onCompleted instead of this useEffect
 		// See https://github.com/apollographql/apollo-client/issues/5268#issuecomment-596950174
@@ -97,7 +101,7 @@ export default function App() {
 				suggestions={suggestions}
 				handleSelect={handleSelect}
 			/>
-			{selected && <Results artists={artists} />}
+			{selected && <Results artists={artists}  handleClick={handleClick}/>}
 		</Grommet>
 	);
 }

src/components/Other.tsx

@@ -1,9 +1,23 @@
 import React from 'react';
-import { Box, Heading, Image } from 'grommet';
+import { Box, Heading } from 'grommet';
 
-export const Other = ({ image, name }: { image: string; name: string }) => {
+export const Other = ({
+	image,
+	name,
+	handleClick,
+}: {
+	image: string;
+	name: string;
+	handleClick: ((...args: any[]) => any) & ((event: MouseEvent) => void);
+}) => {
 	return (
-		<Box round='xxsmall' overflow='hidden' align='center' pad='small'>
+		<Box
+			round='xxsmall'
+			overflow='hidden'
+			align='center'
+			pad='small'
+			onClick={handleClick}
+		>
 			<Heading
 				level='4'
 				margin={{ bottom: 'small', top: 'small', left: 'small' }}

src/components/Results.tsx

@@ -5,7 +5,13 @@ import { Album } from './Album';
 import { Artists } from '../interfaces';
 import { Other } from './Other';
 
-export const Results = ({ artists }: { artists: Artists }) => {
+export const Results = ({
+	artists,
+	handleClick,
+}: {
+	artists: Artists;
+	handleClick: ((...args: any[]) => any) & ((event: MouseEvent) => void);
+}) => {
 	const {
 		name: selectedName,
 		image: selectedImage,
@@ -32,10 +38,7 @@ export const Results = ({ artists }: { artists: Artists }) => {
 			>
 				{selectedName}
 			</Heading>
-			<Grid
+			<Grid gridArea='artist' margin={{ bottom: 'medium' }}>
-				gridArea='artist'
-				margin={{ bottom: 'medium' }}
-			>
 				<Box
 					round='full'
 					background={{
@@ -52,7 +55,7 @@ export const Results = ({ artists }: { artists: Artists }) => {
 				gridArea='other-title'
 				margin={{ vertical: 'none' }}
 				alignSelf='end'
-				size="small"
+				size='small'
 			>
 				Other results
 			</Heading>
@@ -64,6 +67,7 @@ export const Results = ({ artists }: { artists: Artists }) => {
 								key={artist.id}
 								image={artist.image}
 								name={artist.name}
+								handleClick={handleClick}
 							/>
 						))}
 					</Box>