764 lines
20 KiB
TypeScript
764 lines
20 KiB
TypeScript
import { ThemedText } from "@/components/themed-text";
|
|
import { ThemedView } from "@/components/themed-view";
|
|
import { IconSymbol } from "@/components/ui/icon-symbol";
|
|
import { LiveScoreMatch } from "@/types/api";
|
|
import { LinearGradient } from "expo-linear-gradient";
|
|
import React, { useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import {
|
|
Image,
|
|
Modal,
|
|
Pressable,
|
|
StyleSheet,
|
|
Switch,
|
|
TouchableOpacity,
|
|
View,
|
|
} from "react-native";
|
|
|
|
interface StatsCardProps {
|
|
match: LiveScoreMatch;
|
|
isDark: boolean;
|
|
}
|
|
|
|
export function StatsCard({ match, isDark }: StatsCardProps) {
|
|
const { t } = useTranslation();
|
|
const [flagSwitch, setFlagSwitch] = useState(true);
|
|
const [cardSwitch, setCardSwitch] = useState(true);
|
|
const [showInfo, setShowInfo] = useState(false);
|
|
|
|
// 实时时间与进度计算
|
|
const getInitialMinutes = () => {
|
|
const statusIdx = parseInt(match.event_status) || 0;
|
|
const timeParts = match.event_time?.split(":") || [];
|
|
const tMin = parseInt(timeParts[0]) || 0;
|
|
const tSec = parseInt(timeParts[1]) || 0;
|
|
|
|
if (!isNaN(statusIdx) && /^\d+$/.test(match.event_status)) {
|
|
return { min: Math.max(0, statusIdx - tMin), sec: tSec };
|
|
}
|
|
return { min: tMin, sec: tSec };
|
|
};
|
|
|
|
const initial = getInitialMinutes();
|
|
const [minutes, setMinutes] = useState(initial.min);
|
|
const [seconds, setSeconds] = useState(initial.sec);
|
|
|
|
React.useEffect(() => {
|
|
const updated = getInitialMinutes();
|
|
setMinutes(updated.min);
|
|
setSeconds(updated.sec);
|
|
}, [match.event_time, match.event_status]);
|
|
|
|
React.useEffect(() => {
|
|
const statusStr = match.event_status?.toLowerCase() || "";
|
|
const isLive =
|
|
String(match.event_live) === "1" ||
|
|
statusStr.includes("live") ||
|
|
(parseInt(statusStr) > 0 && parseInt(statusStr) < 120);
|
|
|
|
if (!isLive || statusStr.includes("ht")) return;
|
|
|
|
const interval = setInterval(() => {
|
|
setSeconds((s) => {
|
|
if (s >= 59) {
|
|
setMinutes((m) => m + 1);
|
|
return 0;
|
|
}
|
|
return s + 1;
|
|
});
|
|
}, 1000);
|
|
return () => clearInterval(interval);
|
|
}, [match.event_key, match.event_live, match.event_status]);
|
|
|
|
const displayTime = `${minutes}:${seconds.toString().padStart(2, "0")}`;
|
|
const totalSeconds = minutes * 60 + seconds;
|
|
const progressPercent = Math.min(100, (totalSeconds / (90 * 60)) * 100);
|
|
|
|
// 从 statistics 中提取数据
|
|
const stats = match.statistics || [];
|
|
const getStatValue = (type: string) => {
|
|
const stat = stats.find((s) => s.type === type);
|
|
return stat
|
|
? { home: stat.home, away: stat.away }
|
|
: { home: "0", away: "0" };
|
|
};
|
|
|
|
const possession = getStatValue("Ball Possession");
|
|
const corners = getStatValue("Corners");
|
|
const yellowCards = getStatValue("Yellow Cards");
|
|
|
|
// 解析控球率数值 (例如 "53%" -> 53)
|
|
const homePossession =
|
|
parseInt(possession.home.toString().replace("%", "")) || 50;
|
|
const awayPossession =
|
|
parseInt(possession.away.toString().replace("%", "")) || 50;
|
|
|
|
// 用随机数据模拟压力曲线
|
|
const generateData = () => {
|
|
return Array.from({ length: 90 }, (_, i) => ({
|
|
time: i,
|
|
home: Math.sin(i / 5) * 20 + Math.random() * 10,
|
|
away: Math.cos(i / 4) * 15 + Math.random() * 12,
|
|
}));
|
|
};
|
|
|
|
const chartData = generateData();
|
|
|
|
const iconTintColor = isDark ? "#888" : "#CCC";
|
|
const switchBg = isDark ? "#2C2C2E" : "#F0F0F0";
|
|
|
|
return (
|
|
<ThemedView style={[styles.container, isDark && styles.darkContainer]}>
|
|
{/* Header */}
|
|
<View style={styles.header}>
|
|
<View style={styles.headerLeft}>
|
|
<ThemedText style={styles.title}>
|
|
{t("detail.stats_card.title")}
|
|
</ThemedText>
|
|
<TouchableOpacity onPress={() => setShowInfo(true)}>
|
|
<IconSymbol
|
|
name="information-circle-outline"
|
|
size={16}
|
|
color={iconTintColor}
|
|
/>
|
|
</TouchableOpacity>
|
|
</View>
|
|
<View style={styles.switches}>
|
|
<View style={[styles.switchWrapper, { backgroundColor: switchBg }]}>
|
|
<IconSymbol name="flag" size={14} color="#4CAF50" />
|
|
<Switch
|
|
value={flagSwitch}
|
|
onValueChange={setFlagSwitch}
|
|
trackColor={{ false: "#DDD", true: "#EEE" }}
|
|
thumbColor={flagSwitch ? "#A5D6A7" : "#FFF"}
|
|
style={styles.smallSwitch}
|
|
/>
|
|
</View>
|
|
<View style={[styles.switchWrapper, { backgroundColor: switchBg }]}>
|
|
<View style={[styles.miniCard, { backgroundColor: "#FFD700" }]} />
|
|
<Switch
|
|
value={cardSwitch}
|
|
onValueChange={setCardSwitch}
|
|
trackColor={{ false: "#DDD", true: "#3b5998" }}
|
|
thumbColor="#FFF"
|
|
style={styles.smallSwitch}
|
|
/>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
|
|
{/* Momentum Chart Area */}
|
|
<View style={styles.chartWrapper}>
|
|
<View style={styles.teamLogos}>
|
|
<Image
|
|
source={{ uri: match.home_team_logo }}
|
|
style={styles.chartLogo}
|
|
/>
|
|
<Image
|
|
source={{ uri: match.away_team_logo }}
|
|
style={[styles.chartLogo, { marginTop: 12 }]}
|
|
/>
|
|
</View>
|
|
|
|
<View style={styles.chartArea}>
|
|
{/* 背景色带 */}
|
|
<LinearGradient
|
|
colors={["rgba(59, 89, 152, 0.05)", "rgba(255, 171, 0, 0.05)"]}
|
|
style={styles.bgGradient}
|
|
/>
|
|
|
|
{/* 网格线和时间刻度 */}
|
|
<View style={styles.gridContainer}>
|
|
{["0'", "15'", "30'", "HT", "60'", "75'", "90'"].map((label, i) => (
|
|
<View key={i} style={styles.gridLine}>
|
|
<View style={styles.line} />
|
|
<ThemedText style={styles.gridLabel}>{label}</ThemedText>
|
|
</View>
|
|
))}
|
|
</View>
|
|
|
|
{/* 压力曲线模拟 (使用密集的小条形模拟波形) */}
|
|
<View style={styles.waveContainer}>
|
|
{chartData.map((d, i) => (
|
|
<React.Fragment key={i}>
|
|
<View
|
|
style={[
|
|
styles.waveBar,
|
|
{
|
|
left: `${(i / 90) * 100}%`,
|
|
height: Math.abs(d.home),
|
|
bottom: "50%",
|
|
backgroundColor: "rgba(59, 89, 152, 0.8)",
|
|
borderTopLeftRadius: 1,
|
|
borderTopRightRadius: 1,
|
|
},
|
|
]}
|
|
/>
|
|
<View
|
|
style={[
|
|
styles.waveBar,
|
|
{
|
|
left: `${(i / 90) * 100}%`,
|
|
height: Math.abs(d.away),
|
|
top: "50%",
|
|
backgroundColor: "rgba(255, 171, 0, 0.8)",
|
|
borderBottomLeftRadius: 1,
|
|
borderBottomRightRadius: 1,
|
|
},
|
|
]}
|
|
/>
|
|
</React.Fragment>
|
|
))}
|
|
</View>
|
|
|
|
{/* 比赛事件标记 (假点位) */}
|
|
<View style={[styles.eventMarker, { left: "12%", top: "10%" }]}>
|
|
<View style={[styles.square, { backgroundColor: "#FFD700" }]} />
|
|
</View>
|
|
<View style={[styles.eventMarker, { left: "55%", top: "10%" }]}>
|
|
<View style={[styles.square, { backgroundColor: "#FFD700" }]} />
|
|
</View>
|
|
<View style={[styles.eventMarker, { left: "65%", top: "10%" }]}>
|
|
<View style={[styles.square, { backgroundColor: "#FF4444" }]} />
|
|
</View>
|
|
<View style={[styles.eventMarker, { left: "52%", bottom: "25%" }]}>
|
|
<View style={styles.goalBox}>
|
|
<IconSymbol name="football-outline" size={10} color="#000" />
|
|
<View
|
|
style={[
|
|
styles.square,
|
|
{
|
|
backgroundColor: "#FFD700",
|
|
width: 8,
|
|
height: 10,
|
|
borderRadius: 1,
|
|
},
|
|
]}
|
|
/>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
|
|
{/* Time Progress Slider */}
|
|
<View style={styles.sliderContainer}>
|
|
<ThemedText style={styles.currentTime}>{displayTime}</ThemedText>
|
|
<View style={styles.trackContainer}>
|
|
<View style={[styles.track, isDark && { backgroundColor: "#333" }]} />
|
|
<View
|
|
style={[styles.filledTrack, { width: `${progressPercent}%` }]}
|
|
/>
|
|
<View style={[styles.thumb, { left: "0%" }]} />
|
|
<View
|
|
style={[
|
|
styles.thumb,
|
|
{
|
|
left: `${progressPercent}%`,
|
|
backgroundColor: "#FFAB00",
|
|
borderColor: "#FFF",
|
|
},
|
|
]}
|
|
/>
|
|
<View
|
|
style={[
|
|
styles.thumb,
|
|
{ left: "100%", backgroundColor: isDark ? "#555" : "#333" },
|
|
]}
|
|
/>
|
|
</View>
|
|
<View style={styles.trackLabels}>
|
|
<ThemedText style={styles.trackLabel}>0:00</ThemedText>
|
|
<ThemedText style={styles.trackLabel}>HT</ThemedText>
|
|
<ThemedText style={styles.trackLabel}>FT</ThemedText>
|
|
</View>
|
|
</View>
|
|
|
|
{/* Possession & Stats Bar */}
|
|
<View style={styles.possessionSection}>
|
|
<ThemedText style={styles.possessionTitle}>
|
|
{t("detail.stats_card.possession")}
|
|
</ThemedText>
|
|
<View style={styles.possessionBarRow}>
|
|
<View
|
|
style={[
|
|
styles.posBar,
|
|
{
|
|
flex: homePossession,
|
|
backgroundColor: "#3b5998",
|
|
borderTopLeftRadius: 10,
|
|
borderBottomLeftRadius: 10,
|
|
},
|
|
]}
|
|
>
|
|
<Image
|
|
source={{ uri: match.home_team_logo }}
|
|
style={styles.posLogo}
|
|
/>
|
|
<ThemedText style={styles.posValue}>{homePossession}%</ThemedText>
|
|
</View>
|
|
<View style={{ width: 4 }} />
|
|
<View
|
|
style={[
|
|
styles.posBar,
|
|
{
|
|
flex: awayPossession,
|
|
backgroundColor: "#FFAB00",
|
|
borderTopRightRadius: 10,
|
|
borderBottomRightRadius: 10,
|
|
flexDirection: "row-reverse",
|
|
},
|
|
]}
|
|
>
|
|
<Image
|
|
source={{ uri: match.away_team_logo }}
|
|
style={styles.posLogo}
|
|
/>
|
|
<ThemedText style={styles.posValue}>{awayPossession}%</ThemedText>
|
|
</View>
|
|
</View>
|
|
|
|
<View style={styles.miniStatsRow}>
|
|
<View style={[styles.miniStatBadge, isDark && styles.darkStatBadge]}>
|
|
<ThemedText style={styles.miniStatText}>{corners.home}</ThemedText>
|
|
<IconSymbol name="flag" size={14} color="#FFAB00" />
|
|
<ThemedText style={styles.miniStatText}>{corners.away}</ThemedText>
|
|
</View>
|
|
<View style={[styles.miniStatBadge, isDark && styles.darkStatBadge]}>
|
|
<ThemedText style={styles.miniStatText}>
|
|
{yellowCards.home}
|
|
</ThemedText>
|
|
<View style={styles.yellowCardIcon} />
|
|
<ThemedText style={styles.miniStatText}>
|
|
{yellowCards.away}
|
|
</ThemedText>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
|
|
{/* Momentum Info Modal */}
|
|
<Modal
|
|
visible={showInfo}
|
|
transparent
|
|
animationType="fade"
|
|
onRequestClose={() => setShowInfo(false)}
|
|
>
|
|
<Pressable
|
|
style={styles.modalOverlay}
|
|
onPress={() => setShowInfo(false)}
|
|
>
|
|
<ThemedView
|
|
style={[styles.modalContent, isDark && styles.darkModalContent]}
|
|
>
|
|
<ThemedText style={styles.modalTitle}>
|
|
{t("detail.stats_card.info_title")}
|
|
</ThemedText>
|
|
|
|
<ThemedText style={styles.modalDesc}>
|
|
{t("detail.stats_card.info_desc")}
|
|
</ThemedText>
|
|
|
|
<View style={styles.bulletPoint}>
|
|
<ThemedText style={styles.bulletText}>
|
|
• {t("detail.stats_card.point1")}
|
|
</ThemedText>
|
|
</View>
|
|
<View style={styles.bulletPoint}>
|
|
<ThemedText style={styles.bulletText}>
|
|
• {t("detail.stats_card.point2")}
|
|
</ThemedText>
|
|
</View>
|
|
<View style={styles.bulletPoint}>
|
|
<ThemedText style={styles.bulletText}>
|
|
• {t("detail.stats_card.point3")}
|
|
</ThemedText>
|
|
</View>
|
|
|
|
<View style={styles.teamInfoRow}>
|
|
<Image
|
|
source={{ uri: match.home_team_logo }}
|
|
style={styles.miniLogo}
|
|
/>
|
|
<View style={styles.wavePlaceholder}>
|
|
{[...Array(6)].map((_, i) => (
|
|
<View
|
|
key={i}
|
|
style={[
|
|
styles.waveDot,
|
|
{
|
|
backgroundColor: "#3b5998",
|
|
marginTop: i % 2 === 0 ? 0 : 6,
|
|
},
|
|
]}
|
|
/>
|
|
))}
|
|
</View>
|
|
<ThemedText style={styles.teamDesc} numberOfLines={1}>
|
|
{match.event_home_team}
|
|
</ThemedText>
|
|
</View>
|
|
|
|
<View style={styles.teamInfoRow}>
|
|
<Image
|
|
source={{ uri: match.away_team_logo }}
|
|
style={styles.miniLogo}
|
|
/>
|
|
<View style={styles.wavePlaceholder}>
|
|
{[...Array(6)].map((_, i) => (
|
|
<View
|
|
key={i}
|
|
style={[
|
|
styles.waveDot,
|
|
{
|
|
backgroundColor: "#FFAB00",
|
|
marginTop: i % 2 === 0 ? 6 : 0,
|
|
},
|
|
]}
|
|
/>
|
|
))}
|
|
</View>
|
|
<ThemedText style={styles.teamDesc} numberOfLines={1}>
|
|
{match.event_away_team}
|
|
</ThemedText>
|
|
</View>
|
|
|
|
<TouchableOpacity
|
|
style={styles.closeButton}
|
|
onPress={() => setShowInfo(false)}
|
|
>
|
|
<ThemedText style={styles.closeButtonText}>
|
|
{t("detail.stats_card.close")}
|
|
</ThemedText>
|
|
</TouchableOpacity>
|
|
</ThemedView>
|
|
</Pressable>
|
|
</Modal>
|
|
</ThemedView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
margin: 16,
|
|
borderRadius: 20,
|
|
padding: 16,
|
|
backgroundColor: "#FFF",
|
|
marginBottom: 20,
|
|
shadowColor: "#000",
|
|
shadowOpacity: 0.05,
|
|
shadowRadius: 10,
|
|
elevation: 2,
|
|
},
|
|
darkContainer: {
|
|
backgroundColor: "#1E1E20",
|
|
},
|
|
header: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
marginBottom: 24,
|
|
},
|
|
headerLeft: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: 8,
|
|
},
|
|
title: {
|
|
fontSize: 18,
|
|
fontWeight: "500",
|
|
color: "#666",
|
|
},
|
|
switches: {
|
|
flexDirection: "row",
|
|
gap: 12,
|
|
},
|
|
switchWrapper: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
backgroundColor: "#F0F0F0",
|
|
borderRadius: 15,
|
|
paddingLeft: 8,
|
|
paddingRight: 2,
|
|
height: 30,
|
|
},
|
|
smallSwitch: {
|
|
transform: [{ scaleX: 0.6 }, { scaleY: 0.6 }],
|
|
},
|
|
miniCard: {
|
|
width: 10,
|
|
height: 14,
|
|
borderRadius: 2,
|
|
},
|
|
chartWrapper: {
|
|
flexDirection: "row",
|
|
height: 140,
|
|
marginBottom: 10,
|
|
},
|
|
teamLogos: {
|
|
width: 40,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
paddingBottom: 20,
|
|
},
|
|
chartLogo: {
|
|
width: 24,
|
|
height: 24,
|
|
borderRadius: 12,
|
|
},
|
|
chartArea: {
|
|
flex: 1,
|
|
position: "relative",
|
|
marginLeft: 8,
|
|
},
|
|
bgGradient: {
|
|
position: "absolute",
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 30,
|
|
borderRadius: 4,
|
|
},
|
|
gridContainer: {
|
|
position: "absolute",
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
},
|
|
gridLine: {
|
|
height: "100%",
|
|
alignItems: "center",
|
|
},
|
|
line: {
|
|
width: 1,
|
|
height: "100%",
|
|
backgroundColor: "#F0F0F0",
|
|
marginBottom: 4,
|
|
},
|
|
gridLabel: {
|
|
fontSize: 12,
|
|
color: "#000",
|
|
fontWeight: "500",
|
|
},
|
|
waveContainer: {
|
|
position: "absolute",
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 30,
|
|
},
|
|
waveBar: {
|
|
position: "absolute",
|
|
width: 1.5,
|
|
},
|
|
eventMarker: {
|
|
position: "absolute",
|
|
alignItems: "center",
|
|
},
|
|
square: {
|
|
width: 12,
|
|
height: 16,
|
|
borderRadius: 2,
|
|
},
|
|
goalBox: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: 2,
|
|
backgroundColor: "#FFF",
|
|
padding: 2,
|
|
borderRadius: 4,
|
|
borderWidth: 1,
|
|
borderColor: "#E0E0E0",
|
|
},
|
|
sliderContainer: {
|
|
marginTop: 20,
|
|
paddingHorizontal: 10,
|
|
},
|
|
currentTime: {
|
|
fontSize: 14,
|
|
color: "#4CAF50",
|
|
fontWeight: "700",
|
|
textAlign: "center",
|
|
marginBottom: 4,
|
|
marginLeft: "10%", // Offset roughly
|
|
},
|
|
trackContainer: {
|
|
height: 20,
|
|
justifyContent: "center",
|
|
position: "relative",
|
|
},
|
|
track: {
|
|
height: 3,
|
|
backgroundColor: "#EEE",
|
|
borderRadius: 2,
|
|
},
|
|
filledTrack: {
|
|
position: "absolute",
|
|
height: 3,
|
|
backgroundColor: "#3b5998",
|
|
borderRadius: 2,
|
|
},
|
|
thumb: {
|
|
position: "absolute",
|
|
width: 10,
|
|
height: 10,
|
|
borderRadius: 5,
|
|
backgroundColor: "#3b5998",
|
|
borderWidth: 2,
|
|
borderColor: "#FFF",
|
|
marginLeft: -5,
|
|
},
|
|
trackLabels: {
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
marginTop: 8,
|
|
},
|
|
trackLabel: {
|
|
fontSize: 12,
|
|
color: "#666",
|
|
fontWeight: "500",
|
|
},
|
|
possessionSection: {
|
|
marginTop: 24,
|
|
alignItems: "center",
|
|
},
|
|
possessionTitle: {
|
|
fontSize: 16,
|
|
color: "#666",
|
|
marginBottom: 12,
|
|
},
|
|
possessionBarRow: {
|
|
flexDirection: "row",
|
|
height: 36,
|
|
width: "100%",
|
|
paddingHorizontal: 4,
|
|
},
|
|
posBar: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
paddingHorizontal: 12,
|
|
gap: 8,
|
|
},
|
|
posLogo: {
|
|
width: 20,
|
|
height: 20,
|
|
borderRadius: 10,
|
|
backgroundColor: "#FFF",
|
|
},
|
|
posValue: {
|
|
color: "#FFF",
|
|
fontSize: 14,
|
|
fontWeight: "700",
|
|
},
|
|
miniStatsRow: {
|
|
flexDirection: "row",
|
|
justifyContent: "center",
|
|
gap: 12,
|
|
marginTop: 16,
|
|
},
|
|
miniStatBadge: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
backgroundColor: "#F5F5F5",
|
|
paddingHorizontal: 16,
|
|
paddingVertical: 6,
|
|
borderRadius: 20,
|
|
gap: 8,
|
|
minWidth: 80,
|
|
justifyContent: "center",
|
|
},
|
|
darkStatBadge: {
|
|
backgroundColor: "#2C2C2E",
|
|
},
|
|
miniStatText: {
|
|
fontSize: 14,
|
|
fontWeight: "600",
|
|
},
|
|
yellowCardIcon: {
|
|
width: 10,
|
|
height: 14,
|
|
backgroundColor: "#FFD700",
|
|
borderRadius: 2,
|
|
},
|
|
modalOverlay: {
|
|
flex: 1,
|
|
backgroundColor: "rgba(0,0,0,0.5)",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
padding: 20,
|
|
},
|
|
modalContent: {
|
|
width: "100%",
|
|
backgroundColor: "#FFF",
|
|
borderRadius: 24,
|
|
padding: 24,
|
|
shadowColor: "#000",
|
|
shadowOpacity: 0.1,
|
|
shadowRadius: 20,
|
|
elevation: 10,
|
|
},
|
|
darkModalContent: {
|
|
backgroundColor: "#1E1E20",
|
|
},
|
|
modalTitle: {
|
|
fontSize: 20,
|
|
fontWeight: "700",
|
|
marginBottom: 16,
|
|
},
|
|
modalDesc: {
|
|
fontSize: 15,
|
|
lineHeight: 22,
|
|
marginBottom: 16,
|
|
},
|
|
bulletPoint: {
|
|
marginBottom: 8,
|
|
},
|
|
bulletText: {
|
|
fontSize: 15,
|
|
lineHeight: 22,
|
|
},
|
|
teamInfoRow: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
marginTop: 16,
|
|
gap: 12,
|
|
},
|
|
miniLogo: {
|
|
width: 24,
|
|
height: 24,
|
|
borderRadius: 12,
|
|
},
|
|
wavePlaceholder: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
width: 40,
|
|
height: 20,
|
|
gap: 2,
|
|
},
|
|
waveDot: {
|
|
width: 4,
|
|
height: 4,
|
|
borderRadius: 2,
|
|
},
|
|
teamDesc: {
|
|
flex: 1,
|
|
fontSize: 14,
|
|
color: "#666",
|
|
},
|
|
closeButton: {
|
|
backgroundColor: "#4B77FF",
|
|
borderRadius: 12,
|
|
paddingVertical: 12,
|
|
alignItems: "center",
|
|
marginTop: 24,
|
|
alignSelf: "flex-end",
|
|
paddingHorizontal: 24,
|
|
},
|
|
closeButtonText: {
|
|
color: "#FFF",
|
|
fontSize: 16,
|
|
fontWeight: "600",
|
|
},
|
|
});
|