xlibs-components

Version:
Modern React component library with Aceternity, MagicUI, and ShadCN components for building beautiful web applications
68 lines (67 loc) • 3.45 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useRef, useState } from "react";
import { AnimatePresence, motion } from "framer-motion";
import { cn } from '../../lib/utils.js';
export const GlowingStarsBackgroundCard = ({ className, children, }) => {
    const [mouseEnter, setMouseEnter] = useState(false);
    return (_jsxs("div", { onMouseEnter: () => {
            setMouseEnter(true);
        }, onMouseLeave: () => {
            setMouseEnter(false);
        }, className: cn("bg-[linear-gradient(110deg,#333_0.6%,#222)] p-4 max-w-md max-h-[20rem] h-full w-full rounded-xl border border-[#eaeaea] dark:border-neutral-600", className), children: [_jsx("div", { className: "flex justify-center items-center", children: _jsx(Illustration, { mouseEnter: mouseEnter }) }), _jsx("div", { className: "px-2 pb-6", children: children })] }));
};
export const GlowingStarsDescription = ({ className, children, }) => {
    return (_jsx("p", { className: cn("text-base text-white max-w-[16rem]", className), children: children }));
};
export const GlowingStarsTitle = ({ className, children, }) => {
    return (_jsx("h2", { className: cn("font-bold text-2xl text-[#eaeaea]", className), children: children }));
};
export const Illustration = ({ mouseEnter }) => {
    const stars = 108;
    const columns = 18;
    const [glowingStars, setGlowingStars] = useState([]);
    const highlightedStars = useRef([]);
    useEffect(() => {
        const interval = setInterval(() => {
            highlightedStars.current = Array.from({ length: 5 }, () => Math.floor(Math.random() * stars));
            setGlowingStars([...highlightedStars.current]);
        }, 3000);
        return () => clearInterval(interval);
    }, []);
    return (_jsx("div", { className: "h-48 p-1 w-full", style: {
            display: "grid",
            gridTemplateColumns: `repeat(${columns}, 1fr)`,
            gap: `1px`,
        }, children: [...Array(stars)].map((_, starIdx) => {
            const isGlowing = glowingStars.includes(starIdx);
            const delay = (starIdx % 10) * 0.1;
            const staticDelay = starIdx * 0.01;
            return (_jsxs("div", { className: "relative flex items-center justify-center", children: [_jsx(Star, { isGlowing: mouseEnter ? true : isGlowing, delay: mouseEnter ? staticDelay : delay }), mouseEnter && _jsx(Glow, { delay: staticDelay }), _jsx(AnimatePresence, { mode: "wait", children: isGlowing && _jsx(Glow, { delay: delay }) })] }, `matrix-col-${starIdx}}`));
        }) }));
};
const Star = ({ isGlowing, delay }) => {
    return (_jsx(motion.div, { initial: {
            scale: 1,
        }, animate: {
            scale: isGlowing ? [1, 1.2, 2.5, 2.2, 1.5] : 1,
            background: isGlowing ? "#fff" : "#666",
        }, transition: {
            duration: 2,
            ease: "easeInOut",
            delay: delay,
        }, className: cn("bg-[#666] h-[1px] w-[1px] rounded-full relative z-20") }, delay));
};
const Glow = ({ delay }) => {
    return (_jsx(motion.div, { initial: {
            opacity: 0,
        }, animate: {
            opacity: 1,
        }, transition: {
            duration: 2,
            ease: "easeInOut",
            delay: delay,
        }, exit: {
            opacity: 0,
        }, className: "absolute  left-1/2 -translate-x-1/2 z-10 h-[4px] w-[4px] rounded-full bg-blue-500 blur-[1px] shadow-2xl shadow-blue-400" }));
};