Starting guac clients

src/pages/settings/components/GuacamoleClients/GuacamoleClientSettingsItem.tsx

@@ -0,0 +1,23 @@
+import { Card, Stack, Text } from '@mantine/core';
+import { FaLaptop } from 'react-icons/fa';
+import { cardClasses } from 'styles';
+import type { GuacamoleClient } from 'types';
+
+function GuacamoleClientSettingsItem({ client }: { client: GuacamoleClient }) {
+	return (
+		<Card
+			className={cardClasses.settingsItemHover}
+			classNames={cardClasses}
+			h={200}
+			w={'100%'}
+		>
+			<Stack align='center' gap={0}>
+				<FaLaptop fontSize={100} />
+				<Text fz={'1.5rem'}>{client.clientName}</Text>
+				<Text fz={'1.25rem'}>{client.clientIdentifier}</Text>
+			</Stack>
+		</Card>
+	);
+}
+
+export default GuacamoleClientSettingsItem;