| 489 | } |
| 490 | |
| 491 | function EmptyState() { |
| 492 | const t = useT(); |
| 493 | const bootLines = [ |
| 494 | t("chat.boot1"), |
| 495 | t("chat.boot2"), |
| 496 | t("chat.boot3"), |
| 497 | t("chat.boot4"), |
| 498 | ]; |
| 499 | return ( |
| 500 | <div className="mx-auto mt-8 max-w-2xl"> |
| 501 | <div className="k-eyebrow mb-3">{t("chat.idle")}</div> |
| 502 | <h2 className="k-display mb-8 text-5xl text-[var(--paper)]"> |
| 503 | {t("chat.empty_pre")}{" "} |
| 504 | <span className="k-display-italic text-[var(--amber)]"> |
| 505 | {t("chat.empty_em")} |
| 506 | </span> |
| 507 | <br /> |
| 508 | {t("chat.empty_post")} |
| 509 | </h2> |
| 510 | |
| 511 | <div className="mb-8 border border-[var(--line)] bg-[var(--ink-2)]/40 p-5"> |
| 512 | <div className="k-eyebrow mb-3">{t("chat.boot")}</div> |
| 513 | <div className="space-y-1 font-mono text-[12px] leading-relaxed text-[var(--paper-dim)]"> |
| 514 | {bootLines.map((line, i) => ( |
| 515 | <div |
| 516 | key={i} |
| 517 | className="k-boot-line" |
| 518 | style={{ animationDelay: `${0.15 + i * 0.35}s` }} |
| 519 | > |
| 520 | {line} |
| 521 | </div> |
| 522 | ))} |
| 523 | <div> |
| 524 | <span className="k-caret" /> |
| 525 | </div> |
| 526 | </div> |
| 527 | </div> |
| 528 | |
| 529 | <div className="grid grid-cols-3 gap-4 text-[11px]"> |
| 530 | <Hint |
| 531 | eyebrow={t("chat.hint_example")} |
| 532 | title={t("chat.hint1_title")} |
| 533 | body={t("chat.hint1_body")} |
| 534 | /> |
| 535 | <Hint |
| 536 | eyebrow={t("chat.hint_example")} |
| 537 | title={t("chat.hint2_title")} |
| 538 | body={t("chat.hint2_body")} |
| 539 | /> |
| 540 | <Hint |
| 541 | eyebrow={t("chat.hint_tip")} |
| 542 | title={t("chat.hint3_title")} |
| 543 | body={t("chat.hint3_body")} |
| 544 | /> |
| 545 | </div> |
| 546 | </div> |
| 547 | ); |
| 548 | } |