Refactor and improve layout
This commit is contained in:
parent
47a25fe939
commit
66f01bfc95
@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { Box, Heading, Image } from 'grommet';
|
||||
import { Box, Heading } from 'grommet';
|
||||
|
||||
import placeholder from '../assets/placeholder-music.jpg';
|
||||
|
||||
@ -10,10 +10,16 @@ export const Album = ({ image, name }: { image: string; name: string }) => {
|
||||
}
|
||||
|
||||
return (
|
||||
<Box round='xxsmall' elevation='small' overflow='hidden'>
|
||||
<Box height='300px'>
|
||||
<Image src={image} fit='cover' />
|
||||
</Box>
|
||||
<Box width='255px' margin={{right: '20px'}}>
|
||||
<Box
|
||||
height='255px'
|
||||
width='255px'
|
||||
background={{
|
||||
repeat: 'no-repeat',
|
||||
size: 'cover',
|
||||
image: `url(${image})`,
|
||||
}}
|
||||
/>
|
||||
<Heading
|
||||
level='4'
|
||||
margin={{ bottom: 'small', top: 'small', left: 'small' }}
|
||||
|
@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { Box, Grid, ResponsiveContext, Heading } from 'grommet';
|
||||
import { Box, Heading } from 'grommet';
|
||||
|
||||
import { Album } from './Album';
|
||||
import { Artists, Albums } from '../interfaces';
|
||||
@ -34,87 +34,91 @@ export const Results = ({
|
||||
});
|
||||
|
||||
return (
|
||||
<Grid
|
||||
as='section'
|
||||
rows={['fit', 'fit']}
|
||||
columns={['fit', 'fit']}
|
||||
gap='large'
|
||||
areas={[
|
||||
['title', 'title'],
|
||||
['artist-other', 'artist-other'],
|
||||
['disco-title', 'disco-title'],
|
||||
['discography', 'discography'],
|
||||
]}
|
||||
pad='xlarge'
|
||||
>
|
||||
<Heading
|
||||
level='1'
|
||||
gridArea='title'
|
||||
size='medium'
|
||||
margin={{ vertical: 'none' }}
|
||||
>
|
||||
{selectedName}
|
||||
</Heading>
|
||||
<>
|
||||
<Box
|
||||
gridArea='artist-other'
|
||||
direction='row-responsive'
|
||||
responsive
|
||||
gap='large'
|
||||
width='xxlarge'
|
||||
margin={{
|
||||
vertical: '0',
|
||||
horizontal: 'auto',
|
||||
}}
|
||||
>
|
||||
<Box width={{ min: '300px', max: '300px' }}>
|
||||
<Box
|
||||
round='full'
|
||||
background={{
|
||||
repeat: 'no-repeat',
|
||||
size: 'cover',
|
||||
image: `url(${selectedImage})`,
|
||||
}}
|
||||
height='300px'
|
||||
width='300px'
|
||||
/>
|
||||
</Box>
|
||||
<Box justify='center'>
|
||||
<Heading
|
||||
level='2'
|
||||
margin={{ vertical: 'none' }}
|
||||
size='small'
|
||||
>
|
||||
Other results
|
||||
</Heading>
|
||||
<Box
|
||||
direction='row-reverse'
|
||||
justify='end'
|
||||
wrap
|
||||
gap='medium'
|
||||
width={{ min: '332px' }}
|
||||
>
|
||||
{otherArtists.map((artist) => (
|
||||
<Other
|
||||
key={artist.id}
|
||||
image={artist.image}
|
||||
name={artist.name}
|
||||
handleClick={handleClick}
|
||||
/>
|
||||
))}
|
||||
<Heading level='1' size='medium'>
|
||||
{selectedName}
|
||||
</Heading>
|
||||
</Box>
|
||||
<Box
|
||||
as='section'
|
||||
direction='row'
|
||||
width='xxlarge'
|
||||
margin={{
|
||||
vertical: '0',
|
||||
horizontal: 'auto',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
direction='column'
|
||||
align='center'
|
||||
width={{ min: '320px', max: '320px' }}
|
||||
margin={{
|
||||
top: '0',
|
||||
bottom: '0',
|
||||
left: '20px',
|
||||
right: '80px',
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<Box
|
||||
round='full'
|
||||
background={{
|
||||
repeat: 'no-repeat',
|
||||
size: 'cover',
|
||||
image: `url(${selectedImage})`,
|
||||
}}
|
||||
height='270px'
|
||||
width='270px'
|
||||
margin={{
|
||||
top: '0',
|
||||
bottom: '15px',
|
||||
left: '0',
|
||||
right: '0',
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Heading
|
||||
level='2'
|
||||
size='small'
|
||||
>
|
||||
Other results
|
||||
</Heading>
|
||||
|
||||
<Box direction='row-reverse' justify='around' wrap>
|
||||
{otherArtists.map((artist) => (
|
||||
<Other
|
||||
key={artist.id}
|
||||
image={artist.image}
|
||||
name={artist.name}
|
||||
handleClick={handleClick}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
<Heading
|
||||
level='2'
|
||||
gridArea='disco-title'
|
||||
size='medium'
|
||||
margin={{ bottom: 'none' }}
|
||||
>
|
||||
Discography
|
||||
</Heading>
|
||||
<ResponsiveContext.Consumer>
|
||||
{(size) => (
|
||||
<Grid
|
||||
gridArea='discography'
|
||||
align='start'
|
||||
columns={{ count: 'fill', size: '260px' }}
|
||||
gap='large'
|
||||
|
||||
<Box
|
||||
direction='column'
|
||||
width={{ min: '320px' }}
|
||||
margin={{ top: '-52px' }}
|
||||
>
|
||||
<Heading
|
||||
level='2'
|
||||
size='medium'
|
||||
>
|
||||
Discography
|
||||
</Heading>
|
||||
|
||||
<Box direction='row' justify='start' wrap>
|
||||
{selectedAlbums.map((album) => (
|
||||
<Album
|
||||
key={album.id}
|
||||
@ -122,9 +126,9 @@ export const Results = ({
|
||||
name={album.name}
|
||||
/>
|
||||
))}
|
||||
</Grid>
|
||||
)}
|
||||
</ResponsiveContext.Consumer>
|
||||
</Grid>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user