56 lines
1.6 KiB
TypeScript
56 lines
1.6 KiB
TypeScript
import { QuestionResponse } from "@/api/types";
|
|
import capitalizeFirst from "@/utils/capitalize-first";
|
|
import { FontAwesome5 } from "@expo/vector-icons";
|
|
import { Pressable, StyleSheet, View } from "react-native";
|
|
import { Divider } from "./ui/divider";
|
|
import Panel from "./ui/panel";
|
|
import { Skeleton } from "./ui/skeleton";
|
|
import { ThemedText } from "./ui/themed-text";
|
|
|
|
interface QuestionProps {
|
|
question?: QuestionResponse;
|
|
onPress?: () => void;
|
|
withMeta?: boolean;
|
|
withCategory?: boolean;
|
|
}
|
|
|
|
const Question = ({ question, onPress, withCategory = false, withMeta = false }: QuestionProps) => {
|
|
if (!question) return <Skeleton className="w-full h-20" />;
|
|
|
|
return (
|
|
<Pressable onPress={onPress}>
|
|
<Panel>
|
|
{withCategory && (
|
|
<ThemedText type="meta" className="mb-1">
|
|
{question.category.name}
|
|
</ThemedText>
|
|
)}
|
|
<ThemedText style={styles.questionTitle}>{question.title}</ThemedText>
|
|
<ThemedText>{question.description}</ThemedText>
|
|
|
|
<Divider className="mt-2 mb-2" />
|
|
|
|
<View className="justify-between flex-row">
|
|
<ThemedText type="meta">
|
|
<FontAwesome5 name="clipboard-list" /> {capitalizeFirst(question.type)}
|
|
</ThemedText>
|
|
<ThemedText type="meta">
|
|
<FontAwesome5 name="dumbbell" className="me-1" />
|
|
{question.difficulty}
|
|
</ThemedText>
|
|
</View>
|
|
</Panel>
|
|
</Pressable>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
questionTitle: {
|
|
fontSize: 18,
|
|
fontWeight: "600",
|
|
marginBottom: 10,
|
|
},
|
|
});
|
|
|
|
export default Question;
|