Add Other component and refactor markup
This commit is contained in:
parent
4bb0a45bce
commit
a5ed4f84f6
@ -10,20 +10,7 @@
|
||||
content="A frontend to search for an artist and display its albums"
|
||||
/>
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
-->
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
|
||||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"
|
||||
@ -38,14 +25,5 @@
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
--></body>
|
||||
</body>
|
||||
</html>
|
||||
|
18
src/components/Album.tsx
Normal file
18
src/components/Album.tsx
Normal file
@ -0,0 +1,18 @@
|
||||
import React from 'react';
|
||||
import { Box, Heading, Image } from 'grommet';
|
||||
|
||||
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>
|
||||
<Heading
|
||||
level='4'
|
||||
margin={{ bottom: 'small', top: 'small', left: 'small' }}
|
||||
>
|
||||
{name}
|
||||
</Heading>
|
||||
</Box>
|
||||
);
|
||||
};
|
@ -1,27 +0,0 @@
|
||||
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>
|
||||
);
|
||||
};
|
25
src/components/Other.tsx
Normal file
25
src/components/Other.tsx
Normal file
@ -0,0 +1,25 @@
|
||||
import React from 'react';
|
||||
import { Box, Heading, Image } from 'grommet';
|
||||
|
||||
export const Other = ({ image, name }: { image: string; name: string }) => {
|
||||
return (
|
||||
<Box round='xxsmall' overflow='hidden' align='center' pad='small'>
|
||||
<Heading
|
||||
level='4'
|
||||
margin={{ bottom: 'small', top: 'small', left: 'small' }}
|
||||
>
|
||||
{name}
|
||||
</Heading>
|
||||
<Box
|
||||
height='small'
|
||||
width='small'
|
||||
round='full'
|
||||
background={{
|
||||
repeat: 'no-repeat',
|
||||
size: 'cover',
|
||||
image: `url(${image})`,
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
};
|
@ -1,9 +1,9 @@
|
||||
import React from 'react';
|
||||
import { Box, Grid, Avatar, Image, ResponsiveContext, Heading } from 'grommet';
|
||||
import { Box, Grid, ResponsiveContext, Heading } from 'grommet';
|
||||
|
||||
import { Card as Album } from './Card';
|
||||
import { Album } from './Album';
|
||||
import { Artists } from '../interfaces';
|
||||
import { size } from 'lodash';
|
||||
import { Other } from './Other';
|
||||
|
||||
export const Results = ({ artists }: { artists: Artists }) => {
|
||||
const {
|
||||
@ -14,38 +14,72 @@ export const Results = ({ artists }: { artists: Artists }) => {
|
||||
|
||||
return (
|
||||
<Grid
|
||||
as='section'
|
||||
rows={['fit', 'fit']}
|
||||
columns={['1/4', '3/4']}
|
||||
columns={['fit', '2/3']}
|
||||
gap='small'
|
||||
areas={[
|
||||
['artist-title', 'other-title'],
|
||||
['artist', 'other'],
|
||||
['disco-title', 'disco-title'],
|
||||
['discography', 'discography'],
|
||||
]}
|
||||
>
|
||||
<Box gridArea='artist' height='300px' >
|
||||
<h1>{selectedName}</h1>
|
||||
<Image src={selectedImage} fit='cover' />
|
||||
</Box>
|
||||
<Box gridArea='other' background='light-2'>
|
||||
<h3>Other results</h3>
|
||||
{artists.map((artist) => (
|
||||
<Box gridArea='artist' key={artist.id}>
|
||||
<Avatar src={artist.image} />
|
||||
<h4>{artist.name}</h4>
|
||||
<Heading
|
||||
level='1'
|
||||
gridArea='artist-title'
|
||||
margin={{ vertical: 'none' }}
|
||||
>
|
||||
{selectedName}
|
||||
</Heading>
|
||||
<Grid
|
||||
gridArea='artist'
|
||||
margin={{ bottom: 'medium' }}
|
||||
>
|
||||
<Box
|
||||
round='full'
|
||||
background={{
|
||||
repeat: 'no-repeat',
|
||||
size: 'cover',
|
||||
image: `url(${selectedImage})`,
|
||||
}}
|
||||
height='300px'
|
||||
width='300px'
|
||||
/>
|
||||
</Grid>
|
||||
<Heading
|
||||
level='2'
|
||||
gridArea='other-title'
|
||||
margin={{ vertical: 'none' }}
|
||||
alignSelf='end'
|
||||
size="small"
|
||||
>
|
||||
Other results
|
||||
</Heading>
|
||||
<ResponsiveContext.Consumer>
|
||||
{(size) => (
|
||||
<Box gridArea='other' direction='row' wrap>
|
||||
{artists.slice(1, artists.length).map((artist) => (
|
||||
<Other
|
||||
key={artist.id}
|
||||
image={artist.image}
|
||||
name={artist.name}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
</ResponsiveContext.Consumer>
|
||||
<Heading level='2' gridArea='disco-title' size='large'>
|
||||
Discography
|
||||
</Heading>
|
||||
<ResponsiveContext.Consumer>
|
||||
{(size) => (
|
||||
<Grid
|
||||
gridArea='discography'
|
||||
align='start'
|
||||
columns={{ count: 'fill', size: '300px' }}
|
||||
gap='medium'
|
||||
gap='large'
|
||||
>
|
||||
<Heading level='1'>
|
||||
Discography
|
||||
</Heading>
|
||||
{selectedAlbums.map((album) => (
|
||||
<Album
|
||||
key={album.id}
|
||||
|
Loading…
Reference in New Issue
Block a user