Polish UI
This commit is contained in:
parent
b6a77263c8
commit
8d182a1177
@ -1,5 +1,5 @@
|
||||
import React, { useState, useCallback, useEffect } from 'react';
|
||||
import { Grommet } from 'grommet';
|
||||
import { Grommet, Heading } from 'grommet';
|
||||
import { debounce } from 'lodash';
|
||||
import { gql, useLazyQuery } from '@apollo/client';
|
||||
|
||||
@ -8,7 +8,6 @@ import { Search } from './Search';
|
||||
import { Results } from './Results';
|
||||
import { Artists, Artist } from '../interfaces';
|
||||
|
||||
|
||||
const QUERY_ARTISTS = gql`
|
||||
query Artist($byName: String!) {
|
||||
queryArtists(byName: $byName) {
|
||||
@ -98,12 +97,14 @@ export default function App() {
|
||||
return (
|
||||
<Grommet theme={theme}>
|
||||
<Header>
|
||||
<h1>Spoti Search</h1>
|
||||
<Heading level='1' margin={{ vertical: 'small' }} color='light-1'>
|
||||
Spoti Search
|
||||
</Heading>
|
||||
</Header>
|
||||
<Search
|
||||
inputValue={inputValue}
|
||||
handleChange={handleChange}
|
||||
suggestions={suggestions}
|
||||
handleChange={handleChange}
|
||||
handleSelect={handleSelect}
|
||||
/>
|
||||
{selected && (
|
||||
@ -115,6 +116,9 @@ export default function App() {
|
||||
|
||||
const theme = {
|
||||
global: {
|
||||
colors: {
|
||||
brand: 'rgb(24, 177, 147)',
|
||||
},
|
||||
font: {
|
||||
family: 'Roboto',
|
||||
size: '18px',
|
||||
|
@ -38,22 +38,24 @@ export const Results = ({
|
||||
as='section'
|
||||
rows={['fit', 'fit']}
|
||||
columns={['fit', '2/3']}
|
||||
gap='small'
|
||||
gap='large'
|
||||
areas={[
|
||||
['artist-title', 'other-title'],
|
||||
['artist', 'other'],
|
||||
['disco-title', 'disco-title'],
|
||||
['discography', 'discography'],
|
||||
]}
|
||||
pad='xlarge'
|
||||
>
|
||||
<Heading
|
||||
level='1'
|
||||
size='small'
|
||||
gridArea='artist-title'
|
||||
margin={{ vertical: 'none' }}
|
||||
>
|
||||
{selectedName}
|
||||
</Heading>
|
||||
<Grid gridArea='artist' margin={{ bottom: 'medium' }}>
|
||||
<Box gridArea='artist'>
|
||||
<Box
|
||||
round='full'
|
||||
background={{
|
||||
@ -64,7 +66,7 @@ export const Results = ({
|
||||
height='300px'
|
||||
width='300px'
|
||||
/>
|
||||
</Grid>
|
||||
</Box>
|
||||
<Heading
|
||||
level='2'
|
||||
gridArea='other-title'
|
||||
@ -76,7 +78,7 @@ export const Results = ({
|
||||
</Heading>
|
||||
<ResponsiveContext.Consumer>
|
||||
{(size) => (
|
||||
<Box gridArea='other' direction='row' wrap>
|
||||
<Box gridArea='other' direction='row-reverse' justify='end' wrap gap='medium'>
|
||||
{otherArtists.map((artist) => (
|
||||
<Other
|
||||
key={artist.id}
|
||||
@ -88,7 +90,7 @@ export const Results = ({
|
||||
</Box>
|
||||
)}
|
||||
</ResponsiveContext.Consumer>
|
||||
<Heading level='2' gridArea='disco-title' size='large'>
|
||||
<Heading level='2' gridArea='disco-title' size='large' margin={{bottom: "none"}}>
|
||||
Discography
|
||||
</Heading>
|
||||
<ResponsiveContext.Consumer>
|
||||
|
@ -17,16 +17,23 @@ export const Search = ({
|
||||
as='section'
|
||||
direction='row'
|
||||
justify='center'
|
||||
margin={{ vertical: 'large' }}
|
||||
margin={{ top: 'large' }}
|
||||
>
|
||||
<TextInput
|
||||
value={inputValue}
|
||||
onChange={e => handleChange(e.target.value)}
|
||||
onSelect={(target) => handleSelect(target.suggestion)}
|
||||
placeholder='Type an artist name'
|
||||
icon={<FormSearch color='plain' />}
|
||||
dropHeight='large'
|
||||
suggestions={suggestions}
|
||||
/>
|
||||
<Box
|
||||
as='div'
|
||||
margin={{ vertical: 'none' }}
|
||||
width='500px'
|
||||
|
||||
>
|
||||
<TextInput
|
||||
value={inputValue}
|
||||
suggestions={suggestions}
|
||||
onChange={(e) => handleChange(e.target.value)}
|
||||
onSelect={(target) => handleSelect(target.suggestion)}
|
||||
icon={<FormSearch color='plain' />}
|
||||
dropHeight='large'
|
||||
placeholder='Type an artist name'
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user