|
| 1 | +import { useSearchParams } from "react-router"; |
| 2 | +import useSWR from "swr"; |
| 3 | +import { Icon } from "../../shared/components/icon"; |
| 4 | +import { StateBanner } from "../../shared/components/state-banner"; |
| 5 | +import { useSettings } from "../../shared/context/settings-context"; |
| 6 | +import { openExternalLink } from "../../shared/lib/external-link"; |
| 7 | +import { api } from "../../shared/lib/ipc"; |
| 8 | +import { catchAsFailed, loadBanner, loadedValue } from "../../shared/lib/load-state"; |
| 9 | +import type { NewsAttachment } from "../../types/api/NewsAttachment"; |
| 10 | + |
| 11 | +function formatTag(tag: string): string { |
| 12 | + return tag |
| 13 | + .toLowerCase() |
| 14 | + .replaceAll("_", " ") |
| 15 | + .replace(/\b\w/g, (letter) => letter.toUpperCase()); |
| 16 | +} |
| 17 | + |
| 18 | +function formatSize(size: number): string { |
| 19 | + if (size < 1024) return `${size} B`; |
| 20 | + if (size < 1024 * 1024) return `${Math.round(size / 1024)} KB`; |
| 21 | + return `${(size / (1024 * 1024)).toFixed(1)} MB`; |
| 22 | +} |
| 23 | + |
| 24 | +function AttachmentRow({ attachment }: { attachment: NewsAttachment }) { |
| 25 | + return ( |
| 26 | + <button |
| 27 | + type="button" |
| 28 | + onClick={() => openExternalLink(attachment.url)} |
| 29 | + className="row-line flex w-full items-center gap-2 px-2 py-2 text-left transition-colors hover:bg-surface-hover" |
| 30 | + > |
| 31 | + <Icon name="link" className="size-3.5 shrink-0 text-text-secondary" /> |
| 32 | + <span className="min-w-0 flex-1 truncate text-[11px] font-medium">{attachment.filename}</span> |
| 33 | + <span className="shrink-0 text-[10px] text-text-muted">{formatSize(attachment.size)}</span> |
| 34 | + </button> |
| 35 | + ); |
| 36 | +} |
| 37 | + |
| 38 | +export function GovernmentUpdateDetail() { |
| 39 | + const { language, t } = useSettings(); |
| 40 | + const [params] = useSearchParams(); |
| 41 | + const id = params.get("id"); |
| 42 | + const { data: state } = useSWR("news", () => catchAsFailed(api.getNews(false))); |
| 43 | + const digest = loadedValue(state); |
| 44 | + const update = digest?.items.find((item) => item.source === "nepalGovernment" && item.id === id); |
| 45 | + const banner = loadBanner(state); |
| 46 | + |
| 47 | + return ( |
| 48 | + <StateBanner state={banner}> |
| 49 | + {!update?.content ? ( |
| 50 | + <div className="surface-card p-2.5"> |
| 51 | + <p className="text-[12px] font-medium">{t("news.official-unavailable")}</p> |
| 52 | + <button |
| 53 | + type="button" |
| 54 | + onClick={() => openExternalLink("https://nepal.gov.np/updates")} |
| 55 | + className="btn-ghost mt-2 -ml-2 text-[11px] text-[color:var(--color-accent-mark)]" |
| 56 | + > |
| 57 | + {t("news.open-government-portal")} ↗ |
| 58 | + </button> |
| 59 | + </div> |
| 60 | + ) : ( |
| 61 | + <article className="px-0.5 pb-1"> |
| 62 | + <p className="text-[10px] font-semibold uppercase tracking-[0.06em] text-[color:var(--color-accent-mark)]"> |
| 63 | + {t("news.government-source")} |
| 64 | + </p> |
| 65 | + <h2 className="mt-1 text-[15px] font-semibold leading-snug text-text">{update.title}</h2> |
| 66 | + |
| 67 | + <div className="mt-2 flex flex-wrap items-center gap-x-1 gap-y-0.5 text-[10px] text-text-muted"> |
| 68 | + {update.department && <span>{update.department}</span>} |
| 69 | + {update.department && update.published && <span>·</span>} |
| 70 | + {update.published && ( |
| 71 | + <time dateTime={update.published}> |
| 72 | + {new Date(update.published).toLocaleString(language === "ne" ? "ne-NP" : "en-GB", { |
| 73 | + day: "numeric", |
| 74 | + month: "short", |
| 75 | + hour: "numeric", |
| 76 | + minute: "2-digit", |
| 77 | + timeZone: "Asia/Kathmandu", |
| 78 | + })} |
| 79 | + </time> |
| 80 | + )} |
| 81 | + </div> |
| 82 | + |
| 83 | + {update.tags.length > 0 && ( |
| 84 | + <p className="mt-1 text-[10px] text-text-secondary"> |
| 85 | + {update.tags.map(formatTag).join(" · ")} |
| 86 | + </p> |
| 87 | + )} |
| 88 | + |
| 89 | + <div className="section-divider mt-3 space-y-2.5 pt-3 text-[12px] leading-relaxed text-text-secondary select-text"> |
| 90 | + {update.content |
| 91 | + .split(/\n\s*\n/) |
| 92 | + .filter(Boolean) |
| 93 | + .map((paragraph) => ( |
| 94 | + <p key={paragraph} className="whitespace-pre-line"> |
| 95 | + {paragraph} |
| 96 | + </p> |
| 97 | + ))} |
| 98 | + </div> |
| 99 | + |
| 100 | + {update.attachments.length > 0 && ( |
| 101 | + <section className="mt-3"> |
| 102 | + <h3 className="mb-1.5 text-[11px] font-semibold text-text-secondary"> |
| 103 | + {t("news.attachments")} |
| 104 | + </h3> |
| 105 | + <div className="surface-card list-rows overflow-hidden"> |
| 106 | + {update.attachments.map((attachment) => ( |
| 107 | + <AttachmentRow key={attachment.id} attachment={attachment} /> |
| 108 | + ))} |
| 109 | + </div> |
| 110 | + </section> |
| 111 | + )} |
| 112 | + |
| 113 | + <button |
| 114 | + type="button" |
| 115 | + onClick={() => openExternalLink(update.link)} |
| 116 | + className="btn-ghost mt-3 -ml-2 text-[11px] text-[color:var(--color-accent-mark)]" |
| 117 | + > |
| 118 | + {t("news.open-government-portal")} ↗ |
| 119 | + </button> |
| 120 | + </article> |
| 121 | + )} |
| 122 | + </StateBanner> |
| 123 | + ); |
| 124 | +} |
0 commit comments