From 721e4bda8be95f7fe94fcbbb643dc6940289fbdd Mon Sep 17 00:00:00 2001
From: fmtabbara <fmtabbara@hotmail.co.uk>
Date: Tue, 27 Jul 2021 16:40:15 +0100
Subject: [PATCH] create reuseable components

---
 wallet-web/components/Layout.tsx  | 20 ++++++++++++++++++++
 wallet-web/components/NymCard.tsx | 30 ++++++++++++++++++++++++++++++
 2 files changed, 50 insertions(+)
 create mode 100644 wallet-web/components/Layout.tsx
 create mode 100644 wallet-web/components/NymCard.tsx

diff --git a/wallet-web/components/Layout.tsx b/wallet-web/components/Layout.tsx
new file mode 100644
index 0000000000..4200d6ab88
--- /dev/null
+++ b/wallet-web/components/Layout.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import { Grid, Theme, useTheme, useMediaQuery } from '@material-ui/core'
+
+export const Layout = ({ children }: { children: React.ReactElement }) => {
+  const theme: Theme = useTheme()
+
+  return (
+    <div
+      style={{
+        padding: theme.spacing(5),
+      }}
+    >
+      <Grid container justify="center">
+        <Grid item xs={12} md={6} lg={4}>
+          {children}
+        </Grid>
+      </Grid>
+    </div>
+  )
+}
diff --git a/wallet-web/components/NymCard.tsx b/wallet-web/components/NymCard.tsx
new file mode 100644
index 0000000000..a47d114832
--- /dev/null
+++ b/wallet-web/components/NymCard.tsx
@@ -0,0 +1,30 @@
+import React from 'react'
+import { Card, CardContent, CardHeader, useTheme } from '@material-ui/core'
+
+export const NymCard = ({
+  title,
+  subheader,
+  children,
+}: {
+  title: string
+  subheader?: string
+  children: React.ReactElement
+}) => {
+  const theme = useTheme()
+  return (
+    <Card>
+      <CardHeader
+        title={title}
+        subheader={subheader}
+        titleTypographyProps={{ variant: 'h5' }}
+        style={{
+          padding: theme.spacing(2.5),
+          borderBottom: `1px solid ${theme.palette.grey[200]}`,
+        }}
+      />
+      <CardContent style={{ background: theme.palette.grey[50] }}>
+        {children}
+      </CardContent>
+    </Card>
+  )
+}