Function SearchGridView

src/pages/SearchPage/SearchGridView.tsx:20–197

({
    books, hoveredId, setHoveredId, downloadingIds, favoriteIds, downloadedIds,
    getCoverUrl, handleCoverError, onBookClick, onDownload, onToggleFavorite,
}: SearchGridViewProps)

}

export default function SearchGridView({
    books, hoveredId, setHoveredId, downloadingIds, favoriteIds, downloadedIds,
    getCoverUrl, handleCoverError, onBookClick, onDownload, onToggleFavorite,
}: SearchGridViewProps) {
    return (
        <div style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fill, minmax(140px, 1fr))",
            gap: "14px",
            marginBottom: "24px",
        }}>
            {books.map((book, i) => {
                const isHovered = hoveredId === i;
                const isDownloading = downloadingIds.has(book.id);
                const coverUrl = getCoverUrl(String(book.id), book.cover);
                return (
                    <div
                        onClick={() => onBookClick(book)}
                        key={i}
                        className="card"
                        style={{
                            padding: 0,
                            overflow: "hidden",
                            cursor: "pointer",
                            transition: "all var(--transition-normal)",
                            transform: isHovered ? "translateY(-6px)" : "none",
                            boxShadow: isHovered ? "var(--shadow-lg), 0 0 24px var(--accent-glow)" : "none",
                            borderColor: isHovered ? "var(--accent)" : "var(--border)",
                        }}
                        onMouseEnter={() => setHoveredId(i)}
                        onMouseLeave={() => setHoveredId(null)}
                    >
                        {/* Cover */}
                        <div style={{
                            position: "relative",
                            width: "100%",
                            aspectRatio: "3/3.6",
                            background: "var(--bg-tertiary)",
                            overflow: "hidden",
                        }}>
                            {coverUrl ? (
                                <img
                                    src={coverUrl}
                                    alt={book.title}
                                    loading="lazy"
                                    style={{
                                        width: "100%",
                                        height: "100%",
                                        objectFit: "cover",
                                        transition: "transform var(--transition-slow)",
                                        transform: isHovered ? "scale(1.06)" : "scale(1)",
                                    }}
                                    onError={() => handleCoverError(String(book.id))}
                                />
                            ) : (
                                <div style={{
                                    width: "100%", height: "100%",
                                    display: "flex", alignItems: "center", justifyContent: "center",