One-question-per-screen study abroad cost of living wizard with suitcase duration stepper and report. Destinations, prices and options come in through props.
import CostOfLivingWizard, {
type WizardCostOption,
type WizardCountry,
type WizardLevel,
type WizardOption,
} from "@/components/ui/cost-of-living-wizard"
// Sample figures for the demo only. Pass your own through props.
const countries: WizardCountry[] = [
{
code: "GB",
name: "United Kingdom",
flag: "🇬🇧",
detail: "120 universities",
cities: [
{ name: "London", emoji: "🎡", detail: "32 universities" },
{ name: "Manchester", emoji: "🏟️", detail: "9 universities" },
{ name: "Edinburgh", emoji: "🏰", detail: "6 universities" },
{ name: "Birmingham", emoji: "🚂", detail: "8 universities" },
{ name: "Glasgow", emoji: "🎻", detail: "7 universities" },
],
},
{
code: "CA",
name: "Canada",
flag: "🇨🇦",
detail: "85 universities",
cities: [
{ name: "Toronto", emoji: "🗼", detail: "14 universities" },
{ name: "Vancouver", emoji: "🏔️", detail: "9 universities" },
{ name: "Montreal", emoji: "⚜️", detail: "11 universities" },
{ name: "Ottawa", emoji: "🏛️", detail: "5 universities" },
{ name: "Calgary", emoji: "🤠", detail: "4 universities" },
],
},
{
code: "AU",
name: "Australia",
flag: "🇦🇺",
detail: "64 universities",
cities: [
{ name: "Sydney", emoji: "🎭", detail: "12 universities" },
{ name: "Melbourne", emoji: "☕", detail: "11 universities" },
{ name: "Brisbane", emoji: "🌞", detail: "6 universities" },
{ name: "Perth", emoji: "🦢", detail: "5 universities" },
{ name: "Adelaide", emoji: "🍷", detail: "4 universities" },
],
},
{
code: "DE",
name: "Germany",
flag: "🇩🇪",
detail: "52 universities",
cities: [
{ name: "Berlin", emoji: "🐻", detail: "10 universities" },
{ name: "Munich", emoji: "🍺", detail: "7 universities" },
{ name: "Hamburg", emoji: "⚓", detail: "5 universities" },
{ name: "Frankfurt", emoji: "🏦", detail: "4 universities" },
{ name: "Cologne", emoji: "⛪", detail: "4 universities" },
],
},
{
code: "TR",
name: "Turkey",
flag: "🇹🇷",
detail: "41 universities",
cities: [
{ name: "Istanbul", emoji: "🕌", detail: "18 universities" },
{ name: "Ankara", emoji: "🏛️", detail: "8 universities" },
{ name: "Izmir", emoji: "⛵", detail: "5 universities" },
{ name: "Antalya", emoji: "🏖️", detail: "3 universities" },
{ name: "Bursa", emoji: "🏔️", detail: "3 universities" },
],
},
]
const levels: WizardLevel[] = [
{ value: "diploma", label: "Diploma / Certificate", emoji: "📝", note: "Short, career-focused", tuitionPerYear: 7500 },
{ value: "bachelors", label: "Bachelor's degree", emoji: "🎓", note: "Undergraduate study", tuitionPerYear: 12500 },
{ value: "masters", label: "Master's degree", emoji: "📚", note: "Postgraduate study", tuitionPerYear: 14500 },
{ value: "phd", label: "PhD / Doctorate", emoji: "🔬", note: "Research degree", tuitionPerYear: 9000 },
]
const intakes: WizardOption[] = [
{ value: "jan", label: "January", emoji: "❄️", note: "Winter intake" },
{ value: "may", label: "May", emoji: "🌸", note: "Spring intake" },
{ value: "sep", label: "September", emoji: "🍁", note: "Main autumn intake" },
{ value: "already", label: "Already there", emoji: "🛂", note: "Planning your budget" },
]
const housing: WizardCostOption[] = [
{ value: "dorm", label: "University residence", emoji: "🏫", note: "A dorm room on or near campus", monthly: 520 },
{ value: "shared", label: "Shared apartment", emoji: "🛏️", note: "Your own room, shared kitchen", monthly: 640 },
{ value: "studio", label: "Private studio", emoji: "🏢", note: "A studio just for you", monthly: 980 },
{ value: "homestay", label: "Homestay", emoji: "🏡", note: "Live with a local host family", monthly: 720 },
]
const food: WizardCostOption[] = [
{ value: "cook", label: "Mostly cook at home", emoji: "🥪", note: "Groceries and student deals", monthly: 210 },
{ value: "mix", label: "A bit of both", emoji: "🍝", note: "Home cooking + the odd meal out", monthly: 320 },
{ value: "out", label: "Eat out often", emoji: "🍣", note: "Cafés and restaurants most days", monthly: 520 },
]
export default function Demo() {
return (
<div className="min-h-screen w-full bg-background">
<CostOfLivingWizard
countries={countries}
levels={levels}
intakes={intakes}
housing={housing}
food={food}
monthlyExtras={[
{ label: "Transport", amount: 70 },
{ label: "Phone & utilities", amount: 85 },
{ label: "Health & insurance", amount: 60 },
{ label: "Fun & shopping", amount: 140 },
]}
oneTimeCosts={2300}
oneTimeNote="Flight, visa, deposit and settling in"
currency="USD"
onComplete={(answers, estimate) => console.log(answers, estimate)}
/>
</div>
)
}