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

46
src/components/Results.tsx
View File

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