eefac56659
All checks were successful
Deploy / deploy (push) Successful in 4m39s
- scripts/il-izgara-uret.ts → src/lib/il-izgara-verisi.ts: 81 il ve 7 ülke kontürü hero'nun dot-matrix ızgarasına (72×31) rasterize; küçük iller 2×2 garanti. - SehirPikselHaritasi: iri kareler, altı opaklık, kıyı serpintisi, usePixelHeat ısı fırçası; bulunulan il iri turuncu karelerle sırayla belirir (kt-piksel-belir) ve nabız atar; KKTC/yurt dışında şehir merkezinde 2×2 iri kare. - Şehir sayfası başlığı beyaz piksel dokulu yüzeyde (SehirYuzeyi), harita sağda/altta. - UniversiteKonumHaritasi düz SVG yerine aynı piksel haritayı kullanır. - DESIGN.md §4.12/§4.17/§10.8 güncellendi. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
36 lines
1.1 KiB
TypeScript
36 lines
1.1 KiB
TypeScript
"use client";
|
||
|
||
import { useRef, type ReactNode } from "react";
|
||
import { PikselZemin } from "@/components/piksel-zemin";
|
||
|
||
/**
|
||
* Şehir sayfasının başlık yüzeyi (DESIGN.md §4.17): beyaz kart, slate
|
||
* piksel doku, sağda (lg) ya da altta (telefon) şehrin dot-matrix haritası.
|
||
* Doku ile harita üst üste binmez: harita kabı `haric` ile zemine verilir
|
||
* (§10.8 kuralı). Yalnız ref için client; metin ve harita sunucudan gelir.
|
||
*/
|
||
export function SehirYuzeyi({
|
||
metin,
|
||
harita,
|
||
seed = 31,
|
||
}: {
|
||
metin: ReactNode;
|
||
harita: ReactNode;
|
||
seed?: number;
|
||
}) {
|
||
const haritaRef = useRef<HTMLDivElement>(null);
|
||
return (
|
||
<section className="relative isolate mt-6 overflow-hidden rounded-3xl border border-slate-200 bg-white p-6 sm:p-8">
|
||
<PikselZemin ton="acik" seed={seed} haric={haritaRef} />
|
||
<div className="grid gap-6 lg:grid-cols-[minmax(0,1fr)_minmax(0,24rem)] lg:items-center lg:gap-10">
|
||
<div>{metin}</div>
|
||
{harita ? (
|
||
<div ref={haritaRef} className="mx-auto w-full max-w-md lg:max-w-none">
|
||
{harita}
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|