| 1 | export const CONNECTED_CIRCLE_SIZE_PX = 224; |
| 2 | export const CONNECTED_CIRCLE_GAP_PX = 4; |
| 3 | const PROMOTED_CENTER_OFFSET_PX = 12; |
| 4 | |
| 5 | export function getConnectedCircleItemPosition( |
| 6 | index: number, |
| 7 | total: number, |
| 8 | ): { gridRow: string; gridColumn: string } { |
| 9 | const safeIndex = Math.max(0, index); |
| 10 | const safeTotal = Math.max(1, total); |
| 11 | |
| 12 | if (safeTotal <= 2) { |
| 13 | return { |
| 14 | gridRow: `${safeIndex + 1}`, |
| 15 | gridColumn: "1 / 3", |
| 16 | }; |
| 17 | } |
| 18 | |
| 19 | if (safeTotal % 2 === 1 && safeIndex === safeTotal - 1) { |
| 20 | return { |
| 21 | gridRow: "1", |
| 22 | gridColumn: "1 / 3", |
| 23 | }; |
| 24 | } |
| 25 | |
| 26 | const rowOffset = safeTotal % 2 === 1 ? 2 : 1; |
| 27 | |
| 28 | return { |
| 29 | gridRow: `${Math.floor(safeIndex / 2) + rowOffset}`, |
| 30 | gridColumn: `${(safeIndex % 2) + 1}`, |
| 31 | }; |
| 32 | } |
| 33 | |
| 34 | export function getConnectedCircleItemTransform( |
| 35 | index: number, |
| 36 | total: number, |
| 37 | ): string | undefined { |
| 38 | const safeIndex = Math.max(0, index); |
| 39 | const safeTotal = Math.max(1, total); |
| 40 | const isPromotedCenterItem = |
| 41 | safeTotal > 2 && safeTotal % 2 === 1 && safeIndex === safeTotal - 1; |
| 42 | |
| 43 | return isPromotedCenterItem |
| 44 | ? `translateY(${PROMOTED_CENTER_OFFSET_PX}px)` |
| 45 | : undefined; |
| 46 | } |
| 47 |