You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
98 lines
3.2 KiB
98 lines
3.2 KiB
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { Drawer } from "antd";
|
|
import { FolderOpenOutlined, LeftOutlined, NodeIndexOutlined } from "@ant-design/icons";
|
|
|
|
import { useI18n } from "@/i18n";
|
|
import { AssetLibraryPanel } from "./AssetLibraryDrawer";
|
|
import { CanvasOutlinePanel } from "./CanvasOutlineDrawer";
|
|
|
|
interface ResourceManagerDrawerProps {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
type ResourceManagerTab = "canvas" | "assets";
|
|
|
|
export function ResourceManagerDrawer({ open, onClose }: ResourceManagerDrawerProps) {
|
|
const { t } = useI18n();
|
|
const [activeTab, setActiveTab] = useState<ResourceManagerTab>("canvas");
|
|
|
|
const tabButtonClass = (tab: ResourceManagerTab) => [
|
|
"flex h-8 items-center gap-1.5 rounded-lg px-3 text-sm font-semibold transition-colors",
|
|
activeTab === tab
|
|
? "bg-[var(--surface-active)] text-[var(--text-primary)]"
|
|
: "bg-transparent text-[var(--text-muted)] hover:bg-[var(--surface-hover)] hover:text-[var(--text-primary)]",
|
|
].join(" ");
|
|
|
|
return (
|
|
<Drawer
|
|
open={open}
|
|
onClose={onClose}
|
|
placement="left"
|
|
mask={false}
|
|
closable={false}
|
|
zIndex={60}
|
|
rootClassName="nodrag nopan nowheel w-[352px]"
|
|
styles={{
|
|
section: {
|
|
overflow: "visible",
|
|
borderRight: "1px solid var(--border-subtle)",
|
|
borderRadius: "0 10px 10px 0",
|
|
background: "var(--surface-1)",
|
|
boxShadow: "none",
|
|
},
|
|
body: {
|
|
padding: 0,
|
|
overflow: "visible",
|
|
},
|
|
}}
|
|
>
|
|
<div className="flex h-full min-h-0 flex-col bg-[var(--surface-1)] text-[var(--text-primary)]">
|
|
<div className="flex h-[52px] items-center gap-2 px-4 pt-3">
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
aria-label={t("common.close")}
|
|
className="flex h-7 w-7 items-center justify-center rounded-md text-[var(--text-muted)] transition-colors hover:bg-[var(--surface-hover)] hover:text-[var(--text-primary)]"
|
|
>
|
|
<LeftOutlined />
|
|
</button>
|
|
<h2 className="min-w-0 flex-1 truncate text-[22px] font-semibold leading-7 text-[var(--text-primary)]">
|
|
{t("resourceManager.title")}
|
|
</h2>
|
|
</div>
|
|
|
|
<div className="px-4 pt-3">
|
|
<div className="flex items-center gap-1">
|
|
<button
|
|
type="button"
|
|
className={tabButtonClass("canvas")}
|
|
onClick={() => setActiveTab("canvas")}
|
|
>
|
|
<NodeIndexOutlined className="text-[14px]" />
|
|
<span>{t("resourceManager.tabCanvas")}</span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className={tabButtonClass("assets")}
|
|
onClick={() => setActiveTab("assets")}
|
|
>
|
|
<FolderOpenOutlined className="text-[14px]" />
|
|
<span>{t("resourceManager.tabAssets")}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="min-h-0 flex-1 pt-3">
|
|
{activeTab === "canvas" ? (
|
|
<CanvasOutlinePanel className="px-4 pb-5" />
|
|
) : (
|
|
<AssetLibraryPanel active={open && activeTab === "assets"} />
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Drawer>
|
|
);
|
|
}
|
|
|