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"
|
content="A frontend to search for an artist and display its albums"
|
||||||
/>
|
/>
|
||||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
<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" />
|
<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
|
<link
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"
|
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"
|
||||||
@ -38,14 +25,5 @@
|
|||||||
<body>
|
<body>
|
||||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
<!--
|
</body>
|
||||||
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>
|
|
||||||
</html>
|
</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 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 { Artists } from '../interfaces';
|
||||||
import { size } from 'lodash';
|
import { Other } from './Other';
|
||||||
|
|
||||||
export const Results = ({ artists }: { artists: Artists }) => {
|
export const Results = ({ artists }: { artists: Artists }) => {
|
||||||
const {
|
const {
|
||||||
@ -14,38 +14,72 @@ export const Results = ({ artists }: { artists: Artists }) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Grid
|
<Grid
|
||||||
|
as='section'
|
||||||
rows={['fit', 'fit']}
|
rows={['fit', 'fit']}
|
||||||
columns={['1/4', '3/4']}
|
columns={['fit', '2/3']}
|
||||||
gap='small'
|
gap='small'
|
||||||
areas={[
|
areas={[
|
||||||
|
['artist-title', 'other-title'],
|
||||||
['artist', 'other'],
|
['artist', 'other'],
|
||||||
|
['disco-title', 'disco-title'],
|
||||||
['discography', 'discography'],
|
['discography', 'discography'],
|
||||||
]}
|
]}
|
||||||
>
|
>
|
||||||
<Box gridArea='artist' height='300px' >
|
<Heading
|
||||||
<h1>{selectedName}</h1>
|
level='1'
|
||||||
<Image src={selectedImage} fit='cover' />
|
gridArea='artist-title'
|
||||||
</Box>
|
margin={{ vertical: 'none' }}
|
||||||
<Box gridArea='other' background='light-2'>
|
>
|
||||||
<h3>Other results</h3>
|
{selectedName}
|
||||||
{artists.map((artist) => (
|
</Heading>
|
||||||
<Box gridArea='artist' key={artist.id}>
|
<Grid
|
||||||
<Avatar src={artist.image} />
|
gridArea='artist'
|
||||||
<h4>{artist.name}</h4>
|
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>
|
||||||
))}
|
)}
|
||||||
</Box>
|
</ResponsiveContext.Consumer>
|
||||||
|
<Heading level='2' gridArea='disco-title' size='large'>
|
||||||
|
Discography
|
||||||
|
</Heading>
|
||||||
<ResponsiveContext.Consumer>
|
<ResponsiveContext.Consumer>
|
||||||
{(size) => (
|
{(size) => (
|
||||||
<Grid
|
<Grid
|
||||||
gridArea='discography'
|
gridArea='discography'
|
||||||
align='start'
|
align='start'
|
||||||
columns={{ count: 'fill', size: '300px' }}
|
columns={{ count: 'fill', size: '300px' }}
|
||||||
gap='medium'
|
gap='large'
|
||||||
>
|
>
|
||||||
<Heading level='1'>
|
|
||||||
Discography
|
|
||||||
</Heading>
|
|
||||||
{selectedAlbums.map((album) => (
|
{selectedAlbums.map((album) => (
|
||||||
<Album
|
<Album
|
||||||
key={album.id}
|
key={album.id}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user