| 1 | import logoWordmark from "../assets/logo-wordmark.svg"; |
| 2 | import { useT } from "../lib/i18n"; |
| 3 | |
| 4 | // Welcome is the empty-state landing: a one-liner, the input affordances |
| 5 | // (/ commands, @ files, Enter), and a few clickable example prompts that send |
| 6 | // immediately so a first turn is one click away. |
| 7 | |
| 8 | export function Welcome({ onPrompt, variant = "default" }: { onPrompt: (text: string) => void; variant?: "default" | "creation" }) { |
| 9 | const t = useT(); |
| 10 | if (variant === "creation") { |
| 11 | // Headline lives above the hero Composer in App footer (same stack). |
| 12 | void onPrompt; |
| 13 | void t; |
| 14 | return null; |
| 15 | } |
| 16 | |
| 17 | const examples = [t("welcome.ex1"), t("welcome.ex2"), t("welcome.ex3"), t("welcome.ex4")]; |
| 18 | return ( |
| 19 | <div className="welcome welcome--brand"> |
| 20 | <span className="welcome__brand"> |
| 21 | <img src={logoWordmark} className="welcome__brand-logo" alt="Reasonix" draggable={false} /> |
| 22 | </span> |
| 23 | <h2 className="welcome__title">{t("welcome.title")}</h2> |
| 24 | <div className="welcome__tag">{t("welcome.tagline")}</div> |
| 25 | |
| 26 | <div className="welcome__hints"> |
| 27 | <span> |
| 28 | <kbd>/</kbd> {t("welcome.hintCommands")} |
| 29 | </span> |
| 30 | <span> |
| 31 | <kbd>@</kbd> {t("welcome.hintFiles")} |
| 32 | </span> |
| 33 | <span> |
| 34 | <kbd>⏎</kbd> {t("welcome.hintSend")} |
| 35 | </span> |
| 36 | </div> |
| 37 | |
| 38 | <div className="welcome__examples"> |
| 39 | {examples.map((ex) => ( |
| 40 | <button key={ex} className="welcome__ex" onClick={() => onPrompt(ex)}> |
| 41 | {ex} |
| 42 | </button> |
| 43 | ))} |
| 44 | </div> |
| 45 | </div> |
| 46 | ); |
| 47 | } |
| 48 |