TriggerFrontend/src/pages/settings/components/ThemeCard.tsx

import { ActionIcon, Box, Button, Group, Stack, Text } from '@mantine/core';
import { FiCheck, FiEdit, FiTrash } from 'react-icons/fi';
import { actionIconClasses } from 'styles';

function ThemeCard({ handleOpen, handleDeleteTheme, theme, setValue, createTheme }: any) {
	return (
		<Group gap={0} align='center' justify='center' display={'grid'} pos={'relative'}>
			<Text
				style={{
					position: 'absolute',
					top: -10,
					left: 6,
					paddingRight: 4,
					paddingLeft: 4,
					backgroundColor: theme.borderColor,
					borderRadius: '4px',
					color: theme.primaryColor,
					zIndex: 3,
				}}
			>
				{theme.name}
			</Text>
			<Button
				w={'300px'}
				h={'125px'}
				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}`,
					color: theme.primaryColor,
				}}
				data-theme={theme.name}
				onClick={() => {
					setValue(theme.name);
				}}
			>
				<Group
					style={{ zIndex: 2 }}
					w={'100%'}
					gap={0}
					display={'flex'}
					align='center'
					justify='center'
				>
					<Stack align='center'>
						<Box
							style={{
								height: '10px',
								width: '100px',
								backgroundColor: theme.searchColor,
								borderRadius: '4px',
								borderBottom: `solid 1px ${theme.borderColor}`,
							}}
						/>
						<Group justify='space-between'>
							<Box
								style={{
									height: '8px',
									width: '100px',
									backgroundColor: theme.accentColor,
									borderRadius: '4px',
								}}
							/>
							<Box
								style={{
									height: '8px',
									width: '50px',
									backgroundColor: theme.primaryColor,
									borderRadius: '4px',
								}}
							/>
						</Group>
						<Group w={'100%'}>
							<Box
								style={{
									height: '5px',
									width: '40px',
									backgroundColor: theme.primaryColor,
									borderRadius: '4px',
								}}
							/>
						</Group>
						<Group w={'100%'}>
							<Box
								style={{
									height: '10px',
									width: '40px',
									borderRadius: '4px',
									backdropFilter: 'blur(10px) brightness(1.5)',
									fontSize: '6px',
									justifyContent: 'center',
									alignContent: 'center',
								}}
							>
								lorem ipsum
							</Box>
							<Box
								style={{
									height: '10px',
									width: '40px',
									borderRadius: '4px',
									backdropFilter: 'blur(10px) brightness(1.5)',
									fontSize: '6px',
									justifyContent: 'center',
									alignContent: 'center',
								}}
							>
								lorem ipsum
							</Box>
							<Box
								style={{
									height: '10px',
									width: '40px',
									borderRadius: '4px',
									backdropFilter: 'blur(10px) brightness(1.5)',
									fontSize: '6px',
									justifyContent: 'center',
									alignContent: 'center',
								}}
							>
								lorem ipsum
							</Box>
						</Group>
					</Stack>
				</Group>
			</Button>
			<Stack
				gap={0}
				style={{
					padding: '4px',
					paddingRight: '0px',
					position: 'absolute',
					right: 3,
					backgroundColor: '#ffffff66',
					borderTopLeftRadius: '10px',
					borderBottomLeftRadius: '10px',
				}}
				align='center'
				justify='center'
			>
				<ActionIcon
					style={{
						background: theme.randomEnabled
							? 'rgba(255,255,255,1)'
							: 'rgba(255,255,255,0.5)',
						border: `solid 1px ${theme.borderColor}`,
						borderRadius: '2%',
						margin: '2px',
						color: 'black',
					}}
					styles={{
						root: {
							height: '10px',
							width: '10px',
						},
						icon: {
							height: '10px',
							width: '10px',
							fontSize: '24px',
							margin: 0,
							padding: 0,
						},
					}}
					onClick={() => {
						createTheme({
							method: 'PATCH',
							endpoint: 'api/themes',
							body: { ...theme, randomEnabled: !theme.randomEnabled },
						});
					}}
				>
					<FiCheck />
				</ActionIcon>
				<ActionIcon
					className={actionIconClasses.editButton}
					classNames={actionIconClasses}
					onClick={() => handleOpen(theme)}
				>
					<FiEdit />
				</ActionIcon>
				<ActionIcon
					className={actionIconClasses.editButton}
					classNames={actionIconClasses}
					onClick={() => handleDeleteTheme(theme)}
				>
					<FiTrash color='red' />
				</ActionIcon>
			</Stack>
		</Group>
	);
}

export default ThemeCard;