bravo68web-portfolio-nextjs/components/artCard.js

import {useState} from "react";
import ArtCardStyle from "./artCard.style";
import ArtModel from "./artModal";

function SkillCard({ name, description, image, type, url, onClick }) {
  const [open, setOpen] = useState(false);
  const handleClose = () => {
    setOpen(false);
  };
  const handleClickOpen = () => {
    setOpen(true);
  };
  return (
    <div>
      {image && (
        <div>
          <ArtCardStyle>
            <div className="card" onClick={handleClickOpen}>
              <div className="card-logo">
                <img src={image} height="140px" />
              </div>

              <div className="date">
                <b>
                  <a href={url}>{name}</a>
                </b>
              </div>
              <div className="content">{description}</div>
              <div className="type">#{type}</div>
            </div>
          </ArtCardStyle>
          <ArtModel open={open} onClose={handleClose}>
            <img src={image} alt="preview" />
          </ArtModel>
        </div>
      )}
    </div>
  );
}

export default SkillCard;