@@ -9,8 +9,10 @@ import { Label } from "@/components/ui/label";
99export function CostCalculator ( ) {
1010 const [ scholarship , setScholarship ] = useState ( "none" ) ;
1111 const [ housing , setHousing ] = useState ( "on-campus" ) ;
12+ const [ tuitionType , setTuitionType ] = useState ( "english" ) ;
1213
13- const { tuition, dormOnCampus, livingOnCampus, livingOffCampus } = siteContent . costs ;
14+ const { tuitionEnglish, tuitionChinese, dormOnCampus, livingOnCampus, livingOffCampus } = siteContent . costs ;
15+ const tuition = tuitionType === "english" ? tuitionEnglish : tuitionChinese ;
1416 const selectedScholarship = siteContent . scholarships . find ( ( s ) => s . id === scholarship ) ;
1517 const scholarshipValue = selectedScholarship ?. value || 0 ;
1618
@@ -39,6 +41,22 @@ export function CostCalculator() {
3941 < h3 className = "text-2xl font-display font-bold mb-6" > Cost Estimator</ h3 >
4042
4143 < div className = "space-y-6" >
44+ { /* Tuition Selector */ }
45+ < div >
46+ < Label htmlFor = "tuition" className = "text-sm font-semibold mb-2 block" >
47+ Tuition
48+ </ Label >
49+ < select
50+ id = "tuition"
51+ value = { tuitionType }
52+ onChange = { ( e ) => setTuitionType ( e . target . value ) }
53+ className = "w-full px-4 py-3 rounded-xl border border-border bg-white focus:outline-none focus:ring-2 focus:ring-primary/50 transition-all"
54+ >
55+ < option value = "english" > English-Taught</ option >
56+ < option value = "chinese" > Chinese-Taught</ option >
57+ </ select >
58+ </ div >
59+
4260 { /* Scholarship Selector */ }
4361 < div >
4462 < Label htmlFor = "scholarship" className = "text-sm font-semibold mb-2 block" >
0 commit comments