58 lines
2.1 KiB
TypeScript
58 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
import { Map } from "./components/Map";
|
|
import { Form } from "./components/Form";
|
|
import { SceneViewProvider } from "./providers/scene-view-provider";
|
|
import { use, useState } from "react";
|
|
import { ResetView } from "./components/ResetView";
|
|
import { MODEL_ID } from "./three/config";
|
|
|
|
export default function Home({
|
|
searchParams,
|
|
}: {
|
|
searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
|
|
}) {
|
|
const [isFormOpen, setIsFormOpen] = useState<boolean>(false);
|
|
const modelId = (use(searchParams).modelId as string) ?? MODEL_ID;
|
|
|
|
return (
|
|
<main className="h-screen">
|
|
<SceneViewProvider>
|
|
<div className="flex flex-col h-screen sm:flex-row">
|
|
<div className="sm:hidden p-4 bg-white dark:bg-gray-700 shadow-md flex justify-between items-center">
|
|
<span className="text-lg font-semibold text-gray-700 dark:text-gray-400">
|
|
3D-Viewer
|
|
</span>
|
|
<button
|
|
onClick={() => setIsFormOpen(true)}
|
|
className="text-3xl hover:cursor-pointer text-gray-700 dark:text-gray-400"
|
|
>
|
|
☰
|
|
</button>
|
|
</div>
|
|
<div className="flex-1 flex min-h-0 h-full">
|
|
<div className="relative flex-1">
|
|
<div className="hidden sm:block absolute top-2 right-2">
|
|
<ResetView></ResetView>
|
|
</div>
|
|
<Map modelId={modelId}></Map>
|
|
</div>
|
|
<div
|
|
className={`fixed sm:static inset-0 flex flex-col gap-1 items-center bg-white dark:bg-gray-700 p-2 sm:border-l border-gray-200 shadow-lg transition-transform duration-300 w-full sm:w-[350px] xl:w-[480px] ${
|
|
isFormOpen ? "translate-x-0" : "translate-x-full"
|
|
} sm:translate-x-0`}
|
|
>
|
|
<button
|
|
className="sm:hidden self-end text-gray-500 text-3xl hover:cursor-pointer p-1"
|
|
onClick={() => setIsFormOpen(false)}
|
|
>
|
|
✖
|
|
</button>
|
|
<Form />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</SceneViewProvider>
|
|
</main>
|
|
);
|
|
}
|