45 lines
1.5 KiB
JavaScript
45 lines
1.5 KiB
JavaScript
import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
import PropTypes from "prop-types";
|
|
import { useState, useEffect } from "react";
|
|
|
|
export default function Card({ title, link }) {
|
|
const [image, setImage] = useState("");
|
|
|
|
useEffect(() => {
|
|
const getImage = async () => {
|
|
const response = await fetch("https://api.miarma.net/v1/screenshot?url=" + link);
|
|
const blob = await response.blob();
|
|
const imageURL = URL.createObjectURL(blob);
|
|
setImage(imageURL);
|
|
}
|
|
getImage();
|
|
}, [link]);
|
|
|
|
return (
|
|
<div className={"col-md-6 col-lg-3"}>
|
|
<div className={"card"}>
|
|
<div className={"card-body text-center"}>
|
|
<img src={image} className={"card-img-top mb-2 border"}></img>
|
|
<h5 className={"card-title"}>{title}</h5>
|
|
<a
|
|
href={link}
|
|
className={"btn btn-primary"}
|
|
>
|
|
<FontAwesomeIcon icon={faArrowUpRightFromSquare} className={"me-2"} />
|
|
Ir
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
Card.propTypes = {
|
|
title: PropTypes.string.isRequired,
|
|
description: PropTypes.string.isRequired,
|
|
link: PropTypes.string.isRequired,
|
|
onHoverStart: PropTypes.func,
|
|
onHoverEnd: PropTypes.func,
|
|
} |