50 lines
1.5 KiB
JavaScript
50 lines
1.5 KiB
JavaScript
import React from "react";
|
|
import Masonry from "react-masonry-css";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
import { faHeart } from "@fortawesome/free-solid-svg-icons";
|
|
import { useNavigate } from "react-router-dom";
|
|
const Gallery = ({ cats, loading, onLoadMore, onAddFavorite }) => {
|
|
const navigate = useNavigate();
|
|
const breakpointColumnsObj ={
|
|
default:6,
|
|
1100:5,
|
|
768:4,
|
|
500:3,
|
|
};
|
|
const handleCatClick =(cat)=>{
|
|
console.log('id',cat)
|
|
if (cat.breeds && cat.breeds[0] && cat.breeds[0].id) {
|
|
navigate(`/breed/${cat.breeds[0].id}`);
|
|
} else {
|
|
console.error("No breed ID found for this cat.");
|
|
}
|
|
}
|
|
return (
|
|
<div>
|
|
<Masonry className="masonry-grid" breakpointCols={breakpointColumnsObj} columnClassName="masonry-grid-column">
|
|
{cats.map((cat,index) => (
|
|
|
|
<div key={`${cat.id}-${index}`} className="cat-item" loading="lazy" onClick={() => handleCatClick(cat)}>
|
|
<img src={cat.url} alt={cat.breeds?.[0]?.name || "A cute cat"} />
|
|
<button className="like-button" onClick={(e) => {
|
|
e.stopPropagation();
|
|
onAddFavorite(cat);
|
|
}}>
|
|
<FontAwesomeIcon icon={faHeart}/>
|
|
</button>
|
|
</div>
|
|
))}
|
|
|
|
</Masonry>
|
|
|
|
|
|
{loading && <p>Loading more cats...</p>}
|
|
<button onClick={onLoadMore} disabled={loading}>
|
|
Load More
|
|
</button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Gallery;
|