62 lines
1.8 KiB
TypeScript
62 lines
1.8 KiB
TypeScript
import { TestResponse } from "@/api/types";
|
|
import formatISODate from "@/utils/format-iso-date";
|
|
import { FontAwesome5 } from "@expo/vector-icons";
|
|
import { Pressable, StyleSheet, View } from "react-native";
|
|
import { Badge, BadgeText } from "./ui/badge";
|
|
import { Divider } from "./ui/divider";
|
|
import Panel from "./ui/panel";
|
|
import { Skeleton } from "./ui/skeleton";
|
|
import { ThemedText } from "./ui/themed-text";
|
|
|
|
interface TestProps {
|
|
test?: TestResponse;
|
|
onPress?: (test: TestResponse) => void;
|
|
}
|
|
|
|
const Test = ({ test, onPress }: TestProps) => {
|
|
if (!test) return <Skeleton className="w-full h-24" />;
|
|
|
|
const availableText = test.is_available ? `Available: ${formatISODate(test.closed_at)}` : "Closed";
|
|
|
|
return (
|
|
<Pressable onPress={() => onPress?.(test)}>
|
|
<Panel>
|
|
<ThemedText type="meta" className="mb-1">
|
|
{test.category.name}
|
|
</ThemedText>
|
|
<View className="mb-1 flex-row">
|
|
<Badge action={test.is_available ? "success" : "error"}>
|
|
<BadgeText>
|
|
<FontAwesome5
|
|
name={test.is_available ? "check-circle" : "times-circle"}
|
|
/>{" "}
|
|
{availableText}
|
|
</BadgeText>
|
|
</Badge>
|
|
</View>
|
|
<ThemedText style={styles.testTitle}>{test.title}</ThemedText>
|
|
<ThemedText>{test.description}</ThemedText>
|
|
|
|
<Divider className="mt-2 mb-2" />
|
|
|
|
<View className="justify-between flex-row">
|
|
<ThemedText type="meta">
|
|
<FontAwesome5 name="user" /> {test.author.username}
|
|
</ThemedText>
|
|
<ThemedText type="meta">{test.questions_count} Questions</ThemedText>
|
|
</View>
|
|
</Panel>
|
|
</Pressable>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
testTitle: {
|
|
fontSize: 18,
|
|
fontWeight: "600",
|
|
marginBottom: 10,
|
|
},
|
|
});
|
|
|
|
export default Test;
|