41 lines
1.9 KiB
TypeScript
41 lines
1.9 KiB
TypeScript
import { useState } from 'react';
|
|
import { Fuel, BatteryCharging } from 'lucide-react';
|
|
import { motion } from 'motion/react';
|
|
import HydrogenView from './HydrogenView';
|
|
import ElectricView from './ElectricView';
|
|
|
|
type TopTab = 'hydrogen' | 'electric';
|
|
|
|
export default function EnergyModule() {
|
|
const [activeTab, setActiveTab] = useState<TopTab>('hydrogen');
|
|
return (
|
|
<div className="min-h-screen bg-[#F8F9FB] text-gray-800 font-sans p-3 md:p-6 relative" style={{ overflowX: 'clip' }}>
|
|
<div className="max-w-6xl mx-auto flex flex-col gap-3 pb-16 landscape:pb-0 landscape:h-full landscape:flex-1 landscape:overflow-hidden">
|
|
<div className="bg-white px-4 py-2 rounded-2xl border border-slate-100 shadow-sm flex items-center gap-6 sticky top-0 z-30">
|
|
<button
|
|
onClick={() => setActiveTab('hydrogen')}
|
|
className={`flex items-center gap-2 py-1 transition-all relative ${activeTab === 'hydrogen' ? 'text-blue-600' : 'text-slate-400'}`}
|
|
>
|
|
<Fuel size={14} />
|
|
<span className="text-[11px] font-bold">氢能</span>
|
|
{activeTab === 'hydrogen' && (
|
|
<motion.div layoutId="activeEnergyTopTab" className="absolute -bottom-2 left-0 right-0 h-0.5 bg-blue-600 rounded-full" />
|
|
)}
|
|
</button>
|
|
<button
|
|
onClick={() => setActiveTab('electric')}
|
|
className={`flex items-center gap-2 py-1 transition-all relative ${activeTab === 'electric' ? 'text-blue-600' : 'text-slate-400'}`}
|
|
>
|
|
<BatteryCharging size={14} />
|
|
<span className="text-[11px] font-bold">电能</span>
|
|
{activeTab === 'electric' && (
|
|
<motion.div layoutId="activeEnergyTopTab" className="absolute -bottom-2 left-0 right-0 h-0.5 bg-blue-600 rounded-full" />
|
|
)}
|
|
</button>
|
|
</div>
|
|
{activeTab === 'hydrogen' ? <HydrogenView /> : <ElectricView />}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|