3be5714805
DynamicItemForm 개선: - 품목코드 자동생성 기능 추가 - 조건부 표시 로직 개선 - 불필요한 컴포넌트 정리 (DynamicField, DynamicSection 등) - 타입 시스템 단순화 새로운 기능: - Sales 페이지 마이그레이션 (견적관리, 거래처관리) - 공통 컴포넌트 추가 (atoms, molecules, organisms, templates) 문서화: - 구현 문서 및 참조 문서 추가 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
51 lines
1.2 KiB
TypeScript
51 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import { LucideIcon } from "lucide-react";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface IconWithBadgeProps {
|
|
icon: LucideIcon;
|
|
iconColor?: string;
|
|
iconBgColor?: string;
|
|
label?: string;
|
|
badge?: {
|
|
label: string;
|
|
variant?: "default" | "secondary" | "destructive" | "outline";
|
|
className?: string;
|
|
};
|
|
size?: "sm" | "md" | "lg";
|
|
}
|
|
|
|
export const IconWithBadge = ({
|
|
icon: Icon,
|
|
iconColor = "text-blue-600",
|
|
iconBgColor = "bg-blue-100",
|
|
label,
|
|
badge,
|
|
size = "md"
|
|
}: IconWithBadgeProps) => {
|
|
const sizeClasses = {
|
|
sm: { container: "w-6 h-6", icon: "w-3 h-3" },
|
|
md: { container: "w-8 h-8", icon: "w-4 h-4" },
|
|
lg: { container: "w-10 h-10", icon: "w-5 h-5" }
|
|
};
|
|
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
<div className={cn(
|
|
"rounded-lg flex items-center justify-center",
|
|
iconBgColor,
|
|
sizeClasses[size].container
|
|
)}>
|
|
<Icon className={cn(iconColor, sizeClasses[size].icon)} />
|
|
</div>
|
|
{label && <span className="font-medium">{label}</span>}
|
|
{badge && (
|
|
<Badge variant={badge.variant} className={badge.className}>
|
|
{badge.label}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
);
|
|
}; |