7d52e8d5f1
akademik-ayrinti.tsx'teki açılış sahnesi src/components/ui/acilis-sahnesi.tsx'e taşındı; davranışı değişmedi (kartlı mod). Eklenenler: `hazir` prop'u (false iken sahne oynamaz, veri gelince oynar), `className` prop'u ve kartsız mod: `data-logo` kabındaki üç `data-logo-kare` logodaki yerinde belirir, durur, scale 0.6 + opacity 0 ile söner, kap sıfır boya iner, `data-sonra` bloklar netleşir. Hareketi azalt: logo gizli, 0,25 s solma. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
85 lines
3.5 KiB
TypeScript
85 lines
3.5 KiB
TypeScript
"use client";
|
||
|
||
import type { ReactNode } from "react";
|
||
import { ChevronRight, GraduationCap, X } from "lucide-react";
|
||
import {
|
||
AltSayfa,
|
||
AltSayfaKapat,
|
||
AltSayfaGovde,
|
||
AltSayfaIcerik,
|
||
AltSayfaAciklama,
|
||
AltSayfaBaslik,
|
||
AltSayfaTetik,
|
||
} from "@/components/ui/alt-sayfa";
|
||
import { AcilisSahnesi } from "@/components/ui/acilis-sahnesi";
|
||
|
||
/**
|
||
* Üniversite ve bölüm sayfasında özet kartlarının altındaki ayrıntı satırı
|
||
* ("Akademik göstergeler ›", "Mezun istihdamı ›"; Apple Sağlık'taki "Tüm
|
||
* verileri göster" gibi): sık bakılan sayılar
|
||
* kartlarda, ayrıntı bir dokunuş derinde. İkinci satır içeride ne olduğunu
|
||
* önceden söyler. Ayrıntı alttan açılan çekmecede; çekmece ve kapatma
|
||
* çarpısı cta-sira-form.tsx'teki çekmeceyle birebir aynı sınıf setinde.
|
||
* Kartlar sunucuda üretilip `children` olarak gelir; açılış koreografisini
|
||
* AcilisSahnesi (`src/components/ui/acilis-sahnesi.tsx`, kartlı mod) oynatır.
|
||
*/
|
||
export function AkademikAyrinti({
|
||
baglam,
|
||
onizleme,
|
||
baslik = "Akademik göstergeler",
|
||
ikon,
|
||
children,
|
||
}: {
|
||
/** Çekmece başlığının altındaki bağlam satırı (üniversite ya da bölüm adı) */
|
||
baglam: string;
|
||
onizleme: string;
|
||
baslik?: string;
|
||
/** İkon kutusunun içi; verilmezse mezuniyet kepi */
|
||
ikon?: ReactNode;
|
||
children: ReactNode;
|
||
}) {
|
||
return (
|
||
<AltSayfa>
|
||
<AltSayfaTetik asChild>
|
||
<button
|
||
type="button"
|
||
className="mt-4 flex w-full cursor-pointer items-center gap-4 group rounded-2xl border border-slate-200 bg-card p-4 text-left transition-[background-color,border-color,transform] duration-150 hover:border-orange-500 hover:bg-orange-50/60 active:scale-[0.99] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring sm:p-5"
|
||
>
|
||
<span className="flex size-11 shrink-0 items-center justify-center rounded-xl bg-primary/10">
|
||
{ikon ?? (
|
||
<GraduationCap className="size-5 text-primary" aria-hidden />
|
||
)}
|
||
</span>
|
||
<span className="min-w-0 flex-1">
|
||
<span className="block font-heading text-lg font-bold text-slate-900">
|
||
{baslik}
|
||
</span>
|
||
<span className="block truncate text-sm text-slate-500">
|
||
{onizleme}
|
||
</span>
|
||
</span>
|
||
<ChevronRight
|
||
className="size-5 shrink-0 text-slate-400 transition-[color,transform] duration-150 group-hover:translate-x-0.5 group-hover:text-orange-500"
|
||
aria-hidden
|
||
/>
|
||
</button>
|
||
</AltSayfaTetik>
|
||
<AltSayfaIcerik>
|
||
<AltSayfaKapat className="absolute top-3 right-3 z-10 flex size-9 cursor-pointer items-center justify-center rounded-full border border-slate-200 bg-popover text-slate-500 transition-[background-color,transform] duration-150 hover:bg-slate-100 hover:text-slate-800 active:scale-[0.96]">
|
||
<X className="size-4" aria-hidden />
|
||
<span className="sr-only">Kapat</span>
|
||
</AltSayfaKapat>
|
||
<AltSayfaGovde className="px-4 pt-3 pb-[max(1.25rem,env(safe-area-inset-bottom))] sm:px-6">
|
||
<AltSayfaBaslik className="px-10 text-center font-heading text-2xl font-bold text-slate-900">
|
||
{baslik}
|
||
</AltSayfaBaslik>
|
||
<AltSayfaAciklama className="mt-1 px-10 text-center text-sm text-slate-500">
|
||
{baglam}
|
||
</AltSayfaAciklama>
|
||
<AcilisSahnesi>{children}</AcilisSahnesi>
|
||
</AltSayfaGovde>
|
||
</AltSayfaIcerik>
|
||
</AltSayfa>
|
||
);
|
||
}
|