Form
import React, { useMemo, useState } from "react";
// ---- Tipler ----
export type Coach = {
id: string | number;
ad: string;
alan: "sayisal" | "esit" | "sozel" | "dil" | string;
okul: "ozel" | "devlet" | string;
mezun: boolean;
dershane: boolean;
ozelders: boolean;
youtube: boolean;
deneme: boolean;
avatar?: string; // url ya da kısa kod
};
export type StudentAnswers = {
alan: "sayisal" | "esit" | "sozel" | "dil" | "";
dershane: "evet" | "hayir";
okul: "ozel" | "devlet" | "";
mezun: "evet" | "hayir";
ozelders: "evet" | "hayir";
youtube: "evet" | "hayir";
deneme: "evet" | "hayir";
};
export type CoachMatcherProps = {
coaches?: Coach[]; // sağlanmazsa window.COACHES kullanılır
onSelectCoach?: (coach: Coach) => void; // CTA tıklaması
showPercent?: boolean; // varsayılan: false (sales-friendly etiket)
className?: string;
};
// ---- Ağırlıklar ----
const alanMatrix: Record> = {
sayisal: { sayisal: 8, esit: 1, sozel: 0, dil: 0 },
esit: { sayisal: 1, esit: 8, sozel: 1, dil: 0 },
sozel: { sayisal: 0, esit: 2, sozel: 8, dil: 0 },
dil: { sayisal: 0, esit: 0, sozel: 0, dil: 8 },
};
const weights = {
mezun: 4,
dershane: 2,
ozelders: 2,
youtube: 2,
deneme: 1,
okul: 2,
};
const labelAlan = (a: string) =>
a === "sayisal" ? "Sayısal" : a === "esit" ? "Eşit Ağırlık" : a === "sozel" ? "Sözel" : "Dil";
const matchLabel = (percent: number) => {
if (percent >= 90) return "En Uyumlu";
if (percent >= 70) return "Çok Uyumlu";
if (percent >= 50) return "Uyumlu";
return "Kısmen Uyumlu";
};
function maxScore(student: StudentAnswers) {
let s = 0;
if (student.alan && alanMatrix[student.alan]) {
s += Math.max(...Object.values(alanMatrix[student.alan]));
}
s += weights.mezun + weights.dershane + weights.ozelders + weights.youtube + weights.deneme + weights.okul;
return s;
}
function scoreCoach(student: StudentAnswers, coach: Coach) {
let s = 0;
const yes = (v: string) => v === "evet";
if (student.alan && alanMatrix[student.alan]) s += alanMatrix[student.alan][coach.alan] || 0;
s += coach.mezun === yes(student.mezun) ? weights.mezun : 0;
s += coach.dershane === yes(student.dershane) ? weights.dershane : 0;
s += coach.ozelders === yes(student.ozelders) ? weights.ozelders : 0;
s += coach.youtube === yes(student.youtube) ? weights.youtube : 0;
s += coach.deneme === yes(student.deneme) ? weights.deneme : 0;
s += coach.okul === student.okul ? weights.okul : 0;
return s;
}
export default function CoachMatcher({ coaches, onSelectCoach, showPercent = false, className }: CoachMatcherProps) {
// Eğer props.coaches yoksa global window.COACHES kullan
const initialCoaches: Coach[] = useMemo(() => {
if (coaches && coaches.length) return coaches;
// @ts-ignore
if (typeof window !== "undefined" && Array.isArray((window as any).COACHES)) {
// @ts-ignore
return (window as any).COACHES as Coach[];
}
return [];
}, [coaches]);
const [answers, setAnswers] = useState({
alan: "",
dershane: "hayir",
okul: "",
mezun: "hayir",
ozelders: "hayir",
youtube: "hayir",
deneme: "hayir",
});
const [submitted, setSubmitted] = useState(false);
const top3 = useMemo(() => {
if (!submitted) return [] as (Coach & { _score: number; _percent: number; _label: string })[];
const max = maxScore(answers) || 1;
return initialCoaches
.map((c) => {
const sc = scoreCoach(answers, c);
const pct = Math.round((sc / max) * 100);
return { ...c, _score: sc, _percent: pct, _label: matchLabel(pct) };
})
.sort((a, b) => b._score - a._score)
.slice(0, 3);
}, [answers, submitted, initialCoaches]);
const onSubmit = (e: React.FormEvent) => {
e.preventDefault();
setSubmitted(true);
};
const Field = ({ children, legend }: { children: React.ReactNode; legend: string }) => (
);
const Radio = ({ name, value, label }: { name: keyof StudentAnswers; value: string; label: string }) => (
);
return (
);
}
Koç Eşleştirme
Soruları yanıtla; sana en uygun 3 koç gelsin.
{submitted && (
{top3.length === 0 &&
))}
)}
Uygun koç bulunamadı.
} {top3.map((c) => (
{c.avatar ? 
: c.ad?.split(" ").map(x=>x[0]).join("")}
{c.ad}
{showPercent ? (
%{c._percent}
) : (
{c._label}
)}
Alan: {labelAlan(c.alan)}
Okul: {c.okul === "ozel" ? "Özel" : "Devlet"}
Dershane: {c.dershane ? "Evet" : "Hayır"}
Mezun: {c.mezun ? "Evet" : "Hayır"}
Özel ders: {c.ozelders ? "Evet" : "Hayır"}
YouTube: {c.youtube ? "Evet" : "Hayır"}
Deneme: {c.deneme ? "Evet" : "Hayır"}