xlibs-components/dist/components/aceternity/focus-cards.js

Modern React component library with Aceternity, MagicUI, and ShadCN components for building beautiful web applications

"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useState } from "react";
import { cn } from '../../lib/utils.js';
export const Card = React.memo(({ card, index, hovered, setHovered, }) => (_jsxs("div", { onMouseEnter: () => setHovered(index), onMouseLeave: () => setHovered(null), className: cn("rounded-lg relative bg-gray-100 dark:bg-neutral-900 overflow-hidden h-60 md:h-96 w-full transition-all duration-300 ease-out", hovered !== null && hovered !== index && "blur-sm scale-[0.98]"), children: [_jsx("img", { src: card.src, alt: card.title, className: "object-cover absolute inset-0" }), _jsx("div", { className: cn("absolute inset-0 bg-black/50 flex items-end py-8 px-4 transition-opacity duration-300", hovered === index ? "opacity-100" : "opacity-0"), children: _jsx("div", { className: "text-xl md:text-2xl font-medium bg-clip-text text-transparent bg-gradient-to-b from-neutral-50 to-neutral-200", children: card.title }) })] })));
Card.displayName = "Card";
export function FocusCards({ cards }) {
    const [hovered, setHovered] = useState(null);
    return (_jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-10 max-w-5xl mx-auto md:px-8 w-full", children: cards.map((card, index) => (_jsx(Card, { card: card, index: index, hovered: hovered, setHovered: setHovered }, card.title))) }));
}