mirror of
https://github.com/kennethnym/aris.git
synced 2026-03-21 09:31:18 +00:00
feat(tfl): add FeedItemRenderer for TfL alerts (#73)
* feat(tfl): add FeedItemRenderer for TfL alerts Implement renderTflAlert using JRX and @aelis/components. Upgrade @nym.sh/jrx to 0.2.0 for null child support. Co-authored-by: Ona <no-reply@ona.com> * fix(tfl): add jsxImportSource pragma for CI The CI test runner doesn't use per-package tsconfig.json, so the pragma is needed alongside the tsconfig setting. Co-authored-by: Ona <no-reply@ona.com> * fix(ci): run tests per-package via bun run test Use 'bun run test' (which runs 'bun run --filter * test') instead of 'bun test' so each package runs tests from its own directory. Add jsxImportSource pragma to renderer files since consumers without a JRX tsconfig also import them. Co-authored-by: Ona <no-reply@ona.com> * fix(tfl): handle near-1km boundary in formatDistance Values like 0.9999km rounded to 1000m and displayed as '1000m away'. Now converts to meters first and switches to km format when rounded meters >= 1000. Co-authored-by: Ona <no-reply@ona.com> --------- Co-authored-by: Ona <no-reply@ona.com>
This commit is contained in:
40
packages/aelis-source-tfl/src/renderer.tsx
Normal file
40
packages/aelis-source-tfl/src/renderer.tsx
Normal file
@@ -0,0 +1,40 @@
|
||||
/** @jsxImportSource @nym.sh/jrx */
|
||||
import type { FeedItemRenderer } from "@aelis/core"
|
||||
|
||||
import { FeedCard, SansSerifText } from "@aelis/components"
|
||||
|
||||
import type { TflAlertData } from "./types.ts"
|
||||
|
||||
import { TflAlertSeverity } from "./types.ts"
|
||||
|
||||
const SEVERITY_LABEL: Record<TflAlertSeverity, string> = {
|
||||
[TflAlertSeverity.Closure]: "Closed",
|
||||
[TflAlertSeverity.MajorDelays]: "Major delays",
|
||||
[TflAlertSeverity.MinorDelays]: "Minor delays",
|
||||
}
|
||||
|
||||
function formatDistance(km: number): string {
|
||||
const meters = Math.round(km * 1000)
|
||||
if (meters < 1000) {
|
||||
return `${meters}m away`
|
||||
}
|
||||
return `${(meters / 1000).toFixed(1)}km away`
|
||||
}
|
||||
|
||||
export const renderTflAlert: FeedItemRenderer<"tfl-alert", TflAlertData> = (item) => {
|
||||
const { lineName, severity, description, closestStationDistance } = item.data
|
||||
const severityLabel = SEVERITY_LABEL[severity]
|
||||
|
||||
return (
|
||||
<FeedCard>
|
||||
<SansSerifText content={`${lineName} · ${severityLabel}`} style="text-base font-semibold" />
|
||||
<SansSerifText content={description} style="text-sm" />
|
||||
{closestStationDistance !== null ? (
|
||||
<SansSerifText
|
||||
content={`Nearest station: ${formatDistance(closestStationDistance)}`}
|
||||
style="text-xs text-stone-500"
|
||||
/>
|
||||
) : null}
|
||||
</FeedCard>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user