aidev
107 lines
2.5 KiB
TypeScript
107 lines
2.5 KiB
TypeScript
/**
|
|
* 알림 팝업 표시 방식 미니 아이콘 (위치 + 배치)
|
|
*/
|
|
import React from 'react';
|
|
import type { TradeAlertPopupLayout, TradeAlertPopupPosition } from '../utils/tradeAlertPopupLayout';
|
|
|
|
interface Props {
|
|
position: TradeAlertPopupPosition;
|
|
layout: TradeAlertPopupLayout;
|
|
size?: number;
|
|
className?: string;
|
|
}
|
|
|
|
/** 화면 프레임 안 카드 배치를 그린 24×18 미니 프리뷰 */
|
|
const ICON_H = 18;
|
|
|
|
function slotOrigin(
|
|
position: TradeAlertPopupPosition,
|
|
cols: number,
|
|
rows: number,
|
|
): { x: number; y: number } {
|
|
const blockW = cols === 1 ? 5 : cols === 3 ? 9.4 : 6.2;
|
|
const blockH = rows === 1 ? 3.2 : rows === 3 ? 10.2 : 6.2;
|
|
|
|
switch (position) {
|
|
case 'left':
|
|
return { x: 2, y: (ICON_H - blockH) / 2 };
|
|
case 'bottom':
|
|
return { x: (24 - blockW) / 2, y: ICON_H - blockH - 1.5 };
|
|
case 'right':
|
|
default:
|
|
return { x: 24 - blockW - 2, y: (ICON_H - blockH) / 2 };
|
|
}
|
|
}
|
|
|
|
export const TradeAlertPopupModeIcon: React.FC<Props> = ({
|
|
position,
|
|
layout,
|
|
size = 22,
|
|
className,
|
|
}) => {
|
|
const w = 24;
|
|
const h = ICON_H;
|
|
const cards: React.ReactNode[] = [];
|
|
|
|
const card = (x: number, y: number, cw: number, ch: number, key: string) => (
|
|
<rect
|
|
key={key}
|
|
x={x}
|
|
y={y}
|
|
width={cw}
|
|
height={ch}
|
|
rx={1}
|
|
fill="currentColor"
|
|
opacity={0.85}
|
|
/>
|
|
);
|
|
|
|
if (layout === 'single') {
|
|
const slots = slotOrigin(position, 1, 1);
|
|
cards.push(card(slots.x, slots.y, 5, 4, 's'));
|
|
} else if (layout === 'strip') {
|
|
const o = slotOrigin(position, 3, 1);
|
|
for (let i = 0; i < 3; i++) {
|
|
cards.push(card(o.x + i * 3.2, o.y, 2.6, 3.2, `h${i}`));
|
|
}
|
|
} else if (layout === 'grid') {
|
|
const o = slotOrigin(position, 2, 2);
|
|
for (let r = 0; r < 2; r++) {
|
|
for (let c = 0; c < 2; c++) {
|
|
cards.push(card(o.x + c * 3.2, o.y + r * 3.4, 2.6, 2.8, `g${r}${c}`));
|
|
}
|
|
}
|
|
} else {
|
|
// stack
|
|
const o = slotOrigin(position, 1, 3);
|
|
for (let i = 0; i < 3; i++) {
|
|
cards.push(card(o.x, o.y + i * 3.4, 5, 2.8, `v${i}`));
|
|
}
|
|
}
|
|
|
|
return (
|
|
<svg
|
|
width={size}
|
|
height={Math.round(size * (h / w))}
|
|
viewBox={`0 0 ${w} ${h}`}
|
|
className={className}
|
|
aria-hidden
|
|
>
|
|
<rect
|
|
x={0.5}
|
|
y={0.5}
|
|
width={w - 1}
|
|
height={h - 1}
|
|
rx={2}
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth={1}
|
|
opacity={0.45}
|
|
/>
|
|
{cards}
|
|
</svg>
|
|
);
|
|
};
|
|
|
|
export default TradeAlertPopupModeIcon;
|