45 lines
970 B
TypeScript
45 lines
970 B
TypeScript
import { Group, Text } from '@mantine/core';
|
|
import type { Theme } from 'types';
|
|
function ThemeMiniCard({
|
|
allThemes,
|
|
item,
|
|
}: {
|
|
allThemes: Theme[];
|
|
item: number;
|
|
}) {
|
|
const theme = allThemes.find((theme: Theme) => theme.id === item);
|
|
|
|
return (
|
|
<Group
|
|
gap={0}
|
|
align='center'
|
|
justify='center'
|
|
display={'grid'}
|
|
pos={'relative'}
|
|
w={'175px'}
|
|
h={'60px'}
|
|
style={{
|
|
background: `linear-gradient(${theme?.backgroundColor}33, ${theme?.backgroundColor}33), no-repeat center url(/backgrounds/${theme?.backgroundImage})`,
|
|
backgroundSize: 'cover',
|
|
backgroundColor: theme?.backgroundColor,
|
|
border: `solid ${theme?.borderColor}`,
|
|
borderRadius: '8px',
|
|
}}
|
|
>
|
|
<Text
|
|
bg={theme?.backgroundColor}
|
|
c={theme?.primaryColor}
|
|
size='md'
|
|
style={{
|
|
padding: 4,
|
|
borderRadius: '8px',
|
|
}}
|
|
>
|
|
{allThemes.find((theme: Theme) => theme.id === item)?.name}
|
|
</Text>
|
|
</Group>
|
|
);
|
|
}
|
|
|
|
export default ThemeMiniCard;
|