61 lines
2.1 KiB
TypeScript
61 lines
2.1 KiB
TypeScript
import React from 'react';
|
|
import { Hexagon } from 'lucide-react';
|
|
import BottomNav from './BottomNav';
|
|
import HardwareStatus from './HardwareStatus';
|
|
import { UserTab, DeviceStatus } from '../types';
|
|
|
|
interface LayoutProps {
|
|
children: React.ReactNode;
|
|
currentTab: UserTab;
|
|
onTabChange: (tab: UserTab) => void;
|
|
title: string;
|
|
subtitle?: string;
|
|
deviceStatus: DeviceStatus;
|
|
onDeviceClick: () => void;
|
|
}
|
|
|
|
const Layout: React.FC<LayoutProps> = ({
|
|
children,
|
|
currentTab,
|
|
onTabChange,
|
|
title,
|
|
subtitle,
|
|
deviceStatus,
|
|
onDeviceClick
|
|
}) => {
|
|
return (
|
|
<div className="h-screen w-screen bg-transparent text-[#F8FAFC] overflow-hidden flex flex-col relative">
|
|
|
|
{/* 1. Top Template Header (Super Clean) */}
|
|
<div className="shrink-0 pt-safe-top z-20">
|
|
<div className="px-5 py-4 flex items-end justify-between">
|
|
{/* Left: Branding & Title */}
|
|
<div className="flex flex-col justify-end">
|
|
<div className="flex items-center gap-1.5 mb-1">
|
|
<Hexagon size={12} className="text-white fill-white/20" strokeWidth={2.5} />
|
|
<span className="text-[10px] font-bold tracking-[0.2em] text-white/80 uppercase shadow-sm">Wei AI</span>
|
|
</div>
|
|
<h1 className="text-2xl font-bold text-white leading-none tracking-tight drop-shadow-md">{title}</h1>
|
|
</div>
|
|
|
|
{/* Right: Embedded Hardware Status */}
|
|
<div className="pb-0.5">
|
|
<HardwareStatus status={deviceStatus} onClick={onDeviceClick} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 2. Middle Content (Scrollable) */}
|
|
<main className="flex-1 overflow-y-auto no-scrollbar relative z-10 w-full">
|
|
{/* Top fade mask for content scrolling under header */}
|
|
<div className="absolute top-0 left-0 w-full h-8 bg-gradient-to-b from-[#2e1065]/20 to-transparent pointer-events-none z-10"></div>
|
|
{children}
|
|
</main>
|
|
|
|
{/* 3. Bottom Tab (Fixed) */}
|
|
<BottomNav currentTab={currentTab} onTabChange={onTabChange} />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Layout; |