|
1 | | -import { Button } from '@/components/ui/button'; |
2 | | -import { Link } from '@tanstack/react-router'; |
3 | | -import { Edit, FolderPlus } from 'lucide-react'; |
| 1 | +import { useInstanceClientIdParams } from '@/config/useInstanceClient'; |
| 2 | +import { EditorViewProvider } from '@/features/instance/applications/context/EditorViewProvider'; |
| 3 | +import { ApplicationsSidebar } from '@/features/instance/applications/components/ApplicationsSidebar'; |
| 4 | +import { getComponentsQueryOptions } from '@/features/instance/operations/queries/getComponents'; |
| 5 | +import { useSuspenseQuery } from '@tanstack/react-query'; |
| 6 | +import { TextEditorView } from './components/TextEditorView'; |
| 7 | + |
| 8 | +export function ApplicationsEditor() { |
| 9 | + const instanceParams = useInstanceClientIdParams(); |
| 10 | + const { data: getComponentsQueryData } = useSuspenseQuery(getComponentsQueryOptions(instanceParams)); |
4 | 11 |
|
5 | | -export function ApplicationsIndex() { |
6 | 12 | return ( |
7 | | - <div className="flex flex-col justify-center gap-4 min-h-[calc(80vh-theme(spacing.20))]"> |
8 | | - <h1 className="text-2xl font-bold text-center text-white">Applications</h1> |
9 | | - <div className="flex flex-col items-center justify-center gap-8 md:flex-row"> |
10 | | - <Link to="editor" className="w-full max-w-80"> |
11 | | - <Button className="w-full py-10 text-lg" variant="positiveOutline"> |
12 | | - <Edit /> |
13 | | - Edit Applications |
14 | | - </Button> |
15 | | - </Link> |
16 | | - <Link to="new" className="w-full max-w-80"> |
17 | | - <Button className="w-full py-10 text-lg" variant="positiveOutline"> |
18 | | - <FolderPlus /> |
19 | | - Create/Import A New Application |
20 | | - </Button> |
21 | | - </Link> |
| 13 | + <EditorViewProvider> |
| 14 | + <div className="grid grid-cols-1 gap-4 md:grid-cols-12 h-[calc(100vh-theme(spacing.32))]"> |
| 15 | + <section className="h-0 min-h-full col-span-1 overflow-y-scroll text-white md:col-span-4 lg:col-span-3"> |
| 16 | + <ApplicationsSidebar fileTreeQueryData={getComponentsQueryData} /> |
| 17 | + </section> |
| 18 | + <section className="h-full col-span-1 text-white md:col-span-8 lg:col-span-9"> |
| 19 | + <TextEditorView /> |
| 20 | + </section> |
22 | 21 | </div> |
23 | | - </div> |
| 22 | + </EditorViewProvider> |
24 | 23 | ); |
25 | 24 | } |
26 | | - |
27 | | - |
0 commit comments