text: import React, { useState } from "react"
  import { Grid, Typography, makeStyles } from "@material-ui/core"
  import frame from "../../images/product-frame-grid.svg"
  import QuickView from "./QuickView"
  
  const useStyles = makeStyles(theme => ({
    frame: {
      backgroundImage: `url(${frame})`,
      backgroundPosition: "center",
      backgroundSize: "contain",
      backgroundRepeat: "no-repeat",
      height: "25rem",
      width: "25rem",
      display: "flex",
      justifyContent: "center",
      alignItems: "center",
    },
    product: {
      height: "20rem",
      width: "20rem",
    },
    title: {
      backgroundColor: theme.palette.primary.main,
      height: "5rem",
      width: "25rem",
      display: "flex",
      justifyContent: "center",
      alignItems: "center",
      marginTop: "-0.1rem",
    },
  }))
  
  const ProductFrameGrid = ({ product, variant }) => {
    const classes = useStyles()
    const [open, setOpen] = useState(false)
  
    const imgUrl = `http://localhost:1337${variant.images[0].url}`
    const productName = product.node.name.split(" ")[0]
  
    return (
      <Grid item>
        <Grid container direction="column" onClick={() => setOpen(true)}>
          <Grid item classes={{ root: classes.frame }}>
            <img
              src={imgUrl}
              alt={product.node.name}
              className={classes.product}
            />
          </Grid>
          <Grid item classes={{ root: classes.title }}>
            <Typography variant="h5">{productName}</Typography>
          </Grid>
        </Grid>
        <QuickView
          open={open}
          setOpen={setOpen}
          url={imgUrl}
          name={productName}
          price={variant.price}
          product={product}
        />
      </Grid>
    )
  }
  
  export default ProductFrameGrid
  