bilal/kolaytercih
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(tasarim): sihirbaz adımları "şişko ve sade" dile göre

Browse Source 
- Çipler 44 px (il çipleri 40 px), yarı kalın, hover tek turuncu,
  basınca küçülür; seçili il çipleri turuncu yerine mavi (tek turuncu
  ekranın CTA'sında)
- Büyük harfli minik etiketler ve 10 px sayaçlar kalktı; başlıklar 20 px
- İl arama kutusu 44 px, 16 px yazı (iOS yakınlaştırmasın)
- 3. adım 375 px'te pencereden taşıyordu: öncelikler telefonda iki
  sütun, alt düğmeler h-11 (ölçüm: 771 → 740 px, kaydırmasız)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
bilalgursen
2026-09-24 01:03:06 +03:00
parent 309fb73a34
commit aa0a03cda9
1 changed files with 39 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/features/sihirbaz/components/sihirbaz-adimlar.tsx
View File

@@ -28,13 +28,18 @@ export function Cip({
onClick, onClick,
children, children,
kucuk = false, kucuk = false,
className = "",
}: { }: {
secili: boolean; secili: boolean;
onClick: () => void; onClick: () => void;
children: React.ReactNode; children: React.ReactNode;
kucuk?: boolean; kucuk?: boolean;
className?: string;
}) { }) {
const boyut = kucuk ? "px-2.5 py-1 text-xs" : "px-3.5 py-2 text-sm"; // Şişko ve sade (DESIGN.md §1.1): çip 44 px dokunma hedefi; il
// çipleri (kucuk) çok sayıda olduğu için 40 px. Hover §2.1 tek turuncu.
const boyut = kucuk ? "h-10 px-3.5 text-sm" : "h-11 px-4 text-sm";
const temel = `inline-flex cursor-pointer items-center rounded-full border font-semibold transition-[background-color,border-color,color,transform] duration-150 active:scale-[0.97] ${boyut} ${className}`;
return ( return (
<button <button
type="button" type="button"
@@ -42,8 +47,8 @@ export function Cip({
aria-pressed={secili} aria-pressed={secili}
className={ className={
secili secili
? `cursor-pointer rounded-full border border-primary bg-primary font-medium text-white transition-colors duration-200 ${boyut}` ? `${temel} border-primary bg-primary text-white`
: `cursor-pointer rounded-full border border-slate-200 bg-white text-slate-700 transition-colors duration-200 hover:border-slate-300 hover:bg-slate-50 ${boyut}` : `${temel} border-slate-200 bg-white text-slate-700 hover:border-orange-500 hover:bg-orange-50/60 hover:text-orange-500`
} }
> >
{children} {children}
@@ -245,7 +250,7 @@ export function SihirbazAdimlar({
} }
/> />
))} ))}
<span className="ml-2 text-xs font-medium text-slate-400"> <span className="ml-2 text-sm font-medium text-slate-500">
Adım {adim + 1}/3 Adım {adim + 1}/3
</span> </span>
</div> </div>
@@ -293,7 +298,7 @@ export function SihirbazAdimlar({
} }
> >
<div ref={panelRef} className="px-px pb-2"> <div ref={panelRef} className="px-px pb-2">
<h3 className="font-heading text-lg font-bold"> <h3 className="font-heading text-xl font-bold text-slate-900">
Hangi alanlara ilgi duyuyorsun? Hangi alanlara ilgi duyuyorsun?
</h3> </h3>
<p className="mt-1 text-sm text-slate-500"> <p className="mt-1 text-sm text-slate-500">
@@ -307,20 +312,20 @@ export function SihirbazAdimlar({
onClick={() => listeDegistir(kategoriler, setKategoriler, k.ad)} onClick={() => listeDegistir(kategoriler, setKategoriler, k.ad)}
> >
{k.ad} {k.ad}
<span className="ml-1.5 text-xs opacity-70">{k.adet}</span> <span className="ml-1.5 text-xs font-medium opacity-70">{k.adet}</span>
</Cip> </Cip>
))} ))}
</div> </div>
</div> </div>
<div ref={panelRef}> <div ref={panelRef}>
<h3 className="font-heading text-lg font-bold"> <h3 className="font-heading text-xl font-bold text-slate-900">
Nerede okumak istersin? Nerede okumak istersin?
</h3> </h3>
<p className="mt-1 text-sm text-slate-500"> <p className="mt-1 text-sm text-slate-500">
En fazla 5 il seçebilirsin. İstersen boş bırak, fark etmez. En fazla 5 il seçebilirsin. İstersen boş bırak, fark etmez.
</p> </p>
<div className="mt-4 flex items-center gap-2 rounded-full border border-slate-200 bg-white px-3.5 py-2 transition-colors focus-within:border-slate-300"> <div className="mt-4 flex h-11 items-center gap-2 rounded-full border border-slate-200 bg-white px-4 transition-colors focus-within:border-slate-300">
<Search className="size-4 shrink-0 text-slate-400" aria-hidden /> <Search className="size-4 shrink-0 text-slate-400" aria-hidden />
<input <input
type="text" type="text"
@@ -329,14 +334,14 @@ export function SihirbazAdimlar({
placeholder="İl ara..." placeholder="İl ara..."
aria-label="İl ara" aria-label="İl ara"
autoComplete="off" autoComplete="off"
className="min-w-0 flex-1 bg-transparent text-sm text-slate-950 outline-none placeholder:text-slate-400" className="min-w-0 flex-1 bg-transparent text-base text-slate-950 outline-none placeholder:text-slate-400"
/> />
{ilArama ? ( {ilArama ? (
<button <button
type="button" type="button"
onClick={() => setIlArama("")} onClick={() => setIlArama("")}
aria-label="Aramayı temizle" aria-label="Aramayı temizle"
className="flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-full text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-700" className="-mr-2 flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-full text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-700"
> >
<X className="size-3.5" aria-hidden /> <X className="size-3.5" aria-hidden />
</button> </button>
@@ -350,7 +355,7 @@ export function SihirbazAdimlar({
yalnızca görünümü daraltır, seçimleri etkilemez ve kırpmayı yalnızca görünümü daraltır, seçimleri etkilemez ve kırpmayı
devre dışı bırakır. */} devre dışı bırakır. */}
<div <div
className={`mt-3 flex max-h-56 flex-wrap gap-1.5 overflow-y-auto sm:max-h-none sm:overflow-visible ${ className={`mt-3 flex max-h-64 flex-wrap gap-2 overflow-y-auto sm:max-h-none sm:overflow-visible ${
facetYukleniyor ? "animate-pulse opacity-60" : "" facetYukleniyor ? "animate-pulse opacity-60" : ""
}`} }`}
> >
@@ -362,14 +367,14 @@ export function SihirbazAdimlar({
onClick={() => listeDegistir(iller, setIller, i.il, 5)} onClick={() => listeDegistir(iller, setIller, i.il, 5)}
> >
{trBaslikDuzeni(i.il)} {trBaslikDuzeni(i.il)}
<span className="ml-1 text-[10px] opacity-70">{i.adet}</span> <span className="ml-1.5 text-xs font-medium opacity-70">{i.adet}</span>
</Cip> </Cip>
))} ))}
{ilListesiKirpik ? ( {ilListesiKirpik ? (
<button <button
type="button" type="button"
onClick={() => setTumIllerAcik(true)} onClick={() => setTumIllerAcik(true)}
className="cursor-pointer rounded-full border border-dashed border-slate-300 bg-white px-2.5 py-1 text-xs font-medium text-slate-500 transition-colors duration-200 hover:border-slate-400 hover:bg-slate-50 hover:text-slate-700" className="inline-flex h-10 cursor-pointer items-center rounded-full border border-dashed border-slate-300 bg-white px-3.5 text-sm font-semibold text-slate-500 transition-[background-color,border-color,color,transform] duration-150 hover:border-orange-500 hover:bg-orange-50/60 hover:text-orange-500 active:scale-[0.97]"
> >
+{gorunenTurkiyeIlleri.length - IL_ON_IZLEME} il daha +{gorunenTurkiyeIlleri.length - IL_ON_IZLEME} il daha
</button> </button>
@@ -381,7 +386,7 @@ export function SihirbazAdimlar({
<button <button
type="button" type="button"
onClick={() => setTumIllerAcik(false)} onClick={() => setTumIllerAcik(false)}
className="cursor-pointer rounded-full border border-dashed border-slate-300 bg-white px-2.5 py-1 text-xs font-medium text-slate-500 transition-colors duration-200 hover:border-slate-400 hover:bg-slate-50 hover:text-slate-700" className="inline-flex h-10 cursor-pointer items-center rounded-full border border-dashed border-slate-300 bg-white px-3.5 text-sm font-semibold text-slate-500 transition-[background-color,border-color,color,transform] duration-150 hover:border-orange-500 hover:bg-orange-50/60 hover:text-orange-500 active:scale-[0.97]"
> >
Daha az göster Daha az göster
</button> </button>
@@ -398,11 +403,11 @@ export function SihirbazAdimlar({
{gorunenDisIller.length > 0 ? ( {gorunenDisIller.length > 0 ? (
<div className="mt-4"> <div className="mt-4">
<p className="mb-2 text-xs font-semibold tracking-wide text-slate-400 uppercase"> <p className="mb-2 text-sm font-semibold text-slate-700">
KKTC & Yurt Dışı KKTC & Yurt Dışı
</p> </p>
<div <div
className={`flex flex-wrap gap-1.5 ${ className={`flex flex-wrap gap-2 ${
facetYukleniyor ? "animate-pulse opacity-60" : "" facetYukleniyor ? "animate-pulse opacity-60" : ""
}`} }`}
> >
@@ -414,7 +419,7 @@ export function SihirbazAdimlar({
onClick={() => listeDegistir(iller, setIller, i.il, 5)} onClick={() => listeDegistir(iller, setIller, i.il, 5)}
> >
{trBaslikDuzeni(i.il)} {trBaslikDuzeni(i.il)}
<span className="ml-1 text-[10px] opacity-70">{i.adet}</span> <span className="ml-1.5 text-xs font-medium opacity-70">{i.adet}</span>
</Cip> </Cip>
))} ))}
</div> </div>
@@ -423,7 +428,7 @@ export function SihirbazAdimlar({
{iller.length > 0 ? ( {iller.length > 0 ? (
<div className="mt-3 flex flex-wrap items-center gap-2"> <div className="mt-3 flex flex-wrap items-center gap-2">
<span className="text-xs font-semibold text-slate-400"> <span className="text-sm font-semibold text-slate-700">
Seçtiklerin: Seçtiklerin:
</span> </span>
{iller.map((il) => ( {iller.map((il) => (
@@ -431,10 +436,10 @@ export function SihirbazAdimlar({
key={il} key={il}
type="button" type="button"
onClick={() => listeDegistir(iller, setIller, il)} onClick={() => listeDegistir(iller, setIller, il)}
className="inline-flex cursor-pointer items-center gap-1 rounded-full bg-orange-500 px-3 py-1.5 text-xs font-medium text-white transition-colors duration-200 hover:bg-orange-600" className="inline-flex h-10 cursor-pointer items-center gap-1.5 rounded-full bg-primary px-3.5 text-sm font-semibold text-white transition-[background-color,transform] duration-150 hover:bg-primary/90 active:scale-[0.97]"
> >
{trBaslikDuzeni(il)} {trBaslikDuzeni(il)}
<X className="size-3" aria-hidden /> <X className="size-4" aria-hidden />
</button> </button>
))} ))}
</div> </div>
@@ -449,9 +454,9 @@ export function SihirbazAdimlar({
/> />
</div> </div>
</div> </div>
<div ref={panelRef} className="space-y-5"> <div ref={panelRef} className="space-y-4">
<div> <div>
<h3 className="font-heading text-lg font-bold"> <h3 className="font-heading text-xl font-bold text-slate-900">
Üniversite tipi & öncelikler Üniversite tipi & öncelikler
</h3> </h3>
<p className="mt-1 text-sm text-slate-500"> <p className="mt-1 text-sm text-slate-500">
@@ -459,7 +464,7 @@ export function SihirbazAdimlar({
</p> </p>
</div> </div>
<div> <div>
<p className="mb-2 text-xs font-semibold tracking-wide text-slate-400 uppercase"> <p className="mb-2 text-sm font-semibold text-slate-700">
Üniversite tipi Üniversite tipi
</p> </p>
<div <div
@@ -478,7 +483,7 @@ export function SihirbazAdimlar({
} }
> >
{UNIVERSITE_TIPI_ETIKET[u.grup]} {UNIVERSITE_TIPI_ETIKET[u.grup]}
<span className="ml-1.5 text-xs opacity-70">{u.adet}</span> <span className="ml-1.5 text-xs font-medium opacity-70">{u.adet}</span>
</Cip> </Cip>
))} ))}
<Cip <Cip
@@ -490,13 +495,16 @@ export function SihirbazAdimlar({
</div> </div>
</div> </div>
<div> <div>
<p className="mb-2 text-xs font-semibold tracking-wide text-slate-400 uppercase"> <p className="mb-2 text-sm font-semibold text-slate-700">
Senin için önemli olan Senin için önemli olan
</p> </p>
<div className="flex flex-wrap gap-2"> {/* Telefonda iki sütun, uzun ad iki satıra sarar: tek sütunda
yedi çip 44 px'le pencereyi 812 px'in dışına itiyordu. */}
<div className="grid grid-cols-2 gap-2 sm:flex sm:flex-wrap">
{ONCELIKLER.map((o) => ( {ONCELIKLER.map((o) => (
<Cip <Cip
key={o} key={o}
className="h-auto min-h-11 justify-center px-3 py-1.5 text-center leading-tight sm:h-11 sm:px-4 sm:py-0"
secili={oncelikler.includes(o)} secili={oncelikler.includes(o)}
onClick={() => listeDegistir(oncelikler, setOncelikler, o)} onClick={() => listeDegistir(oncelikler, setOncelikler, o)}
> >
@@ -504,7 +512,7 @@ export function SihirbazAdimlar({
</Cip> </Cip>
))} ))}
</div> </div>
<p className="mt-2 text-xs text-slate-500"> <p className="mt-2 text-sm text-slate-500">
Öncelikler yapay zekânın gerekçelerine ve program seçimine yön Öncelikler yapay zekânın gerekçelerine ve program seçimine yön
verir; listeyi daraltmaz. verir; listeyi daraltmaz.
</p> </p>
@@ -512,13 +520,13 @@ export function SihirbazAdimlar({
</div> </div>
</TransitionPanel> </TransitionPanel>
<div className="flex items-center justify-between border-t border-slate-100 pt-4"> <div className="flex items-center justify-between gap-2 border-t border-slate-100 pt-4">
<Button <Button
type="button" type="button"
variant="ghost" variant="ghost"
onClick={() => adimaGit(adim - 1)} onClick={() => adimaGit(adim - 1)}
disabled={adim === 0} disabled={adim === 0}
className={adim === 0 ? "invisible" : "cursor-pointer"} className={adim === 0 ? "invisible" : "h-11 cursor-pointer px-3"}
> >
<ArrowLeft className="size-4" aria-hidden /> <ArrowLeft className="size-4" aria-hidden />
Geri Geri
@@ -528,7 +536,7 @@ export function SihirbazAdimlar({
type="button" type="button"
onClick={() => adimaGit(adim + 1)} onClick={() => adimaGit(adim + 1)}
disabled={!adimGecerli} disabled={!adimGecerli}
className="cursor-pointer bg-orange-500 text-white transition-colors duration-200 hover:bg-orange-600" className="h-11 cursor-pointer bg-orange-500 px-5 text-white transition-[background-color,transform] duration-200 hover:bg-orange-600 active:scale-[0.97]"
> >
Devam Devam
<ArrowRight className="size-4" aria-hidden /> <ArrowRight className="size-4" aria-hidden />
@@ -546,7 +554,7 @@ export function SihirbazAdimlar({
onTamamla({ kategoriler, iller, universiteTipi, oncelikler }); onTamamla({ kategoriler, iller, universiteTipi, oncelikler });
}} }}
disabled={kategoriler.length === 0} disabled={kategoriler.length === 0}
className="cursor-pointer bg-orange-500 text-white transition-colors duration-200 hover:bg-orange-600" className="h-11 cursor-pointer bg-orange-500 px-5 text-white transition-[background-color,transform] duration-200 hover:bg-orange-600 active:scale-[0.97]"
> >
{sonButonEtiketi} {sonButonEtiketi}
<ArrowRight className="size-4" aria-hidden /> <ArrowRight className="size-4" aria-hidden />