"use client";

import { useEffect, useState } from "react";

const TEXT = "// ship something worth showing.";

export function TypeOn() {
  const [shown, setShown] = useState("");
  const [done, setDone] = useState(false);

  useEffect(() => {
    let i = 0;
    const id = setInterval(() => {
      if (i > TEXT.length) {
        clearInterval(id);
        setDone(true);
        return;
      }
      setShown(TEXT.slice(0, i));
      i++;
    }, 55);
    return () => clearInterval(id);
  }, []);

  return (
    <div className="bg-[#111111] p-12 grid place-items-center min-h-[260px]">
      <div
        className="text-[#FAFAF8] text-[18px] leading-[1.5]"
        style={{ fontFamily: "ui-monospace, 'SF Mono', Menlo, monospace" }}
      >
        <span className="text-[#6B6B66]">~/velynkit</span>
        <span className="text-[#2A3D2F] mx-2">$</span>
        <span>{shown}</span>
        <span
          className="inline-block w-2 h-5 align-middle ml-1 bg-[#FAFAF8]"
          style={{ animation: done ? "blink 1s steps(2) infinite" : "none" }}
        />
        <style>{`@keyframes blink { 50% { opacity: 0; } }`}</style>
      </div>
    </div>
  );
}
Type-On Terminal
