New settings pages

src/pages/settings/components/Theming/ThemeMiniCard.tsx

@@ -0,0 +1,37 @@
+import { Group, Text } from '@mantine/core';
+function ThemeMiniCard({ allThemes, item }: any) {
+	const theme = allThemes.find((theme: any) => 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: any) => theme.id === item)?.name}
+			</Text>
+		</Group>
+	);
+}
+
+export default ThemeMiniCard;