Add Other component and refactor markup

2020-07-24 00:12:31 +02:00
parent 4bb0a45bce
commit a5ed4f84f6
5 changed files with 98 additions and 70 deletions
@@ -0,0 +1,25 @@
+import React from 'react';
+import { Box, Heading, Image } from 'grommet';
+
+export const Other = ({ image, name }: { image: string; name: string }) => {
+	return (
+		<Box round='xxsmall' overflow='hidden' align='center' pad='small'>
+			<Heading
+				level='4'
+				margin={{ bottom: 'small', top: 'small', left: 'small' }}
+			>
+				{name}
+			</Heading>
+			<Box
+				height='small'
+				width='small'
+				round='full'
+				background={{
+					repeat: 'no-repeat',
+					size: 'cover',
+					image: `url(${image})`,
+				}}
+			/>
+		</Box>
+	);
+};