feat: expand app functionality with new app cards and individual app pages in App component
This commit is contained in:
parent
a8b1aadb1c
commit
2643178b61
106
src/app/App.tsx
106
src/app/App.tsx
|
|
@ -1,5 +1,5 @@
|
|||
import { useState } from 'react';
|
||||
import { Cpu, Settings, Wifi, Network, HardDrive, Activity, MoreHorizontal, Search, Wrench, User, LogOut, Bell, FileText, AppWindow } from 'lucide-react';
|
||||
import { Cpu, Settings, Wifi, Network, HardDrive, Activity, MoreHorizontal, Search, Wrench, User, LogOut, Bell, FileText, AppWindow, Folder, Edit, Eye, Database, Upload, Download, Code2, LayoutList, Image, ChevronLeft, Loader2 } from 'lucide-react';
|
||||
import { Toaster } from 'sonner';
|
||||
import StatusPage from './components/StatusPage';
|
||||
import DevicesPage from './components/DevicesPage';
|
||||
|
|
@ -12,7 +12,23 @@ import SearchOverlay from './components/SearchOverlay';
|
|||
import logoSvg from '../imports/logo.svg';
|
||||
import configData from '../imports/config.json';
|
||||
|
||||
type Page = 'status' | 'devices' | 'iec' | 'network' | 'other' | 'general' | 'tools' | 'apps';
|
||||
type Page = 'status' | 'devices' | 'iec' | 'network' | 'other' | 'general' | 'tools' | 'apps' | AppId;
|
||||
|
||||
type AppId =
|
||||
| 'directory-editor'
|
||||
| 'sector-editor'
|
||||
| 'bam-editor'
|
||||
| 'disk-visualizer'
|
||||
| 'ramrom-explorer'
|
||||
| 'dump-disk-image'
|
||||
| 'write-disk-image'
|
||||
| 'basic-editor'
|
||||
| 'assembler'
|
||||
| 'sprite-editor'
|
||||
| 'charset-editor'
|
||||
| 'petscii-editor'
|
||||
| 'idle-animation'
|
||||
| 'loading-animation';
|
||||
|
||||
export default function App() {
|
||||
const [currentPage, setCurrentPage] = useState<Page>('status');
|
||||
|
|
@ -28,9 +44,93 @@ export default function App() {
|
|||
other: <OtherPage config={config} setConfig={setConfig} />,
|
||||
general: <GeneralPage config={config} setConfig={setConfig} />,
|
||||
tools: <ToolsPage config={config} setConfig={setConfig} />,
|
||||
apps: <div className="p-8 text-center text-neutral-500">Apps page coming soon...</div>
|
||||
apps: (
|
||||
<div className="max-w-3xl mx-auto py-8 px-4">
|
||||
<h1 className="text-2xl font-bold mb-6 text-center">Apps</h1>
|
||||
<div className="space-y-10">
|
||||
{/* Disk Group */}
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold mb-4 text-blue-700">Disk</h2>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
|
||||
<AppCard icon={<Folder className="w-7 h-7" />} label="Directory Editor" onClick={() => setCurrentPage('directory-editor')} />
|
||||
<AppCard icon={<Edit className="w-7 h-7" />} label="Sector Editor" onClick={() => setCurrentPage('sector-editor')} />
|
||||
<AppCard icon={<LayoutList className="w-7 h-7" />} label="BAM Editor" onClick={() => setCurrentPage('bam-editor')} />
|
||||
<AppCard icon={<Eye className="w-7 h-7" />} label="Disk Visualizer" onClick={() => setCurrentPage('disk-visualizer')} />
|
||||
<AppCard icon={<Database className="w-7 h-7" />} label="RAM/ROM Explorer" onClick={() => setCurrentPage('ramrom-explorer')} />
|
||||
<AppCard icon={<Download className="w-7 h-7" />} label="Dump Disk Image" onClick={() => setCurrentPage('dump-disk-image')} />
|
||||
<AppCard icon={<Upload className="w-7 h-7" />} label="Write Disk Image" onClick={() => setCurrentPage('write-disk-image')} />
|
||||
</div>
|
||||
</div>
|
||||
{/* Development Group */}
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold mb-4 text-green-700">Development</h2>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
|
||||
<AppCard icon={<FileText className="w-7 h-7" />} label="Basic Editor" onClick={() => setCurrentPage('basic-editor')} />
|
||||
<AppCard icon={<Code2 className="w-7 h-7" />} label="Assembler" onClick={() => setCurrentPage('assembler')} />
|
||||
<AppCard icon={<Image className="w-7 h-7" />} label="Sprite Editor" onClick={() => setCurrentPage('sprite-editor')} />
|
||||
<AppCard icon={<Edit className="w-7 h-7" />} label="Character Set Editor" onClick={() => setCurrentPage('charset-editor')} />
|
||||
<AppCard icon={<Edit className="w-7 h-7" />} label="Petscii Editor" onClick={() => setCurrentPage('petscii-editor')} />
|
||||
</div>
|
||||
</div>
|
||||
{/* Display Group */}
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold mb-4 text-purple-700">Display</h2>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
|
||||
<AppCard icon={<Activity className="w-7 h-7" />} label="Idle Animation" onClick={() => setCurrentPage('idle-animation')} />
|
||||
<AppCard icon={<Loader2 className="w-7 h-7" />} label="Loading Animation" onClick={() => setCurrentPage('loading-animation')} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
// Individual app pages
|
||||
'directory-editor': <AppPage title="Directory Editor" onBack={() => setCurrentPage('apps')} />,
|
||||
'sector-editor': <AppPage title="Sector Editor" onBack={() => setCurrentPage('apps')} />,
|
||||
'bam-editor': <AppPage title="BAM Editor" onBack={() => setCurrentPage('apps')} />,
|
||||
'disk-visualizer': <AppPage title="Disk Visualizer" onBack={() => setCurrentPage('apps')} />,
|
||||
'ramrom-explorer': <AppPage title="RAM/ROM Explorer" onBack={() => setCurrentPage('apps')} />,
|
||||
'dump-disk-image': <AppPage title="Dump Disk Image" onBack={() => setCurrentPage('apps')} />,
|
||||
'write-disk-image': <AppPage title="Write Disk Image" onBack={() => setCurrentPage('apps')} />,
|
||||
'basic-editor': <AppPage title="Basic Editor" onBack={() => setCurrentPage('apps')} />,
|
||||
'assembler': <AppPage title="Assembler" onBack={() => setCurrentPage('apps')} />,
|
||||
'sprite-editor': <AppPage title="Sprite Editor" onBack={() => setCurrentPage('apps')} />,
|
||||
'charset-editor': <AppPage title="Character Set Editor" onBack={() => setCurrentPage('apps')} />,
|
||||
'petscii-editor': <AppPage title="Petscii Editor" onBack={() => setCurrentPage('apps')} />,
|
||||
'idle-animation': <AppPage title="Idle Animation" onBack={() => setCurrentPage('apps')} />,
|
||||
'loading-animation': <AppPage title="Loading Animation" onBack={() => setCurrentPage('apps')} />
|
||||
};
|
||||
|
||||
// AppCard component for app grid
|
||||
function AppCard({ icon, label, onClick }: { icon: React.ReactNode; label: string; onClick: () => void }) {
|
||||
return (
|
||||
<button
|
||||
className="flex flex-col items-center justify-center gap-2 bg-white rounded-xl shadow border border-neutral-200 hover:bg-blue-50 transition p-6 w-full h-32 focus:outline-none"
|
||||
onClick={onClick}
|
||||
>
|
||||
<span className="text-blue-700">{icon}</span>
|
||||
<span className="text-base font-medium text-neutral-800 mt-2">{label}</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
// AppPage component for individual app pages
|
||||
function AppPage({ title, onBack }: { title: string; onBack: () => void }) {
|
||||
return (
|
||||
<div className="max-w-2xl mx-auto py-8 px-4">
|
||||
<button
|
||||
className="flex items-center gap-2 mb-6 text-blue-700 hover:underline"
|
||||
onClick={onBack}
|
||||
>
|
||||
<ChevronLeft className="w-5 h-5" /> Back to Apps
|
||||
</button>
|
||||
<h1 className="text-2xl font-bold mb-4">{title}</h1>
|
||||
<div className="bg-white rounded-xl shadow p-8 text-neutral-500 text-center border border-neutral-200">
|
||||
{title} coming soon...
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="size-full flex flex-col bg-neutral-50">
|
||||
<Toaster position="top-center" />
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user