lightswind/dist/src/components/ui/code-hover-cards.js

A collection of beautifully crafted React Components, Blocks & Templates for Modern Developers. Create stunning web applications effortlessly by using our 160+ professional and animated react components.

"use strict";
"use client";
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const utils_1 = require("@/components/lib/utils");
const lucide_react_1 = require("lucide-react");
const Github = (props) => ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [(0, jsx_runtime_1.jsx)("path", { d: "M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" }), (0, jsx_runtime_1.jsx)("path", { d: "M9 18c-4.51 2-5-2-7-2" })] }));
const DEFAULT_CARDS = [
    { id: '1', icon: Github, title: 'GitHub', description: 'Code repository' },
    { id: '2', icon: lucide_react_1.Code, title: 'Code', description: 'Development tools' },
    { id: '3', icon: lucide_react_1.Dices, title: 'Games', description: 'Interactive projects' },
];
const DEFAULT_ICONS = [Github, lucide_react_1.Code, lucide_react_1.Dices, lucide_react_1.Terminal, lucide_react_1.Settings, lucide_react_1.Heart, lucide_react_1.Star, lucide_react_1.Zap, lucide_react_1.Trophy, lucide_react_1.Shield];
const CodeHoverCards = ({ cards = DEFAULT_CARDS, className, cardClassName, maskRadius = 300, characterCount = 2000, characterSet = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789', animationDuration = 0.5, borderRadius = 26, cardGap = '1rem', iconSize = 48, enableTouch = true, columns = 3, minHeight = 399, onCardClick, onCardHover, disabled = false, showBorder = true, theme = 'normal', }) => {
    const [mousePositions, setMousePositions] = (0, react_1.useState)({});
    const [randomTexts, setRandomTexts] = (0, react_1.useState)({});
    const cardRefs = (0, react_1.useRef)({});
    const generateRandomString = (length) => {
        return Array.from({ length }, () => characterSet[Math.floor(Math.random() * characterSet.length)]).join('');
    };
    const handleMouseMove = (e, cardId) => {
        if (disabled)
            return;
        const card = cardRefs.current[cardId];
        if (!card)
            return;
        const rect = card.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;
        setMousePositions(prev => ({ ...prev, [cardId]: { x, y } }));
        setRandomTexts(prev => ({ ...prev, [cardId]: generateRandomString(characterCount) }));
    };
    const handleTouchMove = (e, cardId) => {
        if (disabled || !enableTouch)
            return;
        const card = cardRefs.current[cardId];
        if (!card)
            return;
        const rect = card.getBoundingClientRect();
        const touch = e.touches[0];
        const x = touch.clientX - rect.left;
        const y = touch.clientY - rect.top;
        setMousePositions(prev => ({ ...prev, [cardId]: { x, y } }));
        setRandomTexts(prev => ({ ...prev, [cardId]: generateRandomString(characterCount) }));
    };
    const handleCardClick = (card) => {
        if (disabled)
            return;
        if (card.href)
            window.open(card.href, '_blank');
        onCardClick?.(card);
    };
    const handleCardHover = (card) => {
        if (disabled)
            return;
        onCardHover?.(card);
    };
    const getColumnClass = () => {
        const columnMap = {
            1: 'grid-cols-1',
            2: 'grid-cols-1 md:grid-cols-2',
            3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
            4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',
        };
        return columnMap[columns];
    };
    return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('w-full flex items-center justify-center px-0 py-4 bg-background text-foreground', className), children: (0, jsx_runtime_1.jsx)("div", { className: "container mx-auto", children: (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('grid', getColumnClass()), style: { gap: cardGap }, children: cards.map((card) => {
                    const IconComponent = card.icon;
                    const position = mousePositions[card.id] || { x: 0, y: 0 };
                    const randomText = randomTexts[card.id] || '';
                    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('group relative w-full', disabled && 'pointer-events-none opacity-50', cardClassName), children: [(0, jsx_runtime_1.jsxs)("div", { ref: (el) => { cardRefs.current[card.id] = el; }, className: (0, utils_1.cn)('relative w-full h-full flex items-center justify-center overflow-hidden cursor-pointer transition-all duration-200', 'hover:scale-105 active:scale-95', showBorder && 'border'), style: {
                                    borderRadius: borderRadius + 'px',
                                    minHeight: minHeight + 'px',
                                    aspectRatio: '1',
                                }, onMouseMove: (e) => handleMouseMove(e, card.id), onTouchMove: enableTouch ? (e) => handleTouchMove(e, card.id) : undefined, onClick: () => handleCardClick(card), onMouseEnter: () => handleCardHover(card), children: [(0, jsx_runtime_1.jsx)("div", { className: "relative z-10 text-foreground", children: (0, jsx_runtime_1.jsx)(IconComponent, { size: iconSize, className: "transition-transform duration-200 group-hover:scale-110" }) }), (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 pointer-events-none z-[5]" }), (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0  text-sm leading-tight opacity-0 group-hover:opacity-100 transition-opacity duration-500 overflow-hidden break-all text-foreground", style: {
                                            WebkitMaskImage: 'radial-gradient(' +
                                                maskRadius +
                                                'px circle at ' +
                                                position.x +
                                                'px ' +
                                                position.y +
                                                'px, #000 20%, rgba(0, 0, 0, 0.25), transparent)',
                                            maskImage: 'radial-gradient(' +
                                                maskRadius +
                                                'px circle at ' +
                                                position.x +
                                                'px ' +
                                                position.y +
                                                'px, #000 20%, rgba(0, 0, 0, 0.25), transparent)',
                                            transform: 'scale(1.025)',
                                            transitionDuration: animationDuration + 's',
                                        }, children: randomText })] }), (card.title || card.description) && ((0, jsx_runtime_1.jsxs)("div", { className: "mt-4 text-center", children: [card.title && ((0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-semibold text-foreground", children: card.title })), card.description && ((0, jsx_runtime_1.jsx)("p", { className: "text-sm text-muted-foreground", children: card.description }))] }))] }, card.id));
                }) }) }) }));
};
exports.default = CodeHoverCards;
//# sourceMappingURL=code-hover-cards.js.map