Add CardLink component

3 files changed, 39 insertions, 2 deletions

diff --git a/client/js/app/src/app/components/card-link/card-link.jsx b/client/js/app/src/app/components/card-link/card-link.jsx
new file mode 100644
index 00000000000..a8f785e02d0
--- /dev/null
+++ b/client/js/app/src/app/components/card-link/card-link.jsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { Box } from '@mantine/core';
+
+export function CardLink({
+  sx,
+  withBorder = true,
+  borderStyle = 'solid',
+  height = '144px',
+  width = '377px',
+  ...props
+}) {
+  return (
+    <Box
+      sx={(theme) => ({
+        width,
+        height,
+        display: 'grid',
+        placeContent: 'center',
+        ...theme.fn.hover({
+          cursor: 'pointer',
+          background: theme.cr.getSubtleBackground(),
+          border: withBorder
+            ? `1px ${borderStyle} ${theme.cr.getUiElementBorderAndFocus()}`
+            : 0,
+        }),
+        border: withBorder
+          ? `1px ${borderStyle} ${theme.cr.getSubtleBorderAndSeparator()}`
+          : 0,
+        ...sx,
+      })}
+      {...props}
+    />
+  );
+}
diff --git a/client/js/app/src/app/components/index.js b/client/js/app/src/app/components/index.js
index 79f659fa7b6..6175070252c 100644
--- a/client/js/app/src/app/components/index.js
+++ b/client/js/app/src/app/components/index.js
@@ -5,3 +5,4 @@ export { Container } from 'app/components/containers/container';
 export { Content } from 'app/components/containers/content';
 export { Section } from 'app/components/containers/section';
 export { Link } from 'app/components/link/link';
+export { CardLink } from 'app/components/card-link/card-link';
diff --git a/client/js/app/src/app/pages/home/home.jsx b/client/js/app/src/app/pages/home/home.jsx
index 0c698a6ebc8..4f576fd222c 100644
--- a/client/js/app/src/app/pages/home/home.jsx
+++ b/client/js/app/src/app/pages/home/home.jsx
@@ -1,10 +1,12 @@
 import React from 'react';
-import { Container, Link } from 'app/components';
+import { Container, Link, CardLink } from 'app/components';
 
 export function Home() {
   return (
     <Container>
-      <Link to="/querybuilder">query builder</Link>
+      <CardLink component={Link} to="/querybuilder">
+        query builder
+      </CardLink>
     </Container>
   );
 }