192 lines
8.4 KiB
TypeScript
192 lines
8.4 KiB
TypeScript
import wingCompGearIcon from '../../../assets/icons/wing-comp-gear.svg';
|
|
import wingCompSearchIcon from '../../../assets/icons/wing-comp-search.svg';
|
|
import wingCompCloseIcon from '../../../assets/icons/wing-comp-close.svg';
|
|
import wingCompMenuIcon from '../../../assets/icons/wing-comp-menu.svg';
|
|
|
|
interface IconButtonItem {
|
|
icon: string;
|
|
label: string;
|
|
}
|
|
|
|
interface StatusBadge {
|
|
label: string;
|
|
color: string;
|
|
bg: string;
|
|
}
|
|
|
|
interface DataTag {
|
|
label: string;
|
|
color: string;
|
|
dotColor: string;
|
|
bg: string;
|
|
}
|
|
|
|
const iconButtons: IconButtonItem[] = [
|
|
{ icon: wingCompGearIcon, label: 'Settings' },
|
|
{ icon: wingCompSearchIcon, label: 'Search' },
|
|
{ icon: wingCompCloseIcon, label: 'Close' },
|
|
{ icon: wingCompMenuIcon, label: 'Menu' },
|
|
];
|
|
|
|
const statusBadges: StatusBadge[] = [
|
|
{ label: '정상', color: '#22c55e', bg: 'rgba(34,197,94,0.10)' },
|
|
{ label: '주의', color: '#eab308', bg: 'rgba(234,179,8,0.10)' },
|
|
{ label: '위험', color: '#ef4444', bg: 'rgba(239,68,68,0.10)' },
|
|
{ label: '진행중', color: '#3b82f6', bg: 'rgba(59,130,246,0.10)' },
|
|
{ label: '완료', color: '#9ba3b8', bg: 'rgba(155,163,184,0.10)' },
|
|
];
|
|
|
|
const dataTags: DataTag[] = [
|
|
{ label: 'VESSEL_A', color: '#22c55e', dotColor: '#22c55e', bg: 'rgba(34,197,94,0.10)' },
|
|
{ label: 'PRIORITY_H', color: '#eab308', dotColor: '#eab308', bg: 'rgba(234,179,8,0.10)' },
|
|
{ label: 'CRITICAL_ERR', color: '#ef4444', dotColor: '#ef4444', bg: 'rgba(239,68,68,0.10)' },
|
|
{ label: 'ACTIVE_SYNC', color: '#3b82f6', dotColor: '#3b82f6', bg: 'rgba(59,130,246,0.10)' },
|
|
];
|
|
|
|
export const IconBadgeSection = () => {
|
|
return (
|
|
<div
|
|
className="grid gap-8 w-full"
|
|
style={{
|
|
gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
|
|
}}
|
|
>
|
|
{/* 좌측 카드: 제어 인터페이스 — 아이콘 버튼 */}
|
|
<div
|
|
className="bg-[#1a2236] rounded-[10px] border border-[#1e2a42] flex flex-col gap-0 items-start justify-start relative overflow-hidden"
|
|
style={{ gridColumn: '1 / span 1', gridRow: '1 / span 1' }}
|
|
>
|
|
{/* 카드 헤더 */}
|
|
<div className="border-b border-[#1e2a42] pt-4 pr-6 pb-4 pl-6 flex flex-row gap-3 items-center justify-start self-stretch shrink-0 relative">
|
|
<div className="bg-[#e89337] rounded-xl shrink-0 w-1 h-4 relative"></div>
|
|
<div className="flex flex-col gap-0 items-start justify-start shrink-0 relative">
|
|
<div
|
|
className="text-[#22d3ee] text-left font-korean text-xs leading-4 font-medium uppercase relative flex items-center justify-start"
|
|
style={{ letterSpacing: '1.2px' }}
|
|
>
|
|
마이크로 컨트롤: 아이콘 버튼
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 아이콘 버튼 목록 */}
|
|
<div className="p-8 flex flex-row gap-6 items-start justify-evenly self-stretch shrink-0 relative">
|
|
{iconButtons.map((btn) => (
|
|
<div
|
|
key={btn.label}
|
|
className="flex flex-col gap-3 items-center justify-start self-stretch shrink-0 relative"
|
|
>
|
|
<div className="bg-[#1a2236] rounded-md border border-[#1e2a42] flex flex-row gap-0 items-center justify-center shrink-0 w-9 h-9 relative">
|
|
<img
|
|
className="shrink-0 relative overflow-visible"
|
|
src={btn.icon}
|
|
alt={btn.label}
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col gap-0 items-start justify-start shrink-0 relative">
|
|
<div
|
|
className="text-[#64748b] text-left font-sans font-bold text-caption leading-[15px] uppercase relative flex items-center justify-start"
|
|
style={{ letterSpacing: '0.9px' }}
|
|
>
|
|
{btn.label}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* 카드 푸터 */}
|
|
<div className="bg-[rgba(15,23,42,0.30)] pt-4 pr-6 pb-4 pl-6 flex flex-col gap-0 items-start justify-start self-stretch shrink-0 relative">
|
|
<div className="text-[#64748b] text-left font-sans text-caption leading-[15px] font-normal relative flex items-center justify-start">
|
|
Standard dimensions: 36x36px with radius-md (6px)
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 우측 카드: 마이크로 컨트롤 — 뱃지 & 태그 */}
|
|
<div
|
|
className="bg-[#1a2236] rounded-[10px] border border-[#1e2a42] flex flex-col gap-0 items-start justify-start relative overflow-hidden"
|
|
style={{ gridColumn: '2 / span 1', gridRow: '1 / span 1' }}
|
|
>
|
|
{/* 카드 헤더 */}
|
|
<div className="border-b border-[#1e2a42] pt-4 pr-6 pb-4 pl-6 flex flex-row gap-3 items-center justify-start self-stretch shrink-0 relative">
|
|
<div className="bg-[#93000a] rounded-xl shrink-0 w-1 h-4 relative"></div>
|
|
<div className="flex flex-col gap-0 items-start justify-start shrink-0 relative">
|
|
<div
|
|
className="text-[#22d3ee] text-left font-korean text-xs leading-4 font-medium uppercase relative flex items-center justify-start"
|
|
style={{ letterSpacing: '1.2px' }}
|
|
>
|
|
마이크로 컨트롤: 아이콘 버튼
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 카드 바디 */}
|
|
<div className="p-6 flex flex-col gap-8 items-start justify-start self-stretch shrink-0 relative">
|
|
{/* Operational Status 섹션 */}
|
|
<div className="flex flex-col gap-4 items-start justify-start self-stretch shrink-0 relative">
|
|
<div className="border-l-2 border-[#0e7490] pl-3 flex flex-col gap-0 items-start justify-start self-stretch shrink-0 relative">
|
|
<div
|
|
className="text-[#64748b] text-left font-sans font-bold text-caption leading-[15px] uppercase relative flex items-center justify-start"
|
|
style={{ letterSpacing: '1px' }}
|
|
>
|
|
Operational Status
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-row gap-3 items-start justify-start self-stretch shrink-0 relative">
|
|
{statusBadges.map((badge) => (
|
|
<div
|
|
key={badge.label}
|
|
className="rounded-xl pt-0.5 pr-2 pb-0.5 pl-2 flex flex-col gap-0 items-start justify-start self-stretch shrink-0 relative"
|
|
style={{ backgroundColor: badge.bg }}
|
|
>
|
|
<div
|
|
className="text-left font-korean text-caption leading-[15px] font-medium relative flex items-center justify-start"
|
|
style={{ color: badge.color }}
|
|
>
|
|
{badge.label}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Data Classification 섹션 */}
|
|
<div className="flex flex-col gap-4 items-start justify-start self-stretch shrink-0 relative">
|
|
<div className="border-l-2 border-[#0e7490] pl-3 flex flex-col gap-0 items-start justify-start self-stretch shrink-0 relative">
|
|
<div
|
|
className="text-[#64748b] text-left font-sans font-bold text-caption leading-[15px] uppercase relative flex items-center justify-start"
|
|
style={{ letterSpacing: '1px' }}
|
|
>
|
|
Data Classification
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-row gap-4 items-start justify-start self-stretch shrink-0 relative">
|
|
{dataTags.map((tag) => (
|
|
<div
|
|
key={tag.label}
|
|
className="rounded-xl pt-0.5 pr-2 pb-0.5 pl-2 flex flex-row gap-2 items-center justify-start self-stretch shrink-0 relative"
|
|
style={{ backgroundColor: tag.bg }}
|
|
>
|
|
<div
|
|
className="rounded-xl shrink-0 w-1.5 h-1.5 relative"
|
|
style={{ backgroundColor: tag.dotColor }}
|
|
></div>
|
|
<div className="flex flex-col gap-0 items-start justify-start shrink-0 relative">
|
|
<div
|
|
className="text-left font-sans font-bold text-caption leading-[15px] relative flex items-center justify-start"
|
|
style={{ color: tag.color }}
|
|
>
|
|
{tag.label}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|