components/editor/index.tsx

"use client";
import { useState } from "react";

import { EditorHeader } from "./header";
import { EditorSidebar } from "./sidebar";
import { EditorMain } from "./main";
import { ApiRoute } from "@/utils/type";
import { API_COLLECTIONS } from "@/utils/datas/api_collections";

export const Editor = () => {
  const [collections, setCollections] = useState<string[]>(["search"]);
  const [endpoint, setEndpoint] = useState<ApiRoute | null>(
    API_COLLECTIONS[0].endpoints[0]
  );

  return (
    <div className="bg-slate-950 w-full overflow-hidden shadow-xl h-[100vh]">
      <EditorHeader />
      <main className="flex h-full">
        <EditorSidebar
          collections={collections}
          endpoint={endpoint}
          onCollections={setCollections}
          onEndpoint={setEndpoint}
        />
        {endpoint && (
          <EditorMain
            collections={collections}
            endpoint={endpoint}
            onCollections={setCollections}
            onEndpoint={setEndpoint}
          />
        )}
      </main>
    </div>
  );
};