|
| 1 | +import { Chip, cn } from '@sim/emcn' |
| 2 | +import { EmptyState } from '@/components/empty-state/empty-state' |
| 3 | +import { HAIRLINE } from '@/app/workspace/[workspaceId]/components/resource/components/resource-empty-state/hairline' |
| 4 | +import { MASK_NO_REPEAT } from '@/app/workspace/[workspaceId]/components/resource/components/resource-empty-state/mask' |
| 5 | + |
| 6 | +/** |
| 7 | + * Skeleton ink — see the `INK` note in `tables-empty-state.tsx` for why not the surface |
| 8 | + * ramp. `mark` is the tables selection ring's opaque mix, so the held link reads as the |
| 9 | + * one drawn shortcut rather than more placeholder. |
| 10 | + */ |
| 11 | +const INK = { |
| 12 | + title: 'color-mix(in srgb, var(--text-secondary) 30%, transparent)', |
| 13 | + detail: 'color-mix(in srgb, var(--text-secondary) 15%, transparent)', |
| 14 | + mark: 'color-mix(in srgb, var(--text-secondary) 46%, var(--bg))', |
| 15 | +} as const |
| 16 | + |
| 17 | +/** The logs feed's falloff — a link directory is the same repeating structure. */ |
| 18 | +const DIRECTORY_FADE = |
| 19 | + '[-webkit-mask-image:linear-gradient(to_bottom,#000_44%,transparent_100%)] [mask-image:linear-gradient(to_bottom,#000_44%,transparent_100%)]' |
| 20 | + |
| 21 | +interface LinkRow { |
| 22 | + name: number |
| 23 | + destination: number |
| 24 | +} |
| 25 | + |
| 26 | +/** The held link sits second, inside the fade's opaque head, so its card never dissolves. */ |
| 27 | +const ROWS: readonly LinkRow[] = [ |
| 28 | + { name: 54, destination: 132 }, |
| 29 | + { name: 70, destination: 108 }, |
| 30 | + { name: 46, destination: 140 }, |
| 31 | + { name: 62, destination: 118 }, |
| 32 | +] as const |
| 33 | + |
| 34 | +const HELD_ROW = 1 |
| 35 | +const ROW_PITCH = 38 |
| 36 | +const PILL_X = 12 |
| 37 | +const PILL_PADDING = 10 |
| 38 | + |
| 39 | +/** A link directory: short names pointing at their destinations, one held in a card. */ |
| 40 | +function SimLinksGraphic() { |
| 41 | + return ( |
| 42 | + <svg |
| 43 | + viewBox='0 0 286 148' |
| 44 | + width={286} |
| 45 | + height={148} |
| 46 | + fill='none' |
| 47 | + aria-hidden='true' |
| 48 | + focusable='false' |
| 49 | + className={cn('block max-w-none shrink-0', DIRECTORY_FADE, MASK_NO_REPEAT)} |
| 50 | + > |
| 51 | + {ROWS.map((row, index) => { |
| 52 | + const y = 6 + index * ROW_PITCH |
| 53 | + const held = index === HELD_ROW |
| 54 | + const ink = held ? INK.mark : INK.title |
| 55 | + const arrowX = PILL_X + row.name + PILL_PADDING * 2 + 10 |
| 56 | + return ( |
| 57 | + <g key={y}> |
| 58 | + {held ? ( |
| 59 | + <rect |
| 60 | + x='0.5' |
| 61 | + y={y - 2} |
| 62 | + width='285' |
| 63 | + height='36' |
| 64 | + rx='8' |
| 65 | + fill='var(--surface-2)' |
| 66 | + {...HAIRLINE} |
| 67 | + /> |
| 68 | + ) : null} |
| 69 | + <rect |
| 70 | + x={PILL_X} |
| 71 | + y={y + 8} |
| 72 | + width={row.name + PILL_PADDING * 2} |
| 73 | + height='16' |
| 74 | + rx='8' |
| 75 | + fill='var(--surface-2)' |
| 76 | + stroke={held ? INK.mark : 'var(--border)'} |
| 77 | + strokeWidth={held ? 1.4 : HAIRLINE.strokeWidth} |
| 78 | + /> |
| 79 | + <rect |
| 80 | + x={PILL_X + PILL_PADDING} |
| 81 | + y={y + 14} |
| 82 | + width={row.name} |
| 83 | + height='4' |
| 84 | + rx='2' |
| 85 | + fill={ink} |
| 86 | + /> |
| 87 | + <path |
| 88 | + d={`M ${arrowX} ${y + 16} H ${arrowX + 18} M ${arrowX + 13} ${y + 11.5} L ${arrowX + 18} ${y + 16} L ${arrowX + 13} ${y + 20.5}`} |
| 89 | + stroke={ink} |
| 90 | + strokeWidth={1.4} |
| 91 | + strokeLinecap='round' |
| 92 | + strokeLinejoin='round' |
| 93 | + /> |
| 94 | + <rect |
| 95 | + x={arrowX + 28} |
| 96 | + y={y + 14} |
| 97 | + width={row.destination} |
| 98 | + height='4' |
| 99 | + rx='2' |
| 100 | + fill={INK.detail} |
| 101 | + /> |
| 102 | + </g> |
| 103 | + ) |
| 104 | + })} |
| 105 | + </svg> |
| 106 | + ) |
| 107 | +} |
| 108 | + |
| 109 | +interface SimLinksEmptyStateProps { |
| 110 | + onCreate: () => void |
| 111 | +} |
| 112 | + |
| 113 | +/** Empty state for an organization with no Sim links yet. */ |
| 114 | +export function SimLinksEmptyState({ onCreate }: SimLinksEmptyStateProps) { |
| 115 | + return ( |
| 116 | + <EmptyState |
| 117 | + graphic={<SimLinksGraphic />} |
| 118 | + title='Sim Links' |
| 119 | + description='Create links like sim/handbook for the pages your team opens most.' |
| 120 | + action={ |
| 121 | + <Chip variant='primary' onClick={onCreate}> |
| 122 | + New link |
| 123 | + </Chip> |
| 124 | + } |
| 125 | + /> |
| 126 | + ) |
| 127 | +} |
0 commit comments