create reuseable components

2021-07-27 16:40:15 +01:00
parent 2673f83116
commit 721e4bda8b
2 changed files with 50 additions and 0 deletions
@@ -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>
+  )
+}
@@ -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>
+  )
+}