b833198e9d
- Replace all Ionicons with native SF Symbols via expo-symbols SymbolView - Create reusable Icon wrapper component (src/shared/components/Icon.tsx) - Remove @expo/vector-icons and lucide-react dependencies - Refactor explore tab with filters, search, and category browsing - Add collections and programs data with Supabase integration - Add explore filter store and filter sheet - Update i18n strings (en, de, es, fr) for new explore features - Update test mocks and remove stale snapshots - Add user fitness level to user store and types
629 lines
21 KiB
TypeScript
629 lines
21 KiB
TypeScript
/**
|
|
* TabataFit Activity Screen
|
|
* Premium stats dashboard — streak, rings, weekly chart, history
|
|
*/
|
|
|
|
import { View, StyleSheet, ScrollView, Dimensions, Pressable } from 'react-native'
|
|
import { useSafeAreaInsets } from 'react-native-safe-area-context'
|
|
import { useRouter } from 'expo-router'
|
|
import { LinearGradient } from 'expo-linear-gradient'
|
|
import { BlurView } from 'expo-blur'
|
|
import { Icon, type IconName } from '@/src/shared/components/Icon'
|
|
import Svg, { Circle } from 'react-native-svg'
|
|
|
|
import { useMemo } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { useActivityStore, getWeeklyActivity } from '@/src/shared/stores'
|
|
import { getWorkoutById } from '@/src/shared/data'
|
|
import { ACHIEVEMENTS } from '@/src/shared/data'
|
|
import { StyledText } from '@/src/shared/components/StyledText'
|
|
|
|
import { useThemeColors, BRAND, PHASE, GRADIENTS } from '@/src/shared/theme'
|
|
import type { ThemeColors } from '@/src/shared/theme/types'
|
|
import { SPACING, LAYOUT } from '@/src/shared/constants/spacing'
|
|
import { RADIUS } from '@/src/shared/constants/borderRadius'
|
|
|
|
const { width: SCREEN_WIDTH } = Dimensions.get('window')
|
|
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|
// STAT RING — Custom circular progress (pure RN, no SwiftUI)
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|
|
|
function StatRing({
|
|
value,
|
|
max,
|
|
color,
|
|
size = 64,
|
|
}: {
|
|
value: number
|
|
max: number
|
|
color: string
|
|
size?: number
|
|
}) {
|
|
const colors = useThemeColors()
|
|
const strokeWidth = 5
|
|
const radius = (size - strokeWidth) / 2
|
|
const circumference = 2 * Math.PI * radius
|
|
const progress = Math.min(value / max, 1)
|
|
const strokeDashoffset = circumference * (1 - progress)
|
|
|
|
return (
|
|
<Svg width={size} height={size}>
|
|
{/* Track */}
|
|
<Circle
|
|
cx={size / 2}
|
|
cy={size / 2}
|
|
r={radius}
|
|
stroke={colors.bg.overlay2}
|
|
strokeWidth={strokeWidth}
|
|
fill="none"
|
|
/>
|
|
{/* Progress */}
|
|
<Circle
|
|
cx={size / 2}
|
|
cy={size / 2}
|
|
r={radius}
|
|
stroke={color}
|
|
strokeWidth={strokeWidth}
|
|
fill="none"
|
|
strokeDasharray={circumference}
|
|
strokeDashoffset={strokeDashoffset}
|
|
strokeLinecap="round"
|
|
transform={`rotate(-90 ${size / 2} ${size / 2})`}
|
|
opacity={progress > 0 ? 1 : 0.3}
|
|
/>
|
|
</Svg>
|
|
)
|
|
}
|
|
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|
// STAT CARD
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|
|
|
function StatCard({
|
|
label,
|
|
value,
|
|
max,
|
|
color,
|
|
icon,
|
|
}: {
|
|
label: string
|
|
value: number
|
|
max: number
|
|
color: string
|
|
icon: IconName
|
|
}) {
|
|
const colors = useThemeColors()
|
|
const styles = useMemo(() => createStyles(colors), [colors])
|
|
return (
|
|
<View style={styles.statCard}>
|
|
<BlurView intensity={colors.glass.blurLight} tint={colors.glass.blurTint} style={StyleSheet.absoluteFill} />
|
|
<View style={styles.statCardInner}>
|
|
<StatRing value={value} max={max} color={color} size={52} />
|
|
<View style={{ flex: 1, marginLeft: SPACING[3] }}>
|
|
<StyledText size={24} weight="bold" color={colors.text.primary}>
|
|
{String(value)}
|
|
</StyledText>
|
|
<StyledText size={12} color={colors.text.tertiary}>
|
|
{label}
|
|
</StyledText>
|
|
</View>
|
|
<Icon name={icon} size={18} tintColor={color} />
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|
// WEEKLY BAR
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|
|
|
function WeeklyBar({
|
|
day,
|
|
completed,
|
|
isToday,
|
|
}: {
|
|
day: string
|
|
completed: boolean
|
|
isToday: boolean
|
|
}) {
|
|
const colors = useThemeColors()
|
|
const styles = useMemo(() => createStyles(colors), [colors])
|
|
return (
|
|
<View style={styles.weekBarColumn}>
|
|
<View style={[styles.weekBar, completed && styles.weekBarFilled]}>
|
|
{completed && (
|
|
<LinearGradient
|
|
colors={[BRAND.PRIMARY, BRAND.PRIMARY_LIGHT]}
|
|
style={[StyleSheet.absoluteFill, { borderRadius: 4 }]}
|
|
/>
|
|
)}
|
|
</View>
|
|
<StyledText
|
|
size={11}
|
|
weight={isToday ? 'bold' : 'regular'}
|
|
color={isToday ? colors.text.primary : colors.text.hint}
|
|
>
|
|
{day}
|
|
</StyledText>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|
// EMPTY STATE
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|
|
|
function EmptyState({ onStartWorkout }: { onStartWorkout: () => void }) {
|
|
const { t } = useTranslation()
|
|
const colors = useThemeColors()
|
|
const styles = useMemo(() => createStyles(colors), [colors])
|
|
|
|
return (
|
|
<View style={styles.emptyState}>
|
|
<View style={styles.emptyIconCircle}>
|
|
<Icon name="flame" size={48} tintColor={BRAND.PRIMARY} />
|
|
</View>
|
|
<StyledText size={22} weight="bold" color={colors.text.primary} style={styles.emptyTitle}>
|
|
{t('screens:activity.emptyTitle')}
|
|
</StyledText>
|
|
<StyledText size={15} color={colors.text.tertiary} style={styles.emptySubtitle}>
|
|
{t('screens:activity.emptySubtitle')}
|
|
</StyledText>
|
|
<Pressable style={styles.emptyCtaButton} onPress={onStartWorkout}>
|
|
<LinearGradient
|
|
colors={GRADIENTS.CTA}
|
|
start={{ x: 0, y: 0 }}
|
|
end={{ x: 1, y: 1 }}
|
|
style={StyleSheet.absoluteFill}
|
|
/>
|
|
<Icon name="play.fill" size={18} tintColor="#FFFFFF" style={{ marginRight: SPACING[2] }} />
|
|
<StyledText size={16} weight="semibold" color="#FFFFFF">
|
|
{t('screens:activity.startFirstWorkout')}
|
|
</StyledText>
|
|
</Pressable>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|
// MAIN SCREEN
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|
|
|
const DAY_KEYS = ['days.sun', 'days.mon', 'days.tue', 'days.wed', 'days.thu', 'days.fri', 'days.sat'] as const
|
|
|
|
export default function ActivityScreen() {
|
|
const { t } = useTranslation()
|
|
const insets = useSafeAreaInsets()
|
|
const router = useRouter()
|
|
const colors = useThemeColors()
|
|
const styles = useMemo(() => createStyles(colors), [colors])
|
|
const streak = useActivityStore((s) => s.streak)
|
|
const history = useActivityStore((s) => s.history)
|
|
const totalWorkouts = history.length
|
|
const totalMinutes = useMemo(() => history.reduce((sum, r) => sum + r.durationMinutes, 0), [history])
|
|
const totalCalories = useMemo(() => history.reduce((sum, r) => sum + r.calories, 0), [history])
|
|
const recentWorkouts = useMemo(() => history.slice(0, 5), [history])
|
|
const weeklyActivity = useMemo(() => getWeeklyActivity(history), [history])
|
|
|
|
const today = new Date().getDay() // 0=Sun
|
|
|
|
// Check achievements
|
|
const unlockedAchievements = ACHIEVEMENTS.filter(a => {
|
|
switch (a.type) {
|
|
case 'workouts': return totalWorkouts >= a.requirement
|
|
case 'streak': return streak.longest >= a.requirement
|
|
case 'minutes': return totalMinutes >= a.requirement
|
|
case 'calories': return totalCalories >= a.requirement
|
|
default: return false
|
|
}
|
|
})
|
|
const displayAchievements = ACHIEVEMENTS.slice(0, 4).map(a => ({
|
|
...a,
|
|
unlocked: unlockedAchievements.some(u => u.id === a.id),
|
|
}))
|
|
|
|
const formatDate = (timestamp: number) => {
|
|
const now = Date.now()
|
|
const diff = now - timestamp
|
|
if (diff < 86400000) return t('screens:activity.today')
|
|
if (diff < 172800000) return t('screens:activity.yesterday')
|
|
return t('screens:activity.daysAgo', { count: Math.floor(diff / 86400000) })
|
|
}
|
|
|
|
return (
|
|
<View style={[styles.container, { paddingTop: insets.top }]}>
|
|
<ScrollView
|
|
style={styles.scrollView}
|
|
contentContainerStyle={[styles.scrollContent, { paddingBottom: insets.bottom + 100 }]}
|
|
showsVerticalScrollIndicator={false}
|
|
>
|
|
{/* Header */}
|
|
<StyledText
|
|
size={34}
|
|
weight="bold"
|
|
color={colors.text.primary}
|
|
style={{ marginBottom: SPACING[6] }}
|
|
>
|
|
{t('screens:activity.title')}
|
|
</StyledText>
|
|
|
|
{/* Empty state when no history */}
|
|
{history.length === 0 ? (
|
|
<EmptyState onStartWorkout={() => router.push('/(tabs)/explore' as any)} />
|
|
) : (
|
|
<>
|
|
{/* Streak Banner */}
|
|
<View style={styles.streakBanner}>
|
|
<LinearGradient
|
|
colors={GRADIENTS.CTA}
|
|
start={{ x: 0, y: 0 }}
|
|
end={{ x: 1, y: 1 }}
|
|
style={StyleSheet.absoluteFill}
|
|
/>
|
|
<View style={styles.streakRow}>
|
|
<View style={styles.streakIconWrap}>
|
|
<Icon name="flame.fill" size={28} tintColor="#FFFFFF" />
|
|
</View>
|
|
<View style={{ flex: 1 }}>
|
|
<StyledText size={28} weight="bold" color="#FFFFFF">
|
|
{String(streak.current || 0)}
|
|
</StyledText>
|
|
<StyledText size={13} color="rgba(255,255,255,0.8)">
|
|
{t('screens:activity.dayStreak')}
|
|
</StyledText>
|
|
</View>
|
|
<View style={styles.streakMeta}>
|
|
<StyledText size={11} color="rgba(255,255,255,0.6)">
|
|
{t('screens:activity.longest')}
|
|
</StyledText>
|
|
<StyledText size={20} weight="bold" color="#FFFFFF">
|
|
{String(streak.longest)}
|
|
</StyledText>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
|
|
{/* Stats Grid — 2x2 */}
|
|
<View style={styles.statsGrid}>
|
|
<StatCard
|
|
label={t('screens:activity.workouts')}
|
|
value={totalWorkouts}
|
|
max={100}
|
|
color={BRAND.PRIMARY}
|
|
icon="dumbbell"
|
|
/>
|
|
<StatCard
|
|
label={t('screens:activity.minutes')}
|
|
value={totalMinutes}
|
|
max={300}
|
|
color={PHASE.REST}
|
|
icon="clock"
|
|
/>
|
|
<StatCard
|
|
label={t('screens:activity.calories')}
|
|
value={totalCalories}
|
|
max={5000}
|
|
color={BRAND.SECONDARY}
|
|
icon="bolt"
|
|
/>
|
|
<StatCard
|
|
label={t('screens:activity.bestStreak')}
|
|
value={streak.longest}
|
|
max={30}
|
|
color={BRAND.SUCCESS}
|
|
icon="arrow.up.right"
|
|
/>
|
|
</View>
|
|
|
|
{/* This Week */}
|
|
<View style={styles.section}>
|
|
<StyledText size={20} weight="semibold" color={colors.text.primary} style={{ marginBottom: SPACING[4] }}>
|
|
{t('screens:activity.thisWeek')}
|
|
</StyledText>
|
|
<View style={styles.weekCard}>
|
|
<BlurView intensity={colors.glass.blurLight} tint={colors.glass.blurTint} style={StyleSheet.absoluteFill} />
|
|
<View style={styles.weekBarsRow}>
|
|
{weeklyActivity.map((d, i) => (
|
|
<WeeklyBar
|
|
key={i}
|
|
day={t(DAY_KEYS[i])}
|
|
completed={d.completed}
|
|
isToday={i === today}
|
|
/>
|
|
))}
|
|
</View>
|
|
<View style={styles.weekSummary}>
|
|
<StyledText size={13} color={colors.text.tertiary}>
|
|
{t('screens:activity.ofDays', { completed: weeklyActivity.filter(d => d.completed).length })}
|
|
</StyledText>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
|
|
{/* Recent Workouts */}
|
|
{recentWorkouts.length > 0 && (
|
|
<View style={styles.section}>
|
|
<StyledText size={20} weight="semibold" color={colors.text.primary} style={{ marginBottom: SPACING[4] }}>
|
|
{t('screens:activity.recent')}
|
|
</StyledText>
|
|
<View style={styles.recentCard}>
|
|
<BlurView intensity={colors.glass.blurLight} tint={colors.glass.blurTint} style={StyleSheet.absoluteFill} />
|
|
{recentWorkouts.map((result, idx) => {
|
|
const workout = getWorkoutById(result.workoutId)
|
|
const workoutTitle = workout ? t(`content:workouts.${workout.id}`, { defaultValue: workout.title }) : t('screens:activity.workouts')
|
|
return (
|
|
<View key={result.id}>
|
|
<View style={styles.recentRow}>
|
|
<View style={styles.recentDot}>
|
|
<View style={[styles.dot, { backgroundColor: BRAND.PRIMARY }]} />
|
|
</View>
|
|
<View style={{ flex: 1 }}>
|
|
<StyledText size={15} weight="semibold" color={colors.text.primary}>
|
|
{workoutTitle}
|
|
</StyledText>
|
|
<StyledText size={12} color={colors.text.tertiary}>
|
|
{formatDate(result.completedAt) + ' \u00B7 ' + t('units.minUnit', { count: result.durationMinutes })}
|
|
</StyledText>
|
|
</View>
|
|
<StyledText size={14} weight="semibold" color={BRAND.PRIMARY}>
|
|
{t('units.calUnit', { count: result.calories })}
|
|
</StyledText>
|
|
</View>
|
|
{idx < recentWorkouts.length - 1 && <View style={styles.recentDivider} />}
|
|
</View>
|
|
)
|
|
})}
|
|
</View>
|
|
</View>
|
|
)}
|
|
|
|
{/* Achievements */}
|
|
<View style={styles.section}>
|
|
<StyledText size={20} weight="semibold" color={colors.text.primary} style={{ marginBottom: SPACING[4] }}>
|
|
{t('screens:activity.achievements')}
|
|
</StyledText>
|
|
<View style={styles.achievementsRow}>
|
|
{displayAchievements.map((a) => (
|
|
<View key={a.id} style={styles.achievementCard}>
|
|
<BlurView intensity={colors.glass.blurLight} tint={colors.glass.blurTint} style={StyleSheet.absoluteFill} />
|
|
<View
|
|
style={[
|
|
styles.achievementIcon,
|
|
a.unlocked
|
|
? { backgroundColor: 'rgba(255, 107, 53, 0.15)' }
|
|
: { backgroundColor: 'rgba(255, 255, 255, 0.04)' },
|
|
]}
|
|
>
|
|
<Icon
|
|
name={a.unlocked ? 'trophy.fill' : 'lock.fill'}
|
|
size={22}
|
|
tintColor={a.unlocked ? BRAND.PRIMARY : colors.text.hint}
|
|
/>
|
|
</View>
|
|
<StyledText
|
|
size={11}
|
|
weight="semibold"
|
|
color={a.unlocked ? colors.text.primary : colors.text.hint}
|
|
numberOfLines={1}
|
|
style={{ marginTop: SPACING[2], textAlign: 'center' }}
|
|
>
|
|
{t(`content:achievements.${a.id}.title`, { defaultValue: a.title })}
|
|
</StyledText>
|
|
</View>
|
|
))}
|
|
</View>
|
|
</View>
|
|
</>
|
|
)}
|
|
</ScrollView>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|
// STYLES
|
|
// ═══════════════════════════════════════════════════════════════════════════
|
|
|
|
const CARD_HALF = (SCREEN_WIDTH - LAYOUT.SCREEN_PADDING * 2 - SPACING[3]) / 2
|
|
|
|
function createStyles(colors: ThemeColors) {
|
|
return StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: colors.bg.base,
|
|
},
|
|
scrollView: {
|
|
flex: 1,
|
|
},
|
|
scrollContent: {
|
|
paddingHorizontal: LAYOUT.SCREEN_PADDING,
|
|
},
|
|
|
|
// Streak
|
|
streakBanner: {
|
|
borderRadius: RADIUS.GLASS_CARD,
|
|
overflow: 'hidden',
|
|
marginBottom: SPACING[5],
|
|
...colors.shadow.md,
|
|
},
|
|
streakRow: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
paddingHorizontal: SPACING[5],
|
|
paddingVertical: SPACING[5],
|
|
gap: SPACING[4],
|
|
},
|
|
streakIconWrap: {
|
|
width: 48,
|
|
height: 48,
|
|
borderRadius: 24,
|
|
backgroundColor: 'rgba(255,255,255,0.15)',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
streakMeta: {
|
|
alignItems: 'center',
|
|
backgroundColor: 'rgba(255,255,255,0.1)',
|
|
paddingHorizontal: SPACING[4],
|
|
paddingVertical: SPACING[2],
|
|
borderRadius: RADIUS.MD,
|
|
},
|
|
|
|
// Stats 2x2
|
|
statsGrid: {
|
|
flexDirection: 'row',
|
|
flexWrap: 'wrap',
|
|
gap: SPACING[3],
|
|
marginBottom: SPACING[6],
|
|
},
|
|
statCard: {
|
|
width: CARD_HALF,
|
|
borderRadius: RADIUS.LG,
|
|
overflow: 'hidden',
|
|
borderWidth: 1,
|
|
borderColor: colors.bg.overlay2,
|
|
},
|
|
statCardInner: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
padding: SPACING[4],
|
|
},
|
|
|
|
// Section
|
|
section: {
|
|
marginBottom: SPACING[6],
|
|
},
|
|
|
|
// Weekly
|
|
weekCard: {
|
|
borderRadius: RADIUS.LG,
|
|
overflow: 'hidden',
|
|
borderWidth: 1,
|
|
borderColor: colors.bg.overlay2,
|
|
paddingTop: SPACING[5],
|
|
paddingBottom: SPACING[4],
|
|
},
|
|
weekBarsRow: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-around',
|
|
alignItems: 'flex-end',
|
|
paddingHorizontal: SPACING[4],
|
|
height: 100,
|
|
},
|
|
weekBarColumn: {
|
|
alignItems: 'center',
|
|
flex: 1,
|
|
gap: SPACING[2],
|
|
},
|
|
weekBar: {
|
|
width: 24,
|
|
height: 60,
|
|
borderRadius: 4,
|
|
backgroundColor: colors.border.glassLight,
|
|
overflow: 'hidden',
|
|
},
|
|
weekBarFilled: {
|
|
backgroundColor: BRAND.PRIMARY,
|
|
},
|
|
weekSummary: {
|
|
alignItems: 'center',
|
|
marginTop: SPACING[3],
|
|
paddingTop: SPACING[3],
|
|
borderTopWidth: StyleSheet.hairlineWidth,
|
|
borderTopColor: colors.bg.overlay2,
|
|
marginHorizontal: SPACING[4],
|
|
},
|
|
|
|
// Recent
|
|
recentCard: {
|
|
borderRadius: RADIUS.LG,
|
|
overflow: 'hidden',
|
|
borderWidth: 1,
|
|
borderColor: colors.bg.overlay2,
|
|
paddingVertical: SPACING[2],
|
|
},
|
|
recentRow: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
paddingHorizontal: SPACING[4],
|
|
paddingVertical: SPACING[3],
|
|
},
|
|
recentDot: {
|
|
width: 24,
|
|
alignItems: 'center',
|
|
marginRight: SPACING[3],
|
|
},
|
|
dot: {
|
|
width: 8,
|
|
height: 8,
|
|
borderRadius: 4,
|
|
},
|
|
recentDivider: {
|
|
height: StyleSheet.hairlineWidth,
|
|
backgroundColor: colors.border.glassLight,
|
|
marginLeft: SPACING[4] + 24 + SPACING[3],
|
|
},
|
|
|
|
// Achievements
|
|
achievementsRow: {
|
|
flexDirection: 'row',
|
|
gap: SPACING[3],
|
|
},
|
|
achievementCard: {
|
|
flex: 1,
|
|
aspectRatio: 0.9,
|
|
borderRadius: RADIUS.LG,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
borderWidth: 1,
|
|
borderColor: colors.bg.overlay2,
|
|
overflow: 'hidden',
|
|
paddingHorizontal: SPACING[1],
|
|
},
|
|
achievementIcon: {
|
|
width: 44,
|
|
height: 44,
|
|
borderRadius: 22,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
|
|
// Empty State
|
|
emptyState: {
|
|
flex: 1,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
paddingTop: SPACING[10],
|
|
paddingHorizontal: SPACING[6],
|
|
},
|
|
emptyIconCircle: {
|
|
width: 96,
|
|
height: 96,
|
|
borderRadius: 48,
|
|
backgroundColor: `${BRAND.PRIMARY}15`,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
marginBottom: SPACING[6],
|
|
},
|
|
emptyTitle: {
|
|
textAlign: 'center' as const,
|
|
marginBottom: SPACING[2],
|
|
},
|
|
emptySubtitle: {
|
|
textAlign: 'center' as const,
|
|
lineHeight: 22,
|
|
marginBottom: SPACING[8],
|
|
},
|
|
emptyCtaButton: {
|
|
flexDirection: 'row' as const,
|
|
alignItems: 'center' as const,
|
|
justifyContent: 'center' as const,
|
|
height: 52,
|
|
paddingHorizontal: SPACING[8],
|
|
borderRadius: RADIUS.LG,
|
|
overflow: 'hidden' as const,
|
|
},
|
|
})
|
|
}
|