@fag-bundle/react-glass-components/dist/index.js

Draggable glassmorphic components for React Applications.

import React, { useState, useRef, useEffect } from 'react';

const GlassCard = ({ children, className = "", type = "light", varient = "fixed", }) => {
    const [position, setPosition] = useState({ x: 100, y: 100 });
    const [dragging, setDragging] = useState(false);
    const offset = useRef({ x: 0, y: 0 });
    const handleMouseDown = (e) => {
        if (varient !== "dragable")
            return;
        setDragging(true);
        offset.current = {
            x: e.clientX - position.x,
            y: e.clientY - position.y,
        };
    };
    useEffect(() => {
        if (varient !== "dragable")
            return;
        const handleMouseMove = (e) => {
            if (!dragging)
                return;
            setPosition({
                x: e.clientX - offset.current.x,
                y: e.clientY - offset.current.y,
            });
        };
        const handleMouseUp = () => setDragging(false);
        window.addEventListener("mousemove", handleMouseMove);
        window.addEventListener("mouseup", handleMouseUp);
        return () => {
            window.removeEventListener("mousemove", handleMouseMove);
            window.removeEventListener("mouseup", handleMouseUp);
        };
    }, [dragging, varient]);
    const baseStyle = `z-50 w-80 h-48 p-6 flex items-center justify-center rounded-xl backdrop-blur-md border transition-shadow shadow-md`;
    const light = `bg-white/30 border-white/40 text-black`;
    const dark = `bg-black/30 border-white/20 text-white`;
    const styles = varient === "dragable"
        ? {
            position: "absolute",
            transform: `translate(${position.x}px, ${position.y}px)`,
            cursor: dragging ? "grabbing" : "grab",
        }
        : { position: "fixed" };
    return (React.createElement("div", { onMouseDown: handleMouseDown, style: styles, className: `${baseStyle} ${type === "dark" ? dark : light} ${className}` }, children));
};

export { GlassCard };
//# sourceMappingURL=index.js.map