xlibs-components/dist/components/magicui/terminal.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 { cn } from '../../lib/utils.js';
import { motion } from "motion/react";
import { useEffect, useRef, useState } from "react";
export const AnimatedSpan = ({ children, delay = 0, className, ...props }) => (_jsx(motion.div, { initial: { opacity: 0, y: -5 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.3, delay: delay / 1000 }, className: cn("grid text-sm font-normal tracking-tight", className), ...props, children: children }));
export const TypingAnimation = ({ children, className, duration = 60, delay = 0, as: Component = "span", ...props }) => {
    if (typeof children !== "string") {
        throw new Error("TypingAnimation: children must be a string. Received:");
    }
    const MotionComponent = motion.create(Component, {
        forwardMotionProps: true,
    });
    const [displayedText, setDisplayedText] = useState("");
    const [started, setStarted] = useState(false);
    const elementRef = useRef(null);
    useEffect(() => {
        const startTimeout = setTimeout(() => {
            setStarted(true);
        }, delay);
        return () => clearTimeout(startTimeout);
    }, [delay]);
    useEffect(() => {
        if (!started)
            return;
        let i = 0;
        const typingEffect = setInterval(() => {
            if (i < children.length) {
                setDisplayedText(children.substring(0, i + 1));
                i++;
            }
            else {
                clearInterval(typingEffect);
            }
        }, duration);
        return () => {
            clearInterval(typingEffect);
        };
    }, [children, duration, started]);
    return (_jsx(MotionComponent, { ref: elementRef, className: cn("text-sm font-normal tracking-tight", className), ...props, children: displayedText }));
};
export const Terminal = ({ children, className }) => {
    return (_jsxs("div", { className: cn("z-0 h-full max-h-[400px] w-full max-w-lg rounded-xl border border-border bg-background", className), children: [_jsx("div", { className: "flex flex-col gap-y-2 border-b border-border p-4", children: _jsxs("div", { className: "flex flex-row gap-x-2", children: [_jsx("div", { className: "h-2 w-2 rounded-full bg-red-500" }), _jsx("div", { className: "h-2 w-2 rounded-full bg-yellow-500" }), _jsx("div", { className: "h-2 w-2 rounded-full bg-green-500" })] }) }), _jsx("pre", { className: "p-4", children: _jsx("code", { className: "grid gap-y-1 overflow-auto", children: children }) })] }));
};