26 lines
574 B
TypeScript
26 lines
574 B
TypeScript
import React from 'react';
|
|
import { Box, Heading, Image } from 'grommet';
|
|
|
|
import placeholder from '../assets/placeholder-music.jpg';
|
|
|
|
export const Album = ({ image, name }: { image: string; name: string }) => {
|
|
// Load placeholder image if none provided
|
|
if (!image) {
|
|
image = placeholder;
|
|
}
|
|
|
|
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>
|
|
);
|
|
};
|