52 lines
1.5 KiB
TypeScript
52 lines
1.5 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import React from "react";
|
||
|
|
import { ComponentData } from "@/types/screen";
|
||
|
|
import { componentRegistry, ComponentRenderer } from "../DynamicComponentRenderer";
|
||
|
|
import {
|
||
|
|
Breadcrumb,
|
||
|
|
BreadcrumbItem,
|
||
|
|
BreadcrumbLink,
|
||
|
|
BreadcrumbList,
|
||
|
|
BreadcrumbPage,
|
||
|
|
BreadcrumbSeparator,
|
||
|
|
} from "@/components/ui/breadcrumb";
|
||
|
|
|
||
|
|
// 브레드크럼 컴포넌트 렌더러
|
||
|
|
const BreadcrumbRenderer: ComponentRenderer = ({ component, ...props }) => {
|
||
|
|
const config = component.componentConfig || {};
|
||
|
|
const {
|
||
|
|
items = [{ label: "홈", href: "/" }, { label: "관리자", href: "/admin" }, { label: "현재 페이지" }],
|
||
|
|
separator = "/",
|
||
|
|
style = {},
|
||
|
|
} = config;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex h-full w-full items-center p-2" style={style}>
|
||
|
|
<Breadcrumb>
|
||
|
|
<BreadcrumbList>
|
||
|
|
{items.map((item: any, index: number) => (
|
||
|
|
<React.Fragment key={index}>
|
||
|
|
<BreadcrumbItem>
|
||
|
|
{index === items.length - 1 ? (
|
||
|
|
<BreadcrumbPage>{item.label}</BreadcrumbPage>
|
||
|
|
) : (
|
||
|
|
<BreadcrumbLink href={item.href || "#"} className="pointer-events-none">
|
||
|
|
{item.label}
|
||
|
|
</BreadcrumbLink>
|
||
|
|
)}
|
||
|
|
</BreadcrumbItem>
|
||
|
|
{index < items.length - 1 && <BreadcrumbSeparator />}
|
||
|
|
</React.Fragment>
|
||
|
|
))}
|
||
|
|
</BreadcrumbList>
|
||
|
|
</Breadcrumb>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
// 레지스트리에 등록
|
||
|
|
componentRegistry.register("breadcrumb", BreadcrumbRenderer);
|
||
|
|
|
||
|
|
export { BreadcrumbRenderer };
|