44 lines
1.1 KiB
TypeScript
44 lines
1.1 KiB
TypeScript
import { Group, Text } from '@mantine/core';
|
|
import type { Theme } from 'types';
|
|
|
|
export function ThemeMiniCard({ miniTheme }: { miniTheme: Theme | undefined }) {
|
|
return (
|
|
<Group
|
|
gap={0}
|
|
align='center'
|
|
justify='center'
|
|
display={'grid'}
|
|
pos={'relative'}
|
|
w={'175px'}
|
|
h={'60px'}
|
|
style={{
|
|
backgroundImage:
|
|
miniTheme?.backgroundImage.toLocaleLowerCase() !== 'none'
|
|
? `linear-gradient(${miniTheme?.backgroundColor}33, ${miniTheme?.backgroundColor}33), url(../../api/backgroundImages/${miniTheme?.backgroundImage})`
|
|
: undefined,
|
|
backgroundSize:
|
|
miniTheme?.backgroundImage.toLocaleLowerCase() !== 'none' ? 'cover' : undefined,
|
|
backgroundColor:
|
|
miniTheme?.backgroundImage.toLocaleLowerCase() === 'none'
|
|
? miniTheme?.backgroundColor
|
|
: undefined,
|
|
backgroundPosition: 'center',
|
|
border: `solid ${miniTheme?.borderColor}`,
|
|
borderRadius: '8px',
|
|
}}
|
|
>
|
|
<Text
|
|
bg={miniTheme?.backgroundColor}
|
|
c={miniTheme?.primaryColor}
|
|
size='md'
|
|
style={{
|
|
padding: '.25rem',
|
|
borderRadius: '8px',
|
|
}}
|
|
>
|
|
{miniTheme?.name}
|
|
</Text>
|
|
</Group>
|
|
);
|
|
}
|