ClipFusion-org/clipfusion
1
1
Fork 0
mirror of https://github.com/ClipFusion-org/clipfusion.git synced 2025-08-03 15:55:07 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

added menubar to the editor page

Browse Source
This commit is contained in:
corgifist 2025-08-02 01:48:09 +03:00
parent da45c7cbd9
commit f05545b570
3 changed files with 75 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/(editor)/editor/[uuid]/layout.tsx
View File

@ -37,7 +37,7 @@ export default async function RootLayout({
children: ReactNode
}>) {
return (
<main className="relative w-screen h-screen isolate">
<main className="relative w-screen h-screen isolate overscroll-none">
<PersistenceProvider>
{children}
</PersistenceProvider>

80
src/app/(editor)/editor/[uuid]/page.tsx
View File

@ -1,7 +1,77 @@
'use client';
import ClipFusionLogo from "@/components/clipfusion-logo";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Menubar, MenubarItem, MenubarMenu, MenubarContent, MenubarTrigger, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarSeparator } from "@/components/ui/menubar";
import { db } from "@/lib/db";
import { useLiveQuery } from "dexie-react-hooks";
import { ChevronDownIcon } from "lucide-react";
import { useParams, useRouter } from "next/navigation";
import { useEffect, useState } from "react";
export default function Editor() {
return (
<>
Hello, Editor Page!
</>
);
const router = useRouter();
const params = useParams();
const uuid = params.uuid as string;
const project = useLiveQuery(async () => db.projects.where('uuid').equals(uuid).first());
const [projectTitle, setProjectTitle] = useState('');
// Redirect user to the project library if provided UUID is invalid
useEffect(() => {
if (!uuid || (!project && project !== undefined)) {
router.push('/');
return;
}
if (project && projectTitle === '') {
setProjectTitle(project.title);
}
}, [uuid, project]);
return project ? (
<>
<div className="absolute top-0 left-0 bg-secondary w-screen h-screen pt-9">
Hello, World!
</div>
<Menubar className="absolute top-0 left-0 px-5 bg-card flex flex-row m-auto justify-between w-screen rounded-none">
<div className="flex flex-row justify-begin grow basis-0 items-center gap-4">
<ClipFusionLogo width="16" height="16" />
<MenubarMenu>
<MenubarTrigger className="group" asChild>
<Button variant="ghost" className="p-0 [&>svg]:group-data-[state='open']:rotate-180 gap-1">
Menu <ChevronDownIcon className="text-muted-foreground" size={15} />
</Button>
</MenubarTrigger>
<MenubarContent>
<MenubarSub>
<MenubarSubTrigger>
File
</MenubarSubTrigger>
<MenubarSubContent>
<MenubarItem>
New Project
</MenubarItem>
<MenubarItem>
Open Project
</MenubarItem>
<MenubarSub>
<MenubarSubTrigger>Open Recent</MenubarSubTrigger>
<MenubarSubContent>
Hello!
</MenubarSubContent>
</MenubarSub>
</MenubarSubContent>
</MenubarSub>
<MenubarSeparator/>
<MenubarItem onClick={() => router.push('/')}>Back to Project Library</MenubarItem>
</MenubarContent>
</MenubarMenu>
</div>
<div className="flex flex-row justify-center grow basis-0">
<Input placeholder="Project Title" spellCheck={false} value={projectTitle} onChange={(e) => setProjectTitle(e.target.value)} className="bg-transparent dark:bg-transparent border-none focus-visible:ring-0 text-sm p-0 h-6 text-center"/>
</div>
<div className="flex flex-row justify-end grow basis-0" />
</Menubar>
</>
) : <></>;
}