Chore/top component context wrapping

client/src/app/features/top/cards/HeritageCard.tsx

@@ -1,6 +1,8 @@
 import type { ReactNode, MouseEvent } from "react";
 import type { WorldHeritageVm, CriteriaCode } from "../../../../domain/types.ts";
 import { BaseCard } from "@shared/uis/BaseCard.tsx";
+import { useLocale } from "@shared/locale/LocaleHooks.ts";
+import { useText } from "@shared/locale/ui-text.ts";
 
 function MetaChip({ children }: { children: ReactNode }) {
   return (
@@ -40,6 +42,9 @@ export function HeritageCard({
   item: WorldHeritageVm;
   onClickItem?: (id: number) => void;
 }) {
+  const { locale } = useLocale();
+  const text = useText();
+
   const goDetail = () => {
     if (!onClickItem) return;
     onClickItem(item.id);
@@ -54,7 +59,7 @@ export function HeritageCard({
     goDetail();
   };
 
-  const title = item.heritageNameJp || "World Heritage";
+  const title = locale === "ja" && item.heritageNameJp ? item.heritageNameJp : item.name;
   const subtitle = item.subtitle ?? "";
   const desc = (item.shortDescription ?? "").trim();
 
@@ -74,7 +79,7 @@ export function HeritageCard({
             />
           ) : (
             <div className="grid h-56 w-full place-items-center bg-zinc-100 text-sm text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400 sm:h-64 lg:h-72">
-              No image
+              {text.noImage}
             </div>
           )}
 
@@ -83,7 +88,7 @@ export function HeritageCard({
           {item.isEndangered && (
             <div className="absolute right-3 bottom-3">
               <span className="inline-flex items-center rounded-md bg-red-600 px-2 py-1 text-xs font-bold text-white shadow-sm">
-                DANGER
+                {text.danger}
               </span>
             </div>
           )}
@@ -101,7 +106,7 @@ export function HeritageCard({
             {item.category && (
               <div className="flex flex-col gap-1">
                 <span className="text-[10px] uppercase tracking-wider text-zinc-500 dark:text-zinc-400 font-bold">
-                  Heritage Category
+                  {text.heritageCategory}
                 </span>
                 <div>
                   <TagChip>{item.category}</TagChip>
@@ -112,7 +117,7 @@ export function HeritageCard({
             {criteria.length > 0 && (
               <div className="flex flex-col gap-1">
                 <span className="text-[10px] uppercase tracking-wider text-zinc-500 dark:text-zinc-400 font-bold">
-                  Criteria
+                  {text.criteria}
                 </span>
                 <div className="flex flex-wrap gap-1.5">
                   {criteria.map((c: CriteriaCode) => (
@@ -134,7 +139,7 @@ export function HeritageCard({
               {desc}
             </p>
           ) : (
-            <p className="text-sm text-zinc-500 dark:text-zinc-400">No overview available.</p>
+            <p className="text-sm text-zinc-500 dark:text-zinc-400">{text.noOverview}</p>
           )}
           <div className="mt-auto flex items-center justify-between pt-2 border-t border-zinc-100 dark:border-zinc-800">
             <span className="text-xs text-zinc-500 dark:text-zinc-400" aria-hidden="true">
@@ -145,7 +150,7 @@ export function HeritageCard({
               onClick={handleViewDetailClick}
               className="inline-flex items-center gap-1 text-sm font-medium text-indigo-600 hover:underline dark:text-indigo-400"
             >
-              View details <span>→</span>
+              {text.viewDetails} <span>→</span>
             </button>
           </div>
         </div>

client/src/app/features/top/components/heritage-detail/HeritageDetailLayout.tsx

@@ -11,6 +11,7 @@ import { textType } from "@shared/styles/typography";
 import { useSetBreadcrumbLabel } from "@features/breadcrumbs/BreadCrumbHooks.ts";
 import { BreadcrumbList } from "@shared/components/BreadcrumbList.tsx";
 import { useLocale } from "@shared/locale/LocaleHooks.ts";
+import { useText } from "@shared/locale/ui-text.ts";
 
 const DEFAULT_SEARCH: SearchValues = {
   region: "",
@@ -20,12 +21,6 @@ const DEFAULT_SEARCH: SearchValues = {
   yearInscribedTo: "",
 };
 
-const TABS: readonly { label: string; href: `#${string}` }[] = [
-  { label: "Description", href: "#content" },
-  { label: "Maps", href: "#geo-map" },
-  { label: "Gallery", href: "#gallery" },
-] as const;
-
 const formatCriteriaInline = (criteria: string[] | undefined) =>
   criteria?.length ? criteria.map((c) => `(${c})`).join("") : "—";
 
@@ -59,30 +54,31 @@ function HeritageDetailTabs({
 
 // Key exam info: visible without scrolling on all screen sizes.
 function KeyExamInfo({ item }: { item: WorldHeritageDetailVm }) {
+  const t = useText();
   return (
     <div className="mx-auto w-full max-w-6xl px-4 mt-4">
       <div className="flex flex-wrap gap-x-6 gap-y-2">
         <div>
           <div className="text-[10px] font-semibold text-zinc-400 uppercase tracking-wide">
-            Region
+            {t.region}
           </div>
           <div className="text-sm font-semibold text-zinc-900">{item.region ?? "—"}</div>
         </div>
         <div>
           <div className="text-[10px] font-semibold text-zinc-400 uppercase tracking-wide">
-            Category
+            {t.category}
           </div>
           <div className="text-sm font-semibold text-zinc-900">{item.category ?? "—"}</div>
         </div>
         <div>
           <div className="text-[10px] font-semibold text-zinc-400 uppercase tracking-wide">
-            Year Inscribed
+            {t.yearInscribed}
           </div>
           <div className="text-sm font-semibold text-zinc-900">{item.yearInscribed ?? "—"}</div>
         </div>
         <div>
           <div className="text-[10px] font-semibold text-zinc-400 uppercase tracking-wide">
-            Criteria
+            {t.criteria}
           </div>
           <div className="text-sm font-semibold text-zinc-900">
             {formatCriteriaInline(item.criteria)}
@@ -98,6 +94,12 @@ export function HeritageDetailLayout({ item }: { item: WorldHeritageDetailVm })
   const setLabel = useSetBreadcrumbLabel();
   const navigate = useNavigate();
   const { locale, toggleLocale } = useLocale();
+  const t = useText();
+  const tabs: readonly { label: string; href: `#${string}` }[] = [
+    { label: t.description, href: "#content" },
+    { label: t.maps, href: "#geo-map" },
+    { label: t.gallery, href: "#gallery" },
+  ];
 
   const handleSubmit = (q: Partial<SearchValues>) => {
     const next = { ...search, ...q };
@@ -124,7 +126,7 @@ export function HeritageDetailLayout({ item }: { item: WorldHeritageDetailVm })
       <HeritageSubHeader value={search} onChange={setSearch} onSubmit={handleSubmit} />
 
       <div className="mx-auto w-full max-w-6xl px-4 mt-6 md:mt-8 flex items-center justify-between">
-        <HeritageDetailTabs items={TABS} />
+        <HeritageDetailTabs items={tabs} />
         <button
           onClick={toggleLocale}
           className="rounded-full border border-zinc-200 px-3 py-1.5 text-xs font-semibold text-zinc-700 hover:bg-zinc-100 shrink-0"

client/src/app/features/top/components/heritage-detail/HeritageHero.tsx

@@ -1,8 +1,10 @@
 import type { WorldHeritageDetailVm, WorldHeritageImageVm } from "../../../../../domain/types.ts";
 import { useLocale } from "@shared/locale/LocaleHooks.ts";
+import { useText } from "@shared/locale/ui-text.ts";
 
 export function HeritageHero({ item }: { item: WorldHeritageDetailVm }) {
   const { locale } = useLocale();
+  const t = useText();
   const primaryImage: WorldHeritageImageVm | undefined =
     item.images.find((img) => img.isPrimary) ?? item.images[0];
 
@@ -57,7 +59,7 @@ export function HeritageHero({ item }: { item: WorldHeritageDetailVm }) {
                     rel="noreferrer"
                     className="shrink-0 font-semibold text-zinc-700 hover:underline"
                   >
-                    View on UNESCO
+                    {t.viewOnUnesco}
                   </a>
                 )}
               </figcaption>

client/src/app/features/top/components/heritage-detail/HeritageOverviewSection.tsx

@@ -1,17 +1,19 @@
 import type { WorldHeritageDetailVm } from "../../../../../domain/types.ts";
 import { textType } from "@shared/styles/typography.ts";
 import { useLocale } from "@shared/locale/LocaleHooks.ts";
+import { useText } from "@shared/locale/ui-text.ts";
 
 export function HeritageOverViewSection({ item }: { item: WorldHeritageDetailVm }) {
   const { locale } = useLocale();
+  const t = useText();
   return (
     <section
       id="overview"
       className="rounded-3xl border border-zinc-200 bg-white shadow-sm px-5 py-6 md:px-8 md:py-8"
     >
       <div className="flex items-start justify-between gap-3">
         <div className="min-w-0">
-          <h2 className={`${textType.h2} text-zinc-900`}>Overview</h2>
+          <h2 className={`${textType.h2} text-zinc-900`}>{t.overview}</h2>
         </div>
 
         {item.unescoSiteUrl && (
@@ -22,7 +24,7 @@ export function HeritageOverViewSection({ item }: { item: WorldHeritageDetailVm
             className="shrink-0 rounded-full border border-sky-200 bg-sky-50
             px-3 py-1.5 text-xs font-semibold text-sky-900 hover:bg-sky-100"
           >
-            View on UNESCO
+            {t.viewOnUnesco}
           </a>
         )}
       </div>

client/src/app/features/top/components/heritage-detail/HeritageSidebar.tsx

@@ -1,6 +1,7 @@
 import type { WorldHeritageDetailVm } from "../../../../../domain/types.ts";
 import { DetailHeritageMap } from "@features/top/components/heritage-detail/DetailHeritageMap.tsx";
 import { HeritageMetadataList } from "./HeritageMetadataList.tsx";
+import { useText } from "@shared/locale/ui-text.ts";
 
 const formatCriteriaInline = (criteria: string[] | undefined) =>
   criteria?.length ? criteria.map((c) => `(${c})`).join("") : "—";
@@ -19,6 +20,7 @@ const formatLongitude = (lng: number): string => {
 };
 
 export function HeritageSidebar({ item }: { item: WorldHeritageDetailVm }) {
+  const t = useText();
   const hasCoord =
     item.latitude != null && item.longitude != null && !isZeroCoord(item.latitude, item.longitude);
 
@@ -60,12 +62,12 @@ export function HeritageSidebar({ item }: { item: WorldHeritageDetailVm }) {
               href={item.unescoSiteUrl}
               target="_blank"
               rel="noreferrer noopener"
-              aria-label="View on UNESCO"
+              aria-label={t.viewOnUnesco}
               className="mt-4 inline-flex w-full items-center justify-center rounded-xl
                border border-sky-200 bg-sky-50 px-3 py-2 text-sm font-semibold
                text-sky-900 hover:bg-sky-100"
             >
-              View on UNESCO
+              {t.viewOnUnesco}
             </a>
           )}
         </div>

client/src/locals/en/ui.json

@@ -0,0 +1,16 @@
+{
+  "heritageCategory": "Heritage Category",
+  "criteria": "Criteria",
+  "viewDetails": "View details",
+  "danger": "DANGER",
+  "noImage": "No image",
+  "noOverview": "No overview available.",
+  "region": "Region",
+  "category": "Category",
+  "yearInscribed": "Year Inscribed",
+  "description": "Description",
+  "maps": "Maps",
+  "gallery": "Gallery",
+  "overview": "Overview",
+  "viewOnUnesco": "View on UNESCO"
+}

client/src/locals/ja/ui.json

@@ -0,0 +1,16 @@
+{
+  "heritageCategory": "遺産カテゴリ",
+  "criteria": "登録基準",
+  "viewDetails": "詳細を見る",
+  "danger": "危機",
+  "noImage": "画像なし",
+  "noOverview": "概要はありません。",
+  "region": "地域",
+  "category": "カテゴリ",
+  "yearInscribed": "登録年",
+  "description": "説明",
+  "maps": "地図",
+  "gallery": "ギャラリー",
+  "overview": "概要",
+  "viewOnUnesco": "UNESCO で見る"
+}

client/src/shared/locale/ui-text.ts

@@ -0,0 +1,13 @@
+import en from "../../locals/en/ui.json";
+import ja from "../../locals/ja/ui.json";
+import { type Locale } from "../../domain/criteria.ts";
+import { useLocale } from "./LocaleHooks.ts";
+
+export type UiText = typeof en;
+
+const TEXTS: Record<Locale, UiText> = { en, ja };
+
+export const useText = (): UiText => {
+  const { locale } = useLocale();
+  return TEXTS[locale];
+};