|
| 1 | +import { useLang } from '@rspress/core/runtime'; |
| 2 | +import { Link } from '@rspress/core/theme-original'; |
| 3 | +import { useEffect, useState } from 'react'; |
| 4 | +import { useI18nUrl } from './utils'; |
| 5 | +import styles from './GetStarted.module.scss'; |
| 6 | + |
| 7 | +const command = 'pnpm create rstack@latest'; |
| 8 | + |
| 9 | +export function GetStarted() { |
| 10 | + const isZh = useLang() === 'zh'; |
| 11 | + const tUrl = useI18nUrl(); |
| 12 | + const [copyStatus, setCopyStatus] = useState<'idle' | 'copied' | 'error'>( |
| 13 | + 'idle', |
| 14 | + ); |
| 15 | + |
| 16 | + useEffect(() => { |
| 17 | + if (copyStatus === 'idle') return; |
| 18 | + const timeout = setTimeout(() => setCopyStatus('idle'), 2500); |
| 19 | + return () => clearTimeout(timeout); |
| 20 | + }, [copyStatus]); |
| 21 | + |
| 22 | + async function copyCommand() { |
| 23 | + try { |
| 24 | + await navigator.clipboard.writeText(command); |
| 25 | + setCopyStatus('copied'); |
| 26 | + } catch { |
| 27 | + setCopyStatus('error'); |
| 28 | + } |
| 29 | + } |
| 30 | + |
| 31 | + return ( |
| 32 | + <section className={styles.getStarted} aria-labelledby="get-started-title"> |
| 33 | + <div className={styles.inner}> |
| 34 | + <h2 id="get-started-title"> |
| 35 | + {isZh |
| 36 | + ? '用 Rstack CLI 开启下一个项目' |
| 37 | + : 'Build your next project with Rstack CLI'} |
| 38 | + </h2> |
| 39 | + <p className={styles.description}> |
| 40 | + {isZh |
| 41 | + ? '让工具步调一致，将时间留给你想创造的事物' |
| 42 | + : 'Keep your tools in sync and make time for what you want to create.'} |
| 43 | + </p> |
| 44 | + <div className={styles.controls}> |
| 45 | + <div className={styles.actions}> |
| 46 | + <div className={styles.command}> |
| 47 | + <span className={styles.prompt} aria-hidden="true"> |
| 48 | + $ |
| 49 | + </span> |
| 50 | + <code>{command}</code> |
| 51 | + <button |
| 52 | + type="button" |
| 53 | + className={styles.copyButton} |
| 54 | + onClick={() => { |
| 55 | + void copyCommand(); |
| 56 | + }} |
| 57 | + aria-label={isZh ? '复制创建命令' : 'Copy create command'} |
| 58 | + title={isZh ? '复制命令' : 'Copy command'} |
| 59 | + > |
| 60 | + <svg |
| 61 | + width="18" |
| 62 | + height="18" |
| 63 | + viewBox="0 0 24 24" |
| 64 | + fill="none" |
| 65 | + stroke="currentColor" |
| 66 | + strokeWidth="1.7" |
| 67 | + strokeLinecap="round" |
| 68 | + strokeLinejoin="round" |
| 69 | + aria-hidden="true" |
| 70 | + > |
| 71 | + {copyStatus === 'copied' ? ( |
| 72 | + <path d="m5 12 4 4L19 6" /> |
| 73 | + ) : ( |
| 74 | + <> |
| 75 | + <rect x="8" y="8" width="12" height="13" rx="2" /> |
| 76 | + <path d="M16 4V3H4v13h1" /> |
| 77 | + </> |
| 78 | + )} |
| 79 | + </svg> |
| 80 | + </button> |
| 81 | + </div> |
| 82 | + <Link className={styles.primary} href={tUrl('/guide/quick-start')}> |
| 83 | + {isZh ? '开始使用' : 'Get started'} |
| 84 | + <svg |
| 85 | + width="16" |
| 86 | + height="16" |
| 87 | + viewBox="0 0 24 24" |
| 88 | + fill="none" |
| 89 | + stroke="currentColor" |
| 90 | + strokeWidth="1.8" |
| 91 | + strokeLinecap="round" |
| 92 | + strokeLinejoin="round" |
| 93 | + aria-hidden="true" |
| 94 | + > |
| 95 | + <path d="M5 12h14m-6-6 6 6-6 6" /> |
| 96 | + </svg> |
| 97 | + </Link> |
| 98 | + </div> |
| 99 | + <p className={styles.status} role="status" aria-live="polite"> |
| 100 | + {copyStatus === 'copied' |
| 101 | + ? isZh |
| 102 | + ? '命令已复制' |
| 103 | + : 'Command copied' |
| 104 | + : copyStatus === 'error' |
| 105 | + ? isZh |
| 106 | + ? '复制失败，请手动复制命令' |
| 107 | + : 'Could not copy. Please copy the command manually.' |
| 108 | + : ''} |
| 109 | + </p> |
| 110 | + </div> |
| 111 | + </div> |
| 112 | + </section> |
| 113 | + ); |
| 114 | +} |
0 commit comments