diff options
Diffstat (limited to 'src/pages/HomePage.tsx')
| -rw-r--r-- | src/pages/HomePage.tsx | 219 |
1 files changed, 219 insertions, 0 deletions
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx new file mode 100644 index 0000000..a1e7668 --- /dev/null +++ b/src/pages/HomePage.tsx @@ -0,0 +1,219 @@ +import { Button } from '@astryxdesign/core/Button' +import { Card } from '@astryxdesign/core/Card' +import { CodeBlock } from '@astryxdesign/core/CodeBlock' +import { Divider } from '@astryxdesign/core/Divider' +import { Grid } from '@astryxdesign/core/Grid' +import { Heading } from '@astryxdesign/core/Heading' +import { HStack } from '@astryxdesign/core/HStack' +import { Icon } from '@astryxdesign/core/Icon' +import { List, ListItem } from '@astryxdesign/core/List' +import { Text } from '@astryxdesign/core/Text' +import { VStack } from '@astryxdesign/core/VStack' +import { + ArrowRight, + Atom, + Check, + ExternalLink, + Layers, + Moon, + Palette, + Route, + Sparkles, + Terminal, + Zap, +} from 'lucide-react' +import { Page } from '../components/Page' + +const STACK = [ + { + name: 'Vite', + version: '8.x', + icon: Zap, + description: '极速开发服务器、快速热更新，以及经过优化的生产构建。', + }, + { + name: 'React', + version: '19.x', + icon: Atom, + description: '现代 Hooks 与全应用共享的组件模型。', + }, + { + name: 'React Router', + version: '7.x', + icon: Route, + description: '嵌套路由、持续存在的应用外壳，以及类型安全的导航。', + }, + { + name: 'Astryx', + version: '0.7', + icon: Palette, + description: '无障碍组件、设计令牌、主题与深色模式。', + }, +] + +const QUICK_START = `npm install +npm run dev` + +const BUILT_IN = [ + { + label: '应用外壳', + description: + '顶部导航、可折叠侧边栏和移动端抽屉都已替你处理好。', + icon: Layers, + }, + { + label: '客户端路由', + description: + '所有页面共用一套布局，可在根目录配置中切换 hash 与 history 路由。', + icon: Route, + }, + { + label: '明暗主题', + description: + 'Astryx neutral 主题可切换模式，并记住你的选择。', + icon: Moon, + }, + { + label: '完整组件目录', + description: + '全部 173 个 Astryx 组件，按基础、表单和弹层分类。', + icon: Sparkles, + }, +] + +export function HomePage() { + return ( + <Page> + <VStack gap={10}> + <VStack gap={5} maxWidth={860}> + <Text type="label" color="accent"> + Vite + React + React Router + Astryx + </Text> + <VStack gap={3}> + <Heading level={1} type="display-2" textWrap="balance"> + 为你的下一个 React 应用，准备更好的起点。 + </Heading> + <Text type="large" color="secondary" as="p" textWrap="pretty"> + Vite 让反馈循环保持飞快，React Router + 给应用真正的结构，Astryx 提供无障碍组件与主题。所有部分都已经连接好。 + </Text> + </VStack> + <HStack gap={3} wrap="wrap"> + <Button + label="浏览组件" + variant="primary" + href="/components" + endContent={<Icon icon={ArrowRight} size="sm" color="inherit" />} + /> + <Button + label="Astryx 文档" + variant="secondary" + href="https://astryx.atmeta.com" + target="_blank" + rel="noreferrer" + endContent={ + <Icon icon={ExternalLink} size="sm" color="inherit" /> + } + /> + </HStack> + </VStack> + + <Divider /> + + <VStack gap={5}> + <VStack gap={2} maxWidth={680}> + <Text type="label" color="accent"> + 技术栈 + </Text> + <Heading level={2}>四件工具，已经连接好。</Heading> + <Text type="body" color="secondary" as="p"> + 无需构建插件，也无需额外配置 CSS。Astryx + 直接提供预构建样式，项目里能看到的导入就是全部配置。 + </Text> + </VStack> + <Grid columns={{ minWidth: 230, max: 4 }} gap={6}> + {STACK.map(({ name, version, icon, description }) => ( + <HStack key={name} gap={3} vAlign="start"> + <Icon icon={icon} size="md" color="accent" /> + <VStack gap={1}> + <HStack gap={2} vAlign="center" wrap="wrap"> + <Text type="label">{name}</Text> + <Text type="supporting" size="sm"> + {version} + </Text> + </HStack> + <Text type="supporting" size="sm" as="p"> + {description} + </Text> + </VStack> + </HStack> + ))} + </Grid> + </VStack> + + <Divider /> + + <Grid columns={{ minWidth: 320, max: 2 }} gap={8}> + <VStack gap={4}> + <VStack gap={1}> + <Heading level={2}>已经接好的能力</Heading> + <Text type="body" color="secondary" as="p"> + 一些方便替换、能随应用一起成长的小默认值。 + </Text> + </VStack> + <List hasDividers> + {BUILT_IN.map(({ label, description, icon }) => ( + <ListItem + key={label} + label={label} + description={description} + startContent={ + <Icon icon={icon} size="sm" color="secondary" /> + } + endContent={ + <Icon icon={Check} size="sm" color="success" /> + } + /> + ))} + </List> + </VStack> + + <Card padding={6} elevation="low"> + <VStack gap={4}> + <VStack gap={1}> + <Heading level={2}>快速开始</Heading> + <Text type="body" color="secondary" as="p"> + 安装依赖、启动 Vite，然后编辑{' '} + <Text type="code">src/</Text> 下的任意文件。 + </Text> + </VStack> + <CodeBlock + code={QUICK_START} + language="bash" + title="终端" + hasLanguageLabel={false} + width="100%" + /> + <HStack gap={2} vAlign="center"> + <Icon icon={Terminal} size="sm" color="secondary" /> + <Text type="supporting" size="sm"> + 需要 Node 20.19+ 和 npm 10+。 + </Text> + </HStack> + </VStack> + </Card> + </Grid> + + <Divider /> + + <HStack gap={2} vAlign="center"> + <Icon icon={Sparkles} size="sm" color="accent" /> + <Text type="supporting" size="sm"> + 基于 Astryx v0.7.2 和 neutral 主题构建。可在 + src/astryx-themes.ts 中更改主题。 + </Text> + </HStack> + </VStack> + </Page> + ) +} |