spoti-search/src/components/Other.tsx

26 lines
533 B
TypeScript

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