Glyph Cycle

import { LoaderGlyphCycle } from '@/components/ui/loader-glyph-cycle'

'use client'

import { useEffect, useState } from 'react'
import { LoaderGlyphCycle } from '@/components/ui/loader-glyph-cycle'

export default function LoaderGlyphCycleDemo() {
  const [done, setDone] = useState(false)

  useEffect(() => {
    const t = setTimeout(() => setDone(true), 4200)
    return () => clearTimeout(t)
  }, [])

  return (
    <div className="mx-auto flex min-h-[360px] max-w-md flex-col items-center justify-center gap-10 px-6 py-20">
      <div className="flex flex-col items-center gap-4 text-center">
        <p className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground">
          Export queue
        </p>
        <LoaderGlyphCycle done={done} label="Compiling ledger export" />
        <p className="max-w-xs text-sm leading-relaxed text-muted-foreground">
          {done
            ? 'Northwind Q2 journal pack is ready, 1,284 rows, three ledgers.'
            : 'Compiling journal lines for Northwind Q2 close…'}
        </p>
      </div>
    </div>
  )
}