feat: Convert the Works page to FC #30

roottool · Jan 7, 2022 · 1cd67f4 · 1cd67f4
1 parent a556326
commit 1cd67f4
Showing 1 changed file with 40 additions and 51 deletions.
diff --git a/src/Pages/Works/index.tsx b/src/Pages/Works/index.tsx
@@ -1,16 +1,39 @@
-import Button from '@material-ui/core/Button'
-import Card from '@material-ui/core/Card'
-import CardActions from '@material-ui/core/CardActions'
-import CardContent from '@material-ui/core/CardContent'
-import Grid from '@material-ui/core/Grid'
-import Typography from '@material-ui/core/Typography'
-import { withStyles, WithStyles, createStyles } from '@material-ui/core/styles'
-import React, { Component } from 'react'
+import { Button, Card, CardActions, CardContent, Grid, Typography } from '@material-ui/core'
+import { createStyles, withStyles, type WithStyles } from '@material-ui/core/styles'
 import { Helmet } from 'react-helmet'
 
 import PageTitleWrapper from '../../Components/atoms/PageTitleWrapper'
 import contents from './WorksContents.json'
 
+const Works = ({ classes }: WithStyles<typeof styleSettings>) => (
+  <div>
+    <PageTitleWrapper>Works</PageTitleWrapper>
+    <Grid container className={classes.container}>
+      {contents.map((item, key) => (
+        <Grid key={key} item className={classes.cardGrid} md={4} sm={6} xs={12}>
+          <Card className={classes.card}>
+            <CardContent>
+              <Typography gutterBottom variant="h6">
+                {item.title}
+              </Typography>
+              <Typography variant="subtitle1">
+                {item.tools}
+                <br />
+                {item.text}
+              </Typography>
+              <CardActions>
+                <Button className={classes.sourceLink} color="primary" href={item.href}>
+                  ソースコード
+                </Button>
+              </CardActions>
+            </CardContent>
+          </Card>
+        </Grid>
+      ))}
+    </Grid>
+  </div>
+)
+
 const styleSettings = () =>
   createStyles({
     card: {
@@ -29,47 +52,13 @@ const styleSettings = () =>
     },
   })
 
-const sourceCodeLinkLabel = 'ソースコード'
-
-class Works extends Component<WithStyles<typeof styleSettings>> {
-  constructor(props: WithStyles<typeof styleSettings>) {
-    super(props)
-  }
-
-  public render() {
-    const { classes } = this.props
-    return (
-      <div>
-        <Helmet>
-          <title>Works - roottool&apos;s Portfolio Site</title>
-        </Helmet>
-        <PageTitleWrapper>Works</PageTitleWrapper>
-        <Grid container className={classes.container}>
-          {contents.map((item, key) => (
-            <Grid key={key} item className={classes.cardGrid} md={4} sm={6} xs={12}>
-              <Card className={classes.card}>
-                <CardContent>
-                  <Typography gutterBottom variant="h6">
-                    {item.title}
-                  </Typography>
-                  <Typography variant="subtitle1">
-                    {item.tools}
-                    <br />
-                    {item.text}
-                  </Typography>
-                  <CardActions>
-                    <Button className={classes.sourceLink} color="primary" href={item.href}>
-                      {sourceCodeLinkLabel}
-                    </Button>
-                  </CardActions>
-                </CardContent>
-              </Card>
-            </Grid>
-          ))}
-        </Grid>
-      </div>
-    )
-  }
-}
+const Container = ({ classes }: WithStyles<typeof styleSettings>) => (
+  <>
+    <Helmet>
+      <title>Works - roottool&apos;s Portfolio Site</title>
+    </Helmet>
+    <Works classes={classes} />
+  </>
+)
 
-export default withStyles(styleSettings)(Works)
+export default withStyles(styleSettings)(Container)