83 lines
2.7 KiB
TypeScript
83 lines
2.7 KiB
TypeScript
"use client";
|
||
|
||
import React from "react";
|
||
import { Button } from "@/components/ui/button";
|
||
import { Database, ArrowLeft, Save, Monitor, Smartphone } from "lucide-react";
|
||
import { ScreenResolution } from "@/types/screen";
|
||
|
||
interface SlimToolbarProps {
|
||
screenName?: string;
|
||
tableName?: string;
|
||
screenResolution?: ScreenResolution;
|
||
onBack: () => void;
|
||
onSave: () => void;
|
||
isSaving?: boolean;
|
||
onPreview?: () => void;
|
||
}
|
||
|
||
export const SlimToolbar: React.FC<SlimToolbarProps> = ({
|
||
screenName,
|
||
tableName,
|
||
screenResolution,
|
||
onBack,
|
||
onSave,
|
||
isSaving = false,
|
||
onPreview,
|
||
}) => {
|
||
return (
|
||
<div className="flex h-14 items-center justify-between border-b border-gray-200 bg-gradient-to-r from-gray-50 to-white px-4 shadow-sm">
|
||
{/* 좌측: 네비게이션 및 화면 정보 */}
|
||
<div className="flex items-center space-x-4">
|
||
<Button variant="ghost" size="sm" onClick={onBack} className="flex items-center space-x-2">
|
||
<ArrowLeft className="h-4 w-4" />
|
||
<span>목록으로</span>
|
||
</Button>
|
||
|
||
<div className="h-6 w-px bg-gray-300" />
|
||
|
||
<div className="flex items-center space-x-3">
|
||
<div>
|
||
<h1 className="text-lg font-semibold text-gray-900">{screenName || "화면 설계"}</h1>
|
||
{tableName && (
|
||
<div className="mt-0.5 flex items-center space-x-1">
|
||
<Database className="h-3 w-3 text-gray-500" />
|
||
<span className="font-mono text-xs text-gray-500">{tableName}</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 해상도 정보 표시 */}
|
||
{screenResolution && (
|
||
<>
|
||
<div className="h-6 w-px bg-gray-300" />
|
||
<div className="flex items-center space-x-2 rounded-md bg-blue-50 px-3 py-1.5">
|
||
<Monitor className="h-4 w-4 text-blue-600" />
|
||
<span className="text-sm font-medium text-blue-900">{screenResolution.name}</span>
|
||
<span className="text-xs text-blue-600">
|
||
({screenResolution.width} × {screenResolution.height})
|
||
</span>
|
||
</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
|
||
{/* 우측: 버튼들 */}
|
||
<div className="flex items-center space-x-2">
|
||
{onPreview && (
|
||
<Button variant="outline" onClick={onPreview} className="flex items-center space-x-2">
|
||
<Smartphone className="h-4 w-4" />
|
||
<span>반응형 미리보기</span>
|
||
</Button>
|
||
)}
|
||
<Button onClick={onSave} disabled={isSaving} className="flex items-center space-x-2">
|
||
<Save className="h-4 w-4" />
|
||
<span>{isSaving ? "저장 중..." : "저장"}</span>
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default SlimToolbar;
|