"use client"; import { AnimatePresence, motion } from "framer-motion"; import type React from "react"; import { useState } from "react"; // --- TypeScript Interfaces --- interface MasonryItem { id: number; imageUrl: string; title: string; } interface GridItemProps { item: MasonryItem; } interface MasonryGridProps { items: MasonryItem[]; } // --- SVG Icons for the hover effect --- const HeartIcon = () => ( ); // --- Simplified mock data (no author info) --- const initialItems = [ { id: 1, imageUrl: "https://images.unsplash.com/photo-1501854140801-50d01698950b?q=80&w=800&auto=format&fit=crop", title: "Misty Mountain Valley", }, { id: 2, imageUrl: "https://images.unsplash.com/photo-1470770841072-f978cf4d019e?q=80&w=800&auto=format&fit=crop", title: "Lakeside Cabin", }, { id: 3, imageUrl: "https://images.unsplash.com/photo-1447752875215-b2761acb3c5d?q=80&w=800&auto=format&fit=crop", title: "Sunlight Through Forest", }, { id: 4, imageUrl: "https://images.unsplash.com/photo-1469474968028-56623f02e42e?q=80&w=800&auto=format&fit=crop", title: "Dramatic Mountain Peak", }, { id: 5, imageUrl: "https://images.unsplash.com/photo-1506744038136-46273834b3fb?q=80&w=800&auto=format&fit=crop", title: "Golden Hour on River", }, { id: 6, imageUrl: "https://images.unsplash.com/photo-1472214103451-9374bd1c798e?q=80&w=800&auto=format&fit=crop", title: "Green Rolling Hills", }, { id: 7, imageUrl: "https://images.unsplash.com/photo-1433086966358-54859d0ed716?q=80&w=800&auto=format&fit=crop", title: "Waterfall Oasis", }, { id: 8, imageUrl: "https://images.unsplash.com/photo-1439405326854-014607f694d7?q=80&w=800&auto=format&fit=crop", title: "Crashing Ocean Waves", }, { id: 9, imageUrl: "https://images.unsplash.com/photo-1475924156734-496f6cac6ec1?q=80&w=800&auto=format&fit=crop", title: "Beach Sunset", }, { id: 10, imageUrl: "https://images.unsplash.com/photo-1418065460487-3e41a6c84dc5?q=80&w=800&auto=format&fit=crop", title: "Path in the Woods", }, { id: 11, imageUrl: "https://images.unsplash.com/photo-1505144808419-1957a94ca61e?q=80&w=800&auto=format&fit=crop", title: "Colorful Hot Air Balloons", }, { id: 12, imageUrl: "https://images.unsplash.com/photo-1519681393784-d120267933ba?q=80&w=800&auto=format&fit=crop", title: "Starry Night Sky", }, ]; // --- GridItem Component --- const GridItem: React.FC = ({ item }) => { const [isHovered, setIsHovered] = useState(false); return ( setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} whileHover={{ y: -5 }} transition={{ type: "spring", stiffness: 300 }} >

{ const target = e.target as HTMLImageElement; target.onerror = null; target.src = `https://placehold.co/400x300/fecaca/333333?text=Image+Not+Found`; }} /> {isHovered && (

{item.title}

)} ); }; // --- MasonryGrid Component --- const MasonryGrid: React.FC = ({ items }) => { return (

{items.map((item) => ( ))}

); }; // --- Main App Component --- export default function Masonary() { return (

); }

Masonary Grid