Vitex Tecnologia
56 lines
1.2 KiB
TypeScript
56 lines
1.2 KiB
TypeScript
import * as React from "react";
|
|
import { motion } from "motion/react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
/**
|
|
* Container com estilo de terminal: fundo escuro, borda, fonte monospace.
|
|
*/
|
|
const Terminal = React.forwardRef<
|
|
HTMLDivElement,
|
|
React.HTMLAttributes<HTMLDivElement>
|
|
>(({ className, children, ...props }, ref) => (
|
|
<div
|
|
ref={ref}
|
|
className={cn(
|
|
"rounded-lg border border-border bg-zinc-900/95 font-mono text-sm shadow-xl",
|
|
"p-4 text-foreground",
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</div>
|
|
));
|
|
Terminal.displayName = "Terminal";
|
|
|
|
interface AnimatedStepProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
delay?: number;
|
|
className?: string;
|
|
children?: React.ReactNode;
|
|
}
|
|
|
|
/**
|
|
* Linha animada (fade-in + slide up) para uso dentro do Terminal.
|
|
* Usado para exibir passos em sequência.
|
|
*/
|
|
function AnimatedStep({
|
|
delay = 0,
|
|
className,
|
|
children,
|
|
...props
|
|
}: AnimatedStepProps) {
|
|
return (
|
|
<motion.span
|
|
initial={{ opacity: 0, y: 8 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.35, delay }}
|
|
className={cn("block", className)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</motion.span>
|
|
);
|
|
}
|
|
|
|
export { Terminal, AnimatedStep };
|