| 1 | "use client"; |
| 2 | |
| 3 | import type { RatatuiCopy } from "@/lib/content/ratatui"; |
| 4 | import { CopyButton } from "./explorer"; |
| 5 | import { CodeBlock } from "./highlight"; |
| 6 | import { INSTALL, STARTER_SOURCE, TRY_STARTER, getRecipe, learningGuideUrl } from "@/lib/ratatui/recipes"; |
| 7 | import "./quickstart.css"; |
| 8 | |
| 9 | export function RatatuiQuickstart({ copy }: { copy: RatatuiCopy }) { |
| 10 | const composer = getRecipe("composer"); |
| 11 | return <section id="ratatui-install" className="rat-quickstart" aria-labelledby="rat-start-title"> |
| 12 | <div className="rat-start-intro"> |
| 13 | <h2 id="rat-start-title">{copy.firstAppTitle}</h2> |
| 14 | <p>{copy.firstAppDescription}</p> |
| 15 | <div className="rat-start-links"> |
| 16 | <a href={STARTER_SOURCE}>{copy.starterSource} →</a> |
| 17 | <a href={learningGuideUrl()}>{copy.guide} →</a> |
| 18 | </div> |
| 19 | </div> |
| 20 | <div className="rat-start-command"> |
| 21 | <CopyButton text={TRY_STARTER} copy={copy} /> |
| 22 | <CodeBlock code={TRY_STARTER} language="sh" /> |
| 23 | <p>{copy.rustVersion} · {copy.license}</p> |
| 24 | </div> |
| 25 | <details className="rat-existing-app"> |
| 26 | <summary>{copy.existingApp}</summary> |
| 27 | <div className="rat-existing-body"> |
| 28 | <p>{copy.installationDescription}</p> |
| 29 | <CopyButton text={INSTALL} copy={copy} /> |
| 30 | <CodeBlock code={INSTALL} language="toml" /> |
| 31 | <p>{copy.themeNote}</p> |
| 32 | <CodeBlock code={"let theme = codewhale_ratatui::Theme::detect().tui();"} language="rust" /> |
| 33 | {composer && <><CopyButton text={composer.code} copy={copy} /><CodeBlock code={composer.code} language="rust" /></>} |
| 34 | <dl className="rat-host-flow"> |
| 35 | <div><dt>{copy.stateTitle}</dt><dd>{copy.stateDescription}</dd></div> |
| 36 | <div><dt>{copy.paintTitle}</dt><dd>{copy.paintDescription}</dd></div> |
| 37 | <div><dt>{copy.actionsTitle}</dt><dd>{copy.actionsDescription}</dd></div> |
| 38 | </dl> |
| 39 | </div> |
| 40 | </details> |
| 41 | </section>; |
| 42 | } |
| 43 |