add sport question

pull/12/head
Vianney JOURDY 4 months ago
parent 53a8e1b0f2
commit edf3ec383d

@ -14,6 +14,7 @@ import AgeQuestion from "@/components/quiz/AgeQuestion";
import BeginnerQuestion from "@/components/quiz/BeginnerQuestion";
import LvlQuestion from "@/components/quiz/LvlQuestion";
import SleepQuestion from "@/components/quiz/SleepQuestion";
import SportQuestion from "@/components/quiz/SportQuestion";
export default function Quiz() {
const [currentQuestionIndex, setCurrentQuestionIndex] = React.useState(0);
@ -30,6 +31,7 @@ export default function Quiz() {
{ component: BeginnerQuestion, props: {} },
{ component: LvlQuestion, props: {} },
{ component: FrequencyQuestion, props: { isMale: true } },
{ component: SportQuestion, props: {} },
{ component: SleepQuestion, props: {} },
];

@ -1,29 +1,67 @@
import React, {Component} from "react";
import {View, Text, TouchableOpacity, Image} from "react-native";
import {AntDesign, FontAwesome6} from "@expo/vector-icons";
import {AntDesignIconNames} from "./Icons";
import {
AntDesign,
Entypo,
FontAwesome6,
MaterialCommunityIcons,
} from "@expo/vector-icons";
import {
AntDesignIconNames,
CommunityIconNames,
EntypoIconNames,
FontAwesomeIconNames,
} from "./Icons";
interface CheckButtonProps {
label: string;
value: boolean;
onChange: () => void;
icon: AntDesignIconNames | string;
antIcon?: AntDesignIconNames;
entypoIcon?: EntypoIconNames;
fontAwesomeIcon?: FontAwesomeIconNames;
communityIcon?: CommunityIconNames;
}
const CheckButton: React.FC<CheckButtonProps> = ({ label, value, onChange, icon }) => {
let AwesomIconList = ["weight-scale", "beer"];
const CheckButton: React.FC<CheckButtonProps> = ({ label, value, onChange, antIcon,
entypoIcon,
fontAwesomeIcon,
communityIcon, }) => {
return (
<TouchableOpacity onPress={onChange} className={`p-5 m-1 rounded-3xl ${value ? 'bg-orange-600 border-4 border-orange-300' : 'bg-gray-300 border-4 border-gray-300'} flex-basis-1/3 items-center`}>
<View className="mr-2.5">
{AwesomIconList.includes(icon) ? (
<FontAwesome6 name={icon} size={30} color={value ? "white" : "black"}/>
) : (
<AntDesign name={icon ?? "arrowleft"} size={30} color={value ? "white" : "black"}/>
)}
</View>
<View style={{ flexBasis: "33.33%"}}>
<TouchableOpacity onPress={onChange} className={`p-5 m-1 rounded-3xl ${value ? 'bg-orange-600 border-4 border-orange-300' : 'bg-gray-300 border-4 border-gray-300'} items-center`}>
{antIcon ? (
<AntDesign
name={antIcon}
size={30}
color={value ? "white" : "black"}
/>
) : null}
{entypoIcon ? (
<Entypo
name={entypoIcon}
size={30}
color={value ? "white" : "black"}
/>
) : null}
{communityIcon ? (
<MaterialCommunityIcons
name={communityIcon}
size={30}
color={value ? "white" : "black"}
/>
) : null}
{fontAwesomeIcon ? (
<FontAwesome6
name={fontAwesomeIcon}
size={30}
color={value ? "white" : "black"}
/>
) : null}
<Text className={`${value ? 'text-white' : 'text-black'} flex-1`}>{label}</Text>
<Text className={`${value ? 'text-white' : 'text-black'}`}>{label}</Text>
</TouchableOpacity>
</View>
);
};

@ -141,18 +141,18 @@ export default React.forwardRef<any, QuestionChildProps>(
{...ref}
{...rest}
>
<View className={`flex-wrap max-h-fit`}>
<CheckButton label="Course" value={checkedOne} onChange={handleChangeOne} icon={"smile-circle"} />
<CheckButton label="Marche" value={checkedTwo} onChange={handleChangeTwo} icon={"smileo"} />
<CheckButton label="Rando" value={checkedThree} onChange={handleChangeThree} icon={"meh"} />
<View className={`flex-wrap flex-row`}>
<CheckButton label="Course" value={checkedOne} onChange={handleChangeOne} fontAwesomeIcon={"person-running"} />
<CheckButton label="Marche" value={checkedTwo} onChange={handleChangeTwo} fontAwesomeIcon={"person-walking"} />
<CheckButton label="Rando" value={checkedThree} onChange={handleChangeThree} fontAwesomeIcon={"person-hiking"} />
<CheckButton label="Skate" value={checkedFour} onChange={handleChangeFour} icon={"frowno"} />
<CheckButton label="Cyclisme" value={checkedFive} onChange={handleChangeFive} icon={"frown"} />
<CheckButton label="Basket" value={checkedSix} onChange={handleChangeSix} icon={"frown"} />
<CheckButton label="Skate" value={checkedFour} onChange={handleChangeFour} communityIcon={"skateboarding"} />
<CheckButton label="Cyclisme" value={checkedFive} onChange={handleChangeFive} communityIcon={"bike"} />
<CheckButton label="Basket" value={checkedSix} onChange={handleChangeSix} fontAwesomeIcon={"basketball"} />
<CheckButton label="Cardio" value={checkedSeven} onChange={handleChangeSeven} icon={"frown"} />
<CheckButton label="Yoga" value={checkedEight} onChange={handleChangeEight} icon={"frown"} />
<CheckButton label="Autre" value={checkedNine} onChange={handleChangeNine} icon={"frown"} />
<CheckButton label="Cardio" value={checkedSeven} onChange={handleChangeSeven} antIcon={"heart"} />
<CheckButton label="Yoga" value={checkedEight} onChange={handleChangeEight} communityIcon={"yoga"} />
<CheckButton label="Autre" value={checkedNine} onChange={handleChangeNine} antIcon={"setting"} />
</View>
</Question>
);

Loading…
Cancel
Save