120 lines
4.4 KiB
TypeScript
120 lines
4.4 KiB
TypeScript
"use client";
|
||
|
||
import { useState, useEffect } from "react";
|
||
import { Button } from "@/components/ui/button";
|
||
import { Input } from "@/components/ui/input";
|
||
import { Label } from "@/components/ui/label";
|
||
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
|
||
import { DashboardElement } from "../types";
|
||
import { X } from "lucide-react";
|
||
import { cn } from "@/lib/utils";
|
||
|
||
interface YardWidgetConfigSidebarProps {
|
||
element: DashboardElement;
|
||
isOpen: boolean;
|
||
onClose: () => void;
|
||
onApply: (updates: Partial<DashboardElement>) => void;
|
||
}
|
||
|
||
export function YardWidgetConfigSidebar({ element, isOpen, onClose, onApply }: YardWidgetConfigSidebarProps) {
|
||
const [customTitle, setCustomTitle] = useState(element.customTitle || "");
|
||
const [showHeader, setShowHeader] = useState(element.showHeader !== false);
|
||
|
||
useEffect(() => {
|
||
if (isOpen) {
|
||
setCustomTitle(element.customTitle || "");
|
||
setShowHeader(element.showHeader !== false);
|
||
}
|
||
}, [isOpen, element]);
|
||
|
||
const handleApply = () => {
|
||
onApply({
|
||
customTitle,
|
||
showHeader,
|
||
});
|
||
onClose();
|
||
};
|
||
|
||
return (
|
||
<div
|
||
className={cn(
|
||
"fixed top-14 left-0 z-[100] flex h-[calc(100vh-3.5rem)] w-80 flex-col bg-gray-50 transition-transform duration-300 ease-in-out",
|
||
isOpen ? "translate-x-0" : "translate-x-[-100%]",
|
||
)}
|
||
>
|
||
{/* 헤더 */}
|
||
<div className="flex items-center justify-between bg-white px-3 py-2 shadow-sm">
|
||
<div className="flex items-center gap-2">
|
||
<div className="bg-primary/10 flex h-6 w-6 items-center justify-center rounded">
|
||
<span className="text-primary text-xs font-bold">🏗️</span>
|
||
</div>
|
||
<span className="text-xs font-semibold text-gray-900">야드 관리 위젯 설정</span>
|
||
</div>
|
||
<button
|
||
onClick={onClose}
|
||
className="flex h-6 w-6 items-center justify-center rounded transition-colors hover:bg-gray-100"
|
||
>
|
||
<X className="h-3.5 w-3.5 text-gray-500" />
|
||
</button>
|
||
</div>
|
||
|
||
{/* 컨텐츠 */}
|
||
<div className="flex-1 overflow-y-auto p-3">
|
||
<div className="space-y-3">
|
||
{/* 위젯 제목 */}
|
||
<div className="rounded-lg bg-white p-3 shadow-sm">
|
||
<div className="mb-2 text-[10px] font-semibold tracking-wide text-gray-500 uppercase">위젯 제목</div>
|
||
<Input
|
||
value={customTitle}
|
||
onChange={(e) => setCustomTitle(e.target.value)}
|
||
placeholder="제목을 입력하세요 (비워두면 기본 제목 사용)"
|
||
className="h-8 text-xs"
|
||
style={{ fontSize: "12px" }}
|
||
/>
|
||
<p className="mt-1 text-[10px] text-gray-500">기본 제목: 야드 관리 3D</p>
|
||
</div>
|
||
|
||
{/* 헤더 표시 */}
|
||
<div className="rounded-lg bg-white p-3 shadow-sm">
|
||
<div className="mb-2 text-[10px] font-semibold tracking-wide text-gray-500 uppercase">헤더 표시</div>
|
||
<RadioGroup
|
||
value={showHeader ? "show" : "hide"}
|
||
onValueChange={(value) => setShowHeader(value === "show")}
|
||
className="flex items-center gap-3"
|
||
>
|
||
<div className="flex items-center gap-1.5">
|
||
<RadioGroupItem value="show" id="header-show" className="h-3 w-3" />
|
||
<Label htmlFor="header-show" className="cursor-pointer text-[11px] font-normal">
|
||
표시
|
||
</Label>
|
||
</div>
|
||
<div className="flex items-center gap-1.5">
|
||
<RadioGroupItem value="hide" id="header-hide" className="h-3 w-3" />
|
||
<Label htmlFor="header-hide" className="cursor-pointer text-[11px] font-normal">
|
||
숨김
|
||
</Label>
|
||
</div>
|
||
</RadioGroup>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 푸터 */}
|
||
<div className="flex gap-2 bg-white p-2 shadow-[0_-2px_8px_rgba(0,0,0,0.05)]">
|
||
<button
|
||
onClick={onClose}
|
||
className="flex-1 rounded bg-gray-100 py-2 text-xs font-medium text-gray-700 transition-colors hover:bg-gray-200"
|
||
>
|
||
취소
|
||
</button>
|
||
<button
|
||
onClick={handleApply}
|
||
className="bg-primary hover:bg-primary/90 flex-1 rounded py-2 text-xs font-medium text-white transition-colors"
|
||
>
|
||
적용
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|