48 lines
806 B
TypeScript
48 lines
806 B
TypeScript
import React from 'react';
|
|
import { Box, Text } from 'grommet';
|
|
|
|
import placeholder from '../assets/placeholder-music.jpg';
|
|
|
|
export const Other = ({
|
|
image,
|
|
name,
|
|
handleClick,
|
|
}: {
|
|
image: string;
|
|
name: string;
|
|
handleClick: (name: string) => void;
|
|
}) => {
|
|
// Load placeholder image if none provided
|
|
if (!image) {
|
|
image = placeholder;
|
|
}
|
|
|
|
return (
|
|
<Box
|
|
round='xxsmall'
|
|
pad='xsmall'
|
|
onClick={() => handleClick(name)}
|
|
width='130px'
|
|
>
|
|
<Box
|
|
height='120px'
|
|
width='120px'
|
|
round='full'
|
|
background={{
|
|
repeat: 'no-repeat',
|
|
size: 'cover',
|
|
image: `url(${image})`,
|
|
}}
|
|
/>
|
|
<Text
|
|
margin={{ bottom: 'small', top: 'small', left: 'small' }}
|
|
textAlign='center'
|
|
weight='bold'
|
|
wordBreak='break-word'
|
|
>
|
|
{name}
|
|
</Text>
|
|
</Box>
|
|
);
|
|
};
|