Material UI

package.json

@@ -27,6 +27,8 @@
     "-----------------------------------------------------------------------": ""
   },
   "dependencies": {
+    "@material-ui/core": "4.11.0",
+    "@material-ui/icons": "4.9.1",
     "axios": "0.21.0",
     "clsx": "1.1.1",
     "next": "10.0.3",

src/components/pages/about-page/AboutPage.tsx

@@ -1,19 +1,23 @@
 import React from 'react';
-import Link from 'next/link';
+import Link from '../../shared/Link';
 import { Routes } from '../../../constants/Routes';
+import Container from '@material-ui/core/Container';
+import Typography from '@material-ui/core/Typography';
+import Box from '@material-ui/core/Box';
+import { ProTip } from '../../ui/pro-tip/ProTip';
 
 interface IProps {}
 
 export const AboutPage: React.FC<IProps> = (props) => {
   return (
-    <div>
-      <h1>About</h1>
-      <p>This is the about page</p>
-      <p>
-        <Link href={Routes.Index}>
-          <a>Go home</a>
-        </Link>
-      </p>
-    </div>
+    <Container maxWidth="sm">
+      <Box my={4}>
+        <Typography variant="h4" component="h1" gutterBottom>
+          This the about page.
+        </Typography>
+        <Link href={Routes.Index}>Go to the main page</Link>
+        <ProTip />
+      </Box>
+    </Container>
   );
 };

src/components/pages/dashboard-page/DashboardPage.styles.ts

@@ -0,0 +1,15 @@
+import { makeStyles, createStyles } from '@material-ui/core/styles';
+
+export const useDashboardPageStyles = makeStyles((theme) =>
+  createStyles({
+    paper: {
+      padding: theme.spacing(2),
+      display: 'flex',
+      overflow: 'auto',
+      flexDirection: 'column',
+    },
+    fixedHeight: {
+      height: 240,
+    },
+  })
+);

src/components/pages/dashboard-page/DashboardPage.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import clsx from 'clsx';
+import { Grid } from '@material-ui/core';
+import Paper from '@material-ui/core/Paper';
+import { Deposits } from './components/Deposits';
+import { Orders } from './components/Orders';
+import { useDashboardPageStyles } from './DashboardPage.styles';
+
+interface IProps {}
+
+export const DashboardPage: React.FC<IProps> = (props) => {
+  const classes = useDashboardPageStyles();
+  const fixedHeightPaper = clsx(classes.paper, classes.fixedHeight);
+
+  return (
+    <Grid container spacing={3}>
+      <Grid item xs={12} md={8} lg={9}>
+        <Paper className={fixedHeightPaper}>asdf</Paper>
+      </Grid>
+      <Grid item xs={12} md={4} lg={3}>
+        <Paper className={fixedHeightPaper}>
+          <Deposits />
+        </Paper>
+      </Grid>
+      <Grid item xs={12}>
+        <Paper className={classes.paper}>
+          <Orders />
+        </Paper>
+      </Grid>
+    </Grid>
+  );
+};

src/components/pages/dashboard-page/components/Deposits.styles.ts

@@ -0,0 +1,9 @@
+import { makeStyles, createStyles } from '@material-ui/core/styles';
+
+export const useDepositsStyles = makeStyles((theme) =>
+  createStyles({
+    depositContext: {
+      flex: 1,
+    },
+  })
+);

src/components/pages/dashboard-page/components/Deposits.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import Link from '@material-ui/core/Link';
+import Typography from '@material-ui/core/Typography';
+import { Title } from './Title';
+import { useDepositsStyles } from './Deposits.styles';
+
+interface IProps {}
+
+export const Deposits: React.FC<IProps> = (props) => {
+  const classes = useDepositsStyles();
+
+  return (
+    <>
+      <Title>Recent Deposits</Title>
+      <Typography component="p" variant="h4">
+        $3,024.00
+      </Typography>
+      <Typography color="textSecondary" className={classes.depositContext}>
+        on 15 March, 2019
+      </Typography>
+      <div>
+        <Link color="primary" href="#" onClick={(event: React.MouseEvent<HTMLAnchorElement>) => event.preventDefault()}>
+          View balance
+        </Link>
+      </div>
+    </>
+  );
+};

src/components/pages/dashboard-page/components/Orders.constants.ts

@@ -0,0 +1,42 @@
+export const tableRows = [
+  {
+    id: 0,
+    date: '16 Mar, 2019',
+    name: 'Elvis Presley',
+    shipTo: 'Tupelo, MS',
+    paymentMethod: 'VISA ⠀•••• 3719',
+    amount: 312.44,
+  },
+  {
+    id: 1,
+    date: '16 Mar, 2019',
+    name: 'Paul McCartney',
+    shipTo: 'London, UK',
+    paymentMethod: 'VISA ⠀•••• 2574',
+    amount: 866.99,
+  },
+  {
+    id: 2,
+    date: '16 Mar, 2019',
+    name: 'Tom Scholz',
+    shipTo: 'Boston, MA',
+    paymentMethod: 'MC ⠀•••• 1253',
+    amount: 100.81,
+  },
+  {
+    id: 3,
+    date: '16 Mar, 2019',
+    name: 'Michael Jackson',
+    shipTo: 'Gary, IN',
+    paymentMethod: 'AMEX ⠀•••• 2000',
+    amount: 654.39,
+  },
+  {
+    id: 4,
+    date: '15 Mar, 2019',
+    name: 'Bruce Springsteen',
+    shipTo: 'Long Branch, NJ',
+    paymentMethod: 'VISA ⠀•••• 5919',
+    amount: 212.79,
+  },
+];

src/components/pages/dashboard-page/components/Orders.styles.ts

@@ -0,0 +1,9 @@
+import { makeStyles, createStyles } from '@material-ui/core/styles';
+
+export const useOrdersStyles = makeStyles((theme) =>
+  createStyles({
+    seeMore: {
+      marginTop: theme.spacing(3),
+    },
+  })
+);

src/components/pages/dashboard-page/components/Orders.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import Link from '@material-ui/core/Link';
+import Table from '@material-ui/core/Table';
+import TableBody from '@material-ui/core/TableBody';
+import TableCell from '@material-ui/core/TableCell';
+import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
+import { Title } from './Title';
+import { useOrdersStyles } from './Orders.styles';
+import { tableRows } from './Orders.constants';
+
+interface IProps {}
+
+export const Orders: React.FC<IProps> = (props) => {
+  const classes = useOrdersStyles();
+
+  return (
+    <>
+      <Title>Recent Orders</Title>
+      <Table size="small">
+        <TableHead>
+          <TableRow>
+            <TableCell>Date</TableCell>
+            <TableCell>Name</TableCell>
+            <TableCell>Ship To</TableCell>
+            <TableCell>Payment Method</TableCell>
+            <TableCell align="right">Sale Amount</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {tableRows.map((row) => (
+            <TableRow key={row.id}>
+              <TableCell>{row.date}</TableCell>
+              <TableCell>{row.name}</TableCell>
+              <TableCell>{row.shipTo}</TableCell>
+              <TableCell>{row.paymentMethod}</TableCell>
+              <TableCell align="right">{row.amount}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+      <div className={classes.seeMore}>
+        <Link color="primary" href="#" onClick={(event: React.MouseEvent<HTMLAnchorElement>) => event.preventDefault()}>
+          See more orders
+        </Link>
+      </div>
+    </>
+  );
+};

src/components/pages/dashboard-page/components/Title.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import Typography from '@material-ui/core/Typography';
+
+interface IProps {}
+
+export const Title: React.FC<IProps> = (props) => {
+  return (
+    <Typography component="h2" variant="h6" color="primary" gutterBottom>
+      {props.children}
+    </Typography>
+  );
+};

src/components/pages/index-page/IndexPage.tsx

@@ -1,23 +1,25 @@
 import React from 'react';
-import Link from 'next/link';
+import Link from '../../shared/Link';
 import { Routes } from '../../../constants/Routes';
+import Container from '@material-ui/core/Container';
+import Typography from '@material-ui/core/Typography';
+import Box from '@material-ui/core/Box';
+import { ProTip } from '../../ui/pro-tip/ProTip';
 
 interface IProps {}
 
 export const IndexPage: React.FC<IProps> = (props) => {
   return (
-    <div>
-      <h1>
-        Hello Next.js{' '}
-        <span role="img" aria-label="hand waving">
-          👋
-        </span>
-      </h1>
-      <p>
-        <Link href={Routes.About}>
-          <a>About</a>
+    <Container maxWidth="sm">
+      <Box my={4}>
+        <Typography variant="h4" component="h1" gutterBottom>
+          Welcome to the home page.x
+        </Typography>
+        <Link href={Routes.About} color="secondary">
+          Go to the about page
         </Link>
-      </p>
-    </div>
+        <ProTip />
+      </Box>
+    </Container>
   );
 };

src/components/shared/Link.tsx

@@ -0,0 +1,53 @@
+import React, { forwardRef } from 'react';
+import clsx from 'clsx';
+import { useRouter } from 'next/router';
+import NextLink, { LinkProps as NextLinkProps } from 'next/link';
+import MuiLink, { LinkProps as MuiLinkProps } from '@material-ui/core/Link';
+
+type NextComposedProps = Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> & NextLinkProps;
+
+const NextComposed = forwardRef<HTMLAnchorElement, NextComposedProps>((props, ref) => {
+  const { as, href, replace, scroll, passHref, shallow, prefetch, ...other } = props;
+
+  return (
+    <NextLink
+      href={href}
+      prefetch={prefetch}
+      as={as}
+      replace={replace}
+      scroll={scroll}
+      shallow={shallow}
+      passHref={passHref}
+    >
+      <a ref={ref} {...other} />
+    </NextLink>
+  );
+});
+
+interface LinkPropsBase {
+  activeClassName?: string;
+  innerRef?: React.Ref<HTMLAnchorElement>;
+  naked?: boolean;
+}
+
+export type LinkProps = LinkPropsBase & NextComposedProps & Omit<MuiLinkProps, 'href'>;
+
+// A styled version of the Next.js Link component:
+// https://nextjs.org/docs/#with-link
+const Link: React.FC<LinkProps> = (props) => {
+  const { href, activeClassName = 'active', className: classNameProps, innerRef, naked, ...other } = props;
+
+  const router = useRouter();
+  const pathname = typeof href === 'string' ? href : href.pathname;
+  const className = clsx(classNameProps, {
+    [activeClassName]: router.pathname === pathname && activeClassName,
+  });
+
+  if (naked) {
+    return <NextComposed className={className} ref={innerRef} href={href} {...other} />;
+  }
+
+  return <MuiLink component={NextComposed} className={className} ref={innerRef} href={href as string} {...other} />;
+};
+
+export default React.forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => <Link {...props} innerRef={ref} />);

src/components/shared/copyright/Copyright.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import Typography from '@material-ui/core/Typography';
+import MuiLink from '@material-ui/core/Link';
+
+interface IProps {}
+
+export const Copyright: React.FC<IProps> = (props) => {
+  return (
+    <Typography variant="body2" color="textSecondary" align="center">
+      {'Copyright © '}
+      <MuiLink color="inherit" href="https://material-ui.com/">
+        Your Website
+      </MuiLink>{' '}
+      {new Date().getFullYear()}
+      {'.'}
+    </Typography>
+  );
+};