6a9af19ef2
Üniversite sayfası (canlı referans ekran /universite/ankara-universitesi): - Program listesi: ad kesilmez/sarar, telefonda taban sıra alt satıra iner, satır butonları 44 px, tür çipi okunur boyda - Başlık bloğu lg altında ortalı (logo başlığın üstünde), kimlik hapları (Devlet/Ankara) navbar ölçüsünde, ikon + metin - Harita yanında 4 özet kartı (OzetKart): sayı solda iri, ikon sağda; 4. kart URAP Türkiye sırası + piksel sıra şeridi (PixelSira) - Akademik göstergeler (URAP + YÖK İstatistik) sayfadan "Akademik göstergeler ›" satırının açtığı alt sayfaya taşındı: kartsız, ortalı, masonry gösterge kareleri, tek ekrana sığar - Hover tek turuncu (orange-500); liste satırı adı mavi kalır - Üst çubuk başlık geçişi (NavBaslik): h1 kaydırılınca üst çubukta logo + ad belirir; bölüm sayfasında da (yalnız ad) Tasarım dili: - DESIGN.md: temel his (§1.1), hover kuralı (§2.1), yazı alt sınırları, yeni tek kaynak parçalar (§4.8–4.15), lg altı ortala (§5.2), reddedilen denemeler (§7), ölç-tahmin-etme ve tuzaklar (§9) - Denetim: gösterge karesi renk istisnası (bg-indigo-500, bg-green-600) ve site taraması için dört uyarı (minik-yazi, buyuk-harf-etiket, mavi-hover, iri-sayi-tabular) Not: universite-icerik.tsx'teki akademik göstergeler bölümü (URAP/YÖK kartları) Bilal'in commit'lenmemiş işiydi; tasarım değişiklikleriyle aynı dosyada iç içe olduğu için bu commit'e girdi. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
73 lines
3.1 KiB
TypeScript
73 lines
3.1 KiB
TypeScript
"use client";
|
||
|
||
import type { ReactNode } from "react";
|
||
import { ChevronRight, GraduationCap, X } from "lucide-react";
|
||
import {
|
||
Drawer,
|
||
DrawerClose,
|
||
DrawerContent,
|
||
DrawerDescription,
|
||
DrawerTitle,
|
||
DrawerTrigger,
|
||
} from "@/components/ui/drawer";
|
||
|
||
/**
|
||
* Üniversite sayfasında özet kartlarının altındaki "Akademik göstergeler ›"
|
||
* satırı (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.
|
||
*/
|
||
export function AkademikAyrinti({
|
||
universite,
|
||
onizleme,
|
||
children,
|
||
}: {
|
||
universite: string;
|
||
onizleme: string;
|
||
children: ReactNode;
|
||
}) {
|
||
return (
|
||
<Drawer handleOnly>
|
||
<DrawerTrigger asChild>
|
||
<button
|
||
type="button"
|
||
className="mt-4 flex w-full cursor-pointer items-center gap-4 group rounded-2xl border border-slate-200 bg-white 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">
|
||
<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">
|
||
Akademik göstergeler
|
||
</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>
|
||
</DrawerTrigger>
|
||
<DrawerContent className="max-h-[92dvh] bg-white sm:mx-auto sm:max-w-2xl sm:border-x sm:border-slate-200 sm:shadow-2xl">
|
||
<DrawerClose 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>
|
||
</DrawerClose>
|
||
<div className="min-h-0 flex-1 overflow-y-auto px-4 pt-5 pb-[max(1.25rem,env(safe-area-inset-bottom))] sm:px-6">
|
||
<DrawerTitle className="px-10 text-center font-heading text-2xl font-bold text-slate-900">
|
||
Akademik göstergeler
|
||
</DrawerTitle>
|
||
<DrawerDescription className="mt-1 px-10 text-center text-sm text-slate-500">
|
||
{universite}
|
||
</DrawerDescription>
|
||
<div className="mt-5">{children}</div>
|
||
</div>
|
||
</DrawerContent>
|
||
</Drawer>
|
||
);
|
||
}
|