93 lines
2.3 KiB
TypeScript
93 lines
2.3 KiB
TypeScript
import { BlurView } from "expo-blur";
|
|
import { StyleSheet, Text, View } from "react-native";
|
|
|
|
type ParticipantDetailsProps = {
|
|
description: string;
|
|
concept: string;
|
|
genres: string[];
|
|
streamingService: string;
|
|
};
|
|
|
|
const ParticipantDetails = ({
|
|
description,
|
|
concept,
|
|
genres,
|
|
streamingService,
|
|
}: ParticipantDetailsProps) => {
|
|
return (
|
|
<View style={styles.container}>
|
|
<BlurView intensity={20} tint="dark" style={styles.card}>
|
|
<Text style={styles.detailTitle}>Beschreibung</Text>
|
|
<Text style={styles.detailLabel}>{description}</Text>
|
|
</BlurView>
|
|
<BlurView intensity={20} tint="dark" style={styles.card}>
|
|
<Text style={styles.detailTitle}>Konzept</Text>
|
|
<Text style={styles.detailLabel}>{concept}</Text>
|
|
</BlurView>
|
|
<BlurView intensity={20} tint="dark" style={styles.card}>
|
|
<Text style={styles.detailTitle}>Genres</Text>
|
|
<View style={styles.genreRow}>
|
|
{genres.map((g) => (
|
|
<View key={g} style={styles.genrePill}>
|
|
<Text style={styles.genrePillText}>{g}</Text>
|
|
</View>
|
|
))}
|
|
</View>
|
|
</BlurView>
|
|
<BlurView intensity={20} tint="dark" style={styles.card}>
|
|
<Text style={styles.detailTitle}>Produktion</Text>
|
|
<Text style={styles.detailLabel}>{streamingService}</Text>
|
|
</BlurView>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
width: "100%",
|
|
paddingHorizontal: 16,
|
|
paddingTop: 12,
|
|
paddingBottom: 20,
|
|
gap: 12,
|
|
backgroundColor: "transparent",
|
|
},
|
|
card: {
|
|
borderRadius: 20,
|
|
overflow: "hidden",
|
|
padding: 18,
|
|
borderWidth: StyleSheet.hairlineWidth,
|
|
borderColor: "rgba(255,255,255,0.08)",
|
|
},
|
|
detailTitle: {
|
|
color: "rgba(255,255,255,0.95)",
|
|
fontSize: 15,
|
|
fontWeight: "700",
|
|
marginBottom: 8,
|
|
letterSpacing: 0.2,
|
|
},
|
|
detailLabel: {
|
|
color: "rgba(255,255,255,0.65)",
|
|
fontSize: 14,
|
|
lineHeight: 22,
|
|
fontWeight: "400",
|
|
},
|
|
genreRow: {
|
|
flexDirection: "row",
|
|
flexWrap: "wrap",
|
|
gap: 8,
|
|
},
|
|
genrePill: {
|
|
backgroundColor: "rgba(255,255,255,0.1)",
|
|
paddingHorizontal: 14,
|
|
paddingVertical: 6,
|
|
borderRadius: 16,
|
|
},
|
|
genrePillText: {
|
|
color: "rgba(255,255,255,0.8)",
|
|
fontSize: 13,
|
|
fontWeight: "500",
|
|
},
|
|
});
|
|
|
|
export default ParticipantDetails;
|