39 lines
1.6 KiB
TypeScript
39 lines
1.6 KiB
TypeScript
import { useState } from 'react';
|
|
import { LayoutDashboard, CalendarDays } from 'lucide-react';
|
|
import { motion } from 'motion/react';
|
|
import HydrogenOverview from './HydrogenOverview';
|
|
import HydrogenDaily from './HydrogenDaily';
|
|
|
|
type SubTab = 'overview' | 'daily';
|
|
|
|
export default function HydrogenView() {
|
|
const [sub, setSub] = useState<SubTab>('overview');
|
|
return (
|
|
<>
|
|
<div className="bg-white px-4 py-2 rounded-2xl border border-slate-100 shadow-sm flex items-center gap-6 sticky top-[58px] z-20">
|
|
<button
|
|
onClick={() => setSub('overview')}
|
|
className={`flex items-center gap-2 py-1 transition-all relative ${sub === 'overview' ? 'text-blue-600' : 'text-slate-400'}`}
|
|
>
|
|
<LayoutDashboard size={14} />
|
|
<span className="text-[11px] font-bold">总览</span>
|
|
{sub === 'overview' && (
|
|
<motion.div layoutId="activeHydrogenSub" className="absolute -bottom-2 left-0 right-0 h-0.5 bg-blue-600 rounded-full" />
|
|
)}
|
|
</button>
|
|
<button
|
|
onClick={() => setSub('daily')}
|
|
className={`flex items-center gap-2 py-1 transition-all relative ${sub === 'daily' ? 'text-blue-600' : 'text-slate-400'}`}
|
|
>
|
|
<CalendarDays size={14} />
|
|
<span className="text-[11px] font-bold">每日</span>
|
|
{sub === 'daily' && (
|
|
<motion.div layoutId="activeHydrogenSub" className="absolute -bottom-2 left-0 right-0 h-0.5 bg-blue-600 rounded-full" />
|
|
)}
|
|
</button>
|
|
</div>
|
|
{sub === 'overview' ? <HydrogenOverview /> : <HydrogenDaily />}
|
|
</>
|
|
);
|
|
}
|