259534fa9c
- ilSayfaHref: üniversite sayfası il hapı, /universiteler listesi, bölüm / sonuç / listem / tadımlık satırlarındaki il metası şehir sayfasına gider. - Şehir kümeleri tüm (üniversite, il) çiftlerinden: DB'deki her il değerinin sayfası var (ODTÜ Ankara + KKTC); dev'de eski globalThis önbelleğine dayanıklı. - PikselZemin ton="acik", CtaBandi/CtaSiraForm ton="beyaz": /universiteler altı ve /meraklisina kapanışı beyaz, diğer bantlar mavi (dönüşümlü). - ilUlkeHaritasi: il değerinden ülke haritası + şehir konumu. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
66 lines
2.2 KiB
TypeScript
66 lines
2.2 KiB
TypeScript
"use client";
|
||
|
||
import type { ComponentProps, Ref } from "react";
|
||
import { PikselZemin } from "@/components/piksel-zemin";
|
||
import { cn } from "@/lib/utils";
|
||
|
||
/**
|
||
* CTA bandı — DESIGN.md §10.8 kanonik yüzey: sitenin mavisi (`bg-primary`),
|
||
* arka planda büyüklü küçüklü, masonry gibi kaymış ve imleç yaklaşınca
|
||
* turuncuya ısınan piksel dokusu (`PixelMasonry`), beyaz yazı, tek turuncu buton.
|
||
*
|
||
* - `buyuk` (varsayılan): sayfa kapanışı / panel — ortalı, iri boşluk.
|
||
* - `kompakt`: çekmece altı gibi dar yerler — sola yaslı, alçak.
|
||
* - `ton="beyaz"`: aynı bant beyaz zeminde — slate kenarlık, koyu yazı,
|
||
* slate pikseller. Aynı sayfada üst üste iki mavi bant olmasın diye
|
||
* (Bilal, 24 Eyl 2026: "her kısımda mavi arka kullanmışsın, çeşitlendir").
|
||
* Çağıran paragraf renklerini tona göre verir (`text-white/90` ↔
|
||
* `text-slate-600`).
|
||
*
|
||
* İçerik (başlık, paragraf, buton) çağıranındır; yalnız kabuk burada durur.
|
||
* Bilal'in kararı (24 Eyl 2026): koyu slate-950 yüzey yerine bu band.
|
||
*/
|
||
export function CtaBandi({
|
||
children,
|
||
className,
|
||
seed = 8,
|
||
boyut = "buyuk",
|
||
ton = "mavi",
|
||
etiket = "section",
|
||
ref,
|
||
...props
|
||
}: Omit<ComponentProps<"div">, "ref"> & {
|
||
/** Piksel dokusunun deseni; aynı sayfadaki iki band farklı olsun */
|
||
seed?: number;
|
||
boyut?: "buyuk" | "kompakt";
|
||
ton?: "mavi" | "beyaz";
|
||
/** Çekmece altı gibi başlıksız yerlerde `div` */
|
||
etiket?: "section" | "div";
|
||
ref?: Ref<HTMLElement>;
|
||
}) {
|
||
const buyuk = boyut === "buyuk";
|
||
// İki etiket de HTMLElement'tir; JSX tipi için div'e daraltılır.
|
||
const Etiket = etiket as "div";
|
||
return (
|
||
<Etiket
|
||
ref={ref as Ref<HTMLDivElement>}
|
||
className={cn(
|
||
"relative isolate overflow-hidden rounded-2xl",
|
||
ton === "beyaz"
|
||
? "border border-slate-200 bg-white text-slate-900"
|
||
: "bg-primary text-white",
|
||
buyuk ? "px-5 py-8 text-center sm:p-12" : "px-5 py-4 text-left sm:py-5",
|
||
className,
|
||
)}
|
||
{...props}
|
||
>
|
||
<PikselZemin
|
||
seed={seed}
|
||
ton={ton === "beyaz" ? "acik" : "koyu"}
|
||
className={buyuk ? "-inset-y-10" : undefined}
|
||
/>
|
||
{children}
|
||
</Etiket>
|
||
);
|
||
}
|