Typewriter Effect

'use client';

import type { CSSProperties } from 'react';
import './TypewriterText.css';

/** "a: b; --c: d" → style object */
function st(css: string | undefined): CSSProperties {
  const o: Record<string, string> = {};
  for (const decl of String(css ?? '').split(';')) {
    const i = decl.indexOf(':');
    if (i < 0) continue;
    const k = decl.slice(0, i).trim();
    if (k) o[k.startsWith('--') ? k : k.replace(/-([a-z])/g, (_, c) => c.toUpperCase())] = decl.slice(i + 1).trim();
  }
  return o as CSSProperties;
}

/** TypewriterText — ported from astro-component-kit. */
export interface TypewriterTextProps {
  text: string;
  speed?: string;
}

export function TypewriterText({ text, speed = '3s' }: TypewriterTextProps) {
  return (
    <>
      <div className="tw-wrap" data-rk-9a9102="">
        <span className="tw-text" style={st(`--len: ${text.length}; --speed: ${speed}`)} data-rk-9a9102="">
          {text}
        </span>
      </div>
    </>
  );
}

export default TypewriterText;

/* TypewriterText — ported from astro-component-kit (typography/TypewriterText.astro) */

.tw-wrap:where([data-rk-9a9102]) { display: inline-block; }
.tw-text:where([data-rk-9a9102]) { display: block; overflow: hidden; white-space: nowrap; border-right: 3px solid #6366f1; color: #fff; font-family: monospace; font-size: 1.5rem; font-weight: 700; width: 0; animation: typewriter-text-typing var(--speed) steps(var(--len)) forwards, typewriter-text-blink 0.75s step-end infinite; }
@keyframes typewriter-text-typing { from { width: 0 } to { width: 100% } }
@keyframes typewriter-text-blink { from, to { border-color: transparent } 50% { border-color: #6366f1 } }