Jean-Luc Makiola
8d7a668da4
Auto-fixed formatting issues and removed unused imports introduced by background execution agents across currency, i18n, and sharing code. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
import { useTranslation } from "react-i18next";
|
|
import { HOBBIES } from "@/shared/hobbyConfig";
|
|
import { HobbyCard } from "./HobbyCard";
|
|
|
|
interface OnboardingHobbyPickerProps {
|
|
selectedHobbies: string[];
|
|
onToggleHobby: (hobbyId: string) => void;
|
|
onContinue: () => void;
|
|
}
|
|
|
|
export function OnboardingHobbyPicker({
|
|
selectedHobbies,
|
|
onToggleHobby,
|
|
onContinue,
|
|
}: OnboardingHobbyPickerProps) {
|
|
const { t } = useTranslation("onboarding");
|
|
return (
|
|
<div className="flex flex-col items-center justify-center min-h-screen px-8">
|
|
<div className="max-w-2xl text-center">
|
|
<h1 className="text-3xl font-bold text-gray-900 mb-2">
|
|
{t("hobby.title")}
|
|
</h1>
|
|
<p className="text-base text-gray-500 mb-8">{t("hobby.subtitle")}</p>
|
|
<div className="flex flex-wrap justify-center gap-4 mb-8">
|
|
{HOBBIES.map((hobby) => (
|
|
<HobbyCard
|
|
key={hobby.id}
|
|
name={hobby.name}
|
|
icon={hobby.icon}
|
|
descriptor={hobby.descriptor}
|
|
selected={selectedHobbies.includes(hobby.id)}
|
|
onClick={() => onToggleHobby(hobby.id)}
|
|
/>
|
|
))}
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={onContinue}
|
|
disabled={selectedHobbies.length === 0}
|
|
className="px-8 py-3 bg-gray-700 hover:bg-gray-800 disabled:opacity-50 disabled:cursor-not-allowed text-white font-medium rounded-lg transition-colors"
|
|
>
|
|
{t("hobby.continue")}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|