ruihildt/spoti-search
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Implement cards for discography

Browse Source
This commit is contained in:
rui hildt 2020-07-23 21:17:31 +02:00
parent 21c65dbb5b
commit 4838dba986
2 changed files with 57 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/Card.tsx Normal file
View File

@ -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>
);
};

44
src/components/Results.tsx
View File

@ -1,7 +1,9 @@
import React from 'react'; 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 { Artists } from '../interfaces';
import { size } from 'lodash';
export const Results = ({ artists }: { artists: Artists }) => { export const Results = ({ artists }: { artists: Artists }) => {
const { const {
@ -16,32 +18,44 @@ export const Results = ({ artists }: { artists: Artists }) => {
columns={['1/4', '3/4']} columns={['1/4', '3/4']}
gap='small' gap='small'
areas={[ areas={[
['artist', 'similar'], ['artist', 'other'],
['discography', 'discography'], ['discography', 'discography'],
]} ]}
> >
<Box gridArea='artist' background='light-5'> <Box gridArea='artist' height='300px' >
<Avatar src={selectedImage} />
<h1>{selectedName}</h1> <h1>{selectedName}</h1>
<Image src={selectedImage} fit='cover' />
</Box> </Box>
<Box gridArea='similar' background='light-2'> <Box gridArea='other' background='light-2'>
<h3>Similar results</h3> <h3>Other results</h3>
{artists.map((artist) => ( {artists.map((artist) => (
<Box gridArea='artist' background='light-5' key={artist.id}> <Box gridArea='artist' key={artist.id}>
<Avatar src={artist.image} /> <Avatar src={artist.image} />
<h4>{artist.name}</h4> <h4>{artist.name}</h4>
</Box> </Box>
))} ))}
</Box> </Box>
<Box gridArea='discography' background='brand'> <ResponsiveContext.Consumer>
<h2>discography</h2> {(size) => (
{selectedAlbums.map((albums) => ( <Grid
<Box gridArea='albums' background='light-5' key={albums.id}> gridArea='discography'
<Avatar src={albums.image} /> align='start'
<h4>{albums.name}</h4> columns={{ count: 'fill', size: '300px' }}
</Box> gap='medium'
>
<Heading level='1'>
Discography
</Heading>
{selectedAlbums.map((album) => (
<Album
key={album.id}
image={album.image}
name={album.name}
/>
))} ))}
</Box> </Grid>
)}
</ResponsiveContext.Consumer>
</Grid> </Grid>
); );
}; };