54 lines
1.7 KiB
TypeScript
54 lines
1.7 KiB
TypeScript
import { useState } from 'react';
|
|
import { useAppStore, type LeftPanelTab } from '../../store/appStore';
|
|
import StaticBrowser from '../asset/StaticBrowser';
|
|
import ScriptTree from '../script/ScriptTree';
|
|
import GumpBrowser from '../gump/GumpBrowser';
|
|
import styles from './LeftPanel.module.css';
|
|
|
|
const TABS: { id: LeftPanelTab; label: string }[] = [
|
|
{ id: 'scripts', label: 'Scripts' },
|
|
{ id: 'statics', label: 'Statics' },
|
|
{ id: 'mobiles', label: 'Mobiles' },
|
|
{ id: 'gumps', label: 'Gumps' },
|
|
];
|
|
|
|
export default function LeftPanel() {
|
|
const { activeTab, setActiveTab } = useAppStore();
|
|
const [search, setSearch] = useState('');
|
|
|
|
return (
|
|
<div className={styles.panel}>
|
|
<div className={styles.tabs}>
|
|
{TABS.map((t) => (
|
|
<button
|
|
key={t.id}
|
|
className={`${styles.tab} ${activeTab === t.id ? styles.active : ''}`}
|
|
onClick={() => { setActiveTab(t.id); setSearch(''); }}
|
|
>
|
|
{t.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
<div className={styles.search}>
|
|
<input
|
|
type="text"
|
|
placeholder="Search…"
|
|
value={search}
|
|
onChange={(e) => setSearch(e.target.value)}
|
|
className={styles.searchInput}
|
|
/>
|
|
</div>
|
|
|
|
<div className={styles.content}>
|
|
{activeTab === 'statics' && <StaticBrowser search={search} />}
|
|
{activeTab === 'scripts' && <ScriptTree search={search} />}
|
|
{activeTab === 'mobiles' && (
|
|
<div className={styles.placeholder}>Mobile browser — Phase 1 (coming)</div>
|
|
)}
|
|
{activeTab === 'gumps' && <GumpBrowser search={search} />}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|