47 lines
1.5 KiB
TypeScript
47 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import React, { useCallback } from "react";
|
|
import { Eye } from "lucide-react";
|
|
import { CardRenderer } from "../renderers/CardRenderer";
|
|
import type { ComponentConfig } from "@/types/report";
|
|
import type { QueryResult } from "../renderers/types";
|
|
|
|
interface CardPreviewPanelProps {
|
|
component: ComponentConfig;
|
|
}
|
|
|
|
export function CardPreviewPanel({ component }: CardPreviewPanelProps) {
|
|
const dummyGetQueryResult = useCallback(
|
|
(): QueryResult | null => null,
|
|
[],
|
|
);
|
|
|
|
return (
|
|
<div className="flex flex-col items-center gap-4 p-4 shrink-0">
|
|
<div className="w-full">
|
|
<div className="flex items-center gap-2 mb-1 text-sm font-semibold text-gray-700">
|
|
<Eye className="w-4 h-4 text-blue-600" />
|
|
미리보기 (저장 전 상태)
|
|
</div>
|
|
<p className="text-xs text-muted-foreground">
|
|
실제 데이터는 저장 후 확인 가능합니다.
|
|
</p>
|
|
</div>
|
|
<div className="flex min-h-[600px] w-full items-center justify-center rounded-xl border border-gray-200 bg-gray-100 p-8">
|
|
<div
|
|
className="w-full overflow-hidden rounded-lg border border-gray-300 bg-white shadow-sm"
|
|
style={{
|
|
maxWidth: Math.min(component.width, 700),
|
|
minHeight: Math.min(component.height, 550),
|
|
}}
|
|
>
|
|
<CardRenderer
|
|
component={component}
|
|
getQueryResult={dummyGetQueryResult}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|