Massbug/judge4c
2
0
Fork 0
mirror of https://github.com/massbug/judge4c.git synced 2025-05-18 07:16:34 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(workspace): add tabs state management with zustand and loading skeleton

Browse Source
This commit is contained in:
cfngc4594 2025-03-03 13:57:08 +08:00
parent faad41039a
commit 2b6b7c54d5
1 changed files with 17 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/app/(app)/playground/@workspace/layout.tsx
View File

@ -1,4 +1,8 @@
"use client";
import { SquarePenIcon } from "lucide-react"; import { SquarePenIcon } from "lucide-react";
import { Skeleton } from "@/components/ui/skeleton";
import { useTabsStore } from "@/store/useTabsStore";
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"; import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
@ -7,8 +11,20 @@ interface WorkspaceLayoutProps {
} }
export default function WorkspaceLayout({ editor }: WorkspaceLayoutProps) { export default function WorkspaceLayout({ editor }: WorkspaceLayoutProps) {
const { hydrated, workspaceTab, setWorkspaceTab } = useTabsStore();
if (!hydrated) return (
<div className="h-9 w-full flex items-center px-2 py-1 bg-muted">
<Skeleton className="h-full w-[94px] rounded-3xl" />
</div>
)
const handleTabChange = (value: string) => {
setWorkspaceTab(value);
};
return ( return (
<Tabs defaultValue="editor" className="h-full flex flex-col"> <Tabs value={workspaceTab} onValueChange={handleTabChange} className="h-full flex flex-col">
<ScrollArea className="h-9 flex-none bg-muted px-1"> <ScrollArea className="h-9 flex-none bg-muted px-1">
<TabsList className="gap-1 bg-transparent"> <TabsList className="gap-1 bg-transparent">
<TabsTrigger <TabsTrigger