import { useState, useEffect, useRef } from "react"; /** * Terminal — composant 100% autonome, sans dépendance externe. * Pas de clsx, pas de tailwind-merge, pas de framer-motion / motion. * Juste React + Tailwind (classes simples, pas de merge nécessaire). * * Props: * - commands: string[] — liste des commandes à "taper" * - outputs: { [index: number]: string[] } — lignes de sortie après chaque commande * - typingSpeed: number — vitesse de frappe en ms par caractère * - delayBetweenCommands: number — pause en ms entre chaque commande */ export function Terminal({ commands = [], outputs = {}, typingSpeed = 45, delayBetweenCommands = 1000, }) { const [lines, setLines] = useState([]); // lignes déjà affichées (figées) const [currentTyped, setCurrentTyped] = useState(""); // texte en cours de frappe const [commandIndex, setCommandIndex] = useState(0); const [phase, setPhase] = useState("typing"); // "typing" | "output" | "pause" | "done" const containerRef = useRef(null); useEffect(() => { if (commandIndex >= commands.length) { setPhase("done"); return; } const currentCommand = commands[commandIndex]; if (phase === "typing") { if (currentTyped.length < currentCommand.length) { const timeout = setTimeout(() => { setCurrentTyped(currentCommand.slice(0, currentTyped.length + 1)); }, typingSpeed); return () => clearTimeout(timeout); } else { // Commande finie de taper -> on la fige comme ligne, puis on passe aux outputs const timeout = setTimeout(() => { setLines((prev) => [ ...prev, { type: "command", text: currentCommand }, ]); setCurrentTyped(""); setPhase("output"); }, 300); return () => clearTimeout(timeout); } } if (phase === "output") { const outLines = outputs[commandIndex] || []; if (outLines.length > 0) { // Affiche les lignes de sortie une par une let i = 0; const interval = setInterval(() => { setLines((prev) => [...prev, { type: "output", text: outLines[i] }]); i++; if (i >= outLines.length) { clearInterval(interval); setPhase("pause"); } }, 150); return () => clearInterval(interval); } else { setPhase("pause"); } } if (phase === "pause") { const timeout = setTimeout(() => { setCommandIndex((prev) => prev + 1); setPhase("typing"); }, delayBetweenCommands); return () => clearTimeout(timeout); } }, [phase, currentTyped, commandIndex, commands, outputs, typingSpeed, delayBetweenCommands]); // Auto-scroll vers le bas à chaque nouvelle ligne useEffect(() => { if (containerRef.current) { containerRef.current.scrollTop = containerRef.current.scrollHeight; } }, [lines, currentTyped]); const isTypingNow = phase === "typing" && commandIndex < commands.length; return (

{/* Barre de titre style macOS */}

Manus-Macbook — bash

{/* Corps du terminal */}

{lines.map((line, idx) => line.type === "command" ? (

Manus-Macbook:~${" "} {line.text}

) : (

{line.text}

) )} {isTypingNow && (

Manus-Macbook:~${" "} {currentTyped}

)} {phase === "done" && (

Manus-Macbook:~${" "}

)}

); } export function TerminalDemo() { return (

); } export default TerminalDemo;

Terminal macbook frappe

Commentaires0