nihonbuzz-academy/resources/js/lib/furigana.tsx

import React from 'react';

/**
 * Parses a string with Japanese Furigana format {kanji|reading} 
 * into HTML <ruby> tags.
 */
export function parseFurigana(text: string): React.ReactNode[] {
  if (!text) return [];
  
  const regex = /\{([^|]+)\|([^}]+)\}/g;
  const parts = [];
  let lastIndex = 0;
  let match;

  while ((match = regex.exec(text)) !== null) {
    // Add text before match
    if (match.index > lastIndex) {
      parts.push(text.substring(lastIndex, match.index));
    }

    // Add ruby tag
    const [fullMatch, kanji, reading] = match;
    parts.push(
      <ruby key={match.index} className="ruby-text">
        {kanji}
        <rt className="text-[0.6em] opacity-80">{reading}</rt>
      </ruby>
    );

    lastIndex = regex.lastIndex;
  }

  // Add remaining text
  if (lastIndex < text.length) {
    parts.push(text.substring(lastIndex));
  }

  return parts;
}

interface FuriganaTextProps {
  text: string;
  className?: string;
}

export const FuriganaText: React.FC<FuriganaTextProps> = ({ text, className }) => {
  return <span className={className}>{parseFurigana(text)}</span>;
};