gistfile1.tsx

import React from "react"
import Grid from "@material-ui/core/Grid"
import Typography from "@material-ui/core/Typography"
import Link from "@material-ui/core/Link"

const things = [
  {
    name: "A Knight's Tale",
    type: "Movie",
  },
  {
    name: "NHL 2020",
    type: "Game",
    link: "https://www.ea.com/games/nhl/nhl-20",
  },
  {
    name: "Rocket League",
    type: "Game",
  },
  {
    name: "Bone Dry",
    type: "Song",
  },
  {
    name: "The Office",
    type: "TV Show",
  },
  {
    name: "Expo",
    type: "Other",
  },
  {
    name: "Espresso",
    type: "Other",
  },
  {
    name: "Thoughts Of Dog",
    type: "Twitter",
  },
  {
    name: "Nihilist Arbys",
    type: "Twitter",
  },
  {
    name: "Apex Legends",
    link: "http://google.com",
    type: "Game",
  },
  {
    name: "Heroes of the Storm",
    type: "Game",
  },
]

const App = () => (
  <Grid container direction="column" alignItems="center">
    <Grid item>
      <h1>things i like</h1>
      {things.map(thing => (
        <Link
          href={thing.link}
          style={{ textDecoration: "none", color: "inherit" }}
        >
          <Typography variant="h6">{thing.name}</Typography>
          <Typography variant="subtitle1">{thing.type}</Typography>
          <div style={{ height: 20 }} />
        </Link>
      ))}
    </Grid>
  </Grid>
)

export default App