61 lines
1.4 KiB
TypeScript
61 lines
1.4 KiB
TypeScript
import { BlurView } from "expo-blur";
|
|
import { StyleSheet, Text, View } from "react-native";
|
|
|
|
type ShowInfoProps = {
|
|
seasons: number;
|
|
participants: number;
|
|
streamingService: string;
|
|
startDate: string;
|
|
endDate?: string | null;
|
|
};
|
|
|
|
const ShowInfo = ({
|
|
seasons,
|
|
participants,
|
|
streamingService,
|
|
startDate,
|
|
endDate,
|
|
}: ShowInfoProps) => {
|
|
return (
|
|
<View style={styles.showMainInfoSection}>
|
|
<BlurView intensity={25} tint="dark" style={styles.pill}>
|
|
<Text style={styles.showInfoText}>{seasons} Staffeln</Text>
|
|
</BlurView>
|
|
<BlurView intensity={25} tint="dark" style={styles.pill}>
|
|
<Text style={styles.showInfoText}>{participants} Teilnehmer</Text>
|
|
</BlurView>
|
|
<BlurView intensity={25} tint="dark" style={styles.pill}>
|
|
<Text style={styles.showInfoText}>{streamingService}</Text>
|
|
</BlurView>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
showMainInfoSection: {
|
|
alignSelf: "center",
|
|
flexDirection: "row",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
gap: 8,
|
|
marginTop: 8,
|
|
marginBottom: 12,
|
|
},
|
|
pill: {
|
|
paddingHorizontal: 14,
|
|
paddingVertical: 7,
|
|
borderRadius: 20,
|
|
overflow: "hidden",
|
|
borderWidth: StyleSheet.hairlineWidth,
|
|
borderColor: "rgba(255,255,255,0.1)",
|
|
},
|
|
showInfoText: {
|
|
color: "rgba(255,255,255,0.85)",
|
|
fontSize: 13,
|
|
fontWeight: "500",
|
|
letterSpacing: 0.2,
|
|
},
|
|
});
|
|
|
|
export default ShowInfo;
|