KimiSwitch Dev
3fbd70932c
- 多页路由：首页 / 功能 / 更新日志 / 下载（HashRouter，适配 GitHub Pages） - 中英文切换（zh/en 双语文案 + localStorage 记忆） - Kimi 品牌配色（中性灰 + 蓝）+ 科技风（网格底纹 / 辉光按钮 / 渐变强调词） - 更新日志页：运行时同步 GitHub Releases，localStorage 缓存 1h，网络失败回退内置列表 - 功能页 8 张截图卡片；下载页含自动更新说明 - 修复资源路径 404（asset() + %BASE_URL%）；自托管 Inter/Fira Code 字体
41 lines
1.0 KiB
TypeScript
41 lines
1.0 KiB
TypeScript
import { useInView } from "../hooks";
|
|
import type { ReactNode } from "react";
|
|
|
|
interface SectionShellProps {
|
|
id: string;
|
|
title: string;
|
|
subtitle?: string;
|
|
children: ReactNode;
|
|
}
|
|
|
|
export default function SectionShell({ id, title, subtitle, children }: SectionShellProps) {
|
|
const [ref, inView] = useInView<HTMLElement>();
|
|
return (
|
|
<section
|
|
ref={ref}
|
|
id={id}
|
|
aria-labelledby={`${id}-title`}
|
|
className={`py-20 transition-all duration-700 ease-out ${
|
|
inView
|
|
? "motion-safe:opacity-100 motion-safe:translate-y-0"
|
|
: "motion-safe:opacity-0 motion-safe:translate-y-6"
|
|
}`}
|
|
>
|
|
<div className="container-page">
|
|
<div className="mb-12 max-w-3xl">
|
|
<h2
|
|
id={`${id}-title`}
|
|
className="text-3xl font-bold tracking-tight md:text-4xl"
|
|
>
|
|
{title}
|
|
</h2>
|
|
{subtitle && (
|
|
<p className="mt-3 text-base text-muted-foreground">{subtitle}</p>
|
|
)}
|
|
</div>
|
|
{children}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|