51 lines
1.3 KiB
TypeScript
51 lines
1.3 KiB
TypeScript
import Sidebar from './sidebar';
|
|
import { Content } from './content';
|
|
import { Panel, Group, Separator } from 'react-resizable-panels';
|
|
import { Toolbar } from './modules/Nav';
|
|
import { Toaster } from 'sonner';
|
|
const Provider = ({ children }: { children: React.ReactNode }) => {
|
|
return (
|
|
<>
|
|
{children}
|
|
<Toaster position="bottom-right" richColors />
|
|
</>
|
|
);
|
|
};
|
|
export const App = () => {
|
|
return (
|
|
<Provider>
|
|
<AIEditor />
|
|
</Provider>
|
|
);
|
|
};
|
|
|
|
export const SidebarApp = () => {
|
|
return (
|
|
<Provider>
|
|
<Sidebar />
|
|
</Provider>
|
|
);
|
|
};
|
|
|
|
export const AIEditor = () => {
|
|
return (
|
|
<div className='h-screen w-full flex flex-col bg-white dark:bg-black text-gray-900 dark:text-gray-100'>
|
|
<div className='h-16 shrink-0 text-xl font-bold border-b border-gray-200 dark:border-gray-800 p-3 flex gap-2 items-center bg-gray-50 dark:bg-gray-950'>
|
|
<span className='font-mono text-sm tracking-tight'>Codepod</span>
|
|
<Toolbar />
|
|
</div>
|
|
<div className='flex-1 min-h-0'>
|
|
<Group orientation="horizontal">
|
|
<Panel minSize={200} defaultSize={240} maxSize={400}>
|
|
<Sidebar />
|
|
</Panel>
|
|
<Separator className='bg-gray-200 dark:bg-gray-800 w-px' />
|
|
<Panel minSize={30}>
|
|
<Content />
|
|
</Panel>
|
|
</Group>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|