107 lines
3.2 KiB
TypeScript
107 lines
3.2 KiB
TypeScript
import React from 'react';
|
|
import { XStack } from '@tamagui/stacks';
|
|
import { SizableText as Text } from '@tamagui/text';
|
|
import { Button } from '@tamagui/button';
|
|
import { Bell, Settings } from 'lucide-react';
|
|
import { useAppearance } from '@/hooks/use-appearance';
|
|
|
|
type TopBarProps = {
|
|
eventName: string;
|
|
onProfilePress?: () => void;
|
|
onNotificationsPress?: () => void;
|
|
notificationCount?: number;
|
|
};
|
|
|
|
export default function TopBar({
|
|
eventName,
|
|
onProfilePress,
|
|
onNotificationsPress,
|
|
notificationCount = 0,
|
|
}: TopBarProps) {
|
|
const { resolved } = useAppearance();
|
|
const isDark = resolved === 'dark';
|
|
const [animationKey, setAnimationKey] = React.useState(0);
|
|
|
|
React.useEffect(() => {
|
|
setAnimationKey((prev) => prev + 1);
|
|
}, [eventName]);
|
|
|
|
return (
|
|
<XStack
|
|
alignItems="center"
|
|
justifyContent="space-between"
|
|
paddingHorizontal="$4"
|
|
paddingVertical="$3"
|
|
style={{
|
|
backgroundColor: 'transparent',
|
|
backdropFilter: 'saturate(120%) blur(8px)',
|
|
WebkitBackdropFilter: 'saturate(120%) blur(8px)',
|
|
}}
|
|
>
|
|
<Text
|
|
key={animationKey}
|
|
fontSize="$8"
|
|
fontFamily="$display"
|
|
fontWeight="$8"
|
|
numberOfLines={1}
|
|
className="guest-topbar-title"
|
|
flexShrink={1}
|
|
minWidth={0}
|
|
style={{ fontSize: 'clamp(20px, 4.6vw, 30px)', lineHeight: '1.1' }}
|
|
>
|
|
{eventName}
|
|
</Text>
|
|
<XStack gap="$2" alignItems="center">
|
|
<Button
|
|
size="$3"
|
|
circular
|
|
borderWidth={1}
|
|
borderColor={isDark ? 'rgba(255, 255, 255, 0.14)' : 'rgba(15, 23, 42, 0.14)'}
|
|
style={{
|
|
backgroundColor: isDark ? 'rgba(255, 255, 255, 0.08)' : 'rgba(15, 23, 42, 0.06)',
|
|
boxShadow: isDark ? '0 8px 18px rgba(2, 6, 23, 0.4)' : '0 8px 18px rgba(15, 23, 42, 0.12)',
|
|
position: 'relative',
|
|
}}
|
|
onPress={onNotificationsPress}
|
|
>
|
|
<Bell size={16} color={isDark ? '#F8FAFF' : '#0F172A'} />
|
|
{notificationCount > 0 ? (
|
|
<span
|
|
style={{
|
|
position: 'absolute',
|
|
top: -2,
|
|
right: -2,
|
|
width: 18,
|
|
height: 18,
|
|
borderRadius: 999,
|
|
backgroundColor: '#F97316',
|
|
color: '#0B101E',
|
|
fontSize: 10,
|
|
fontWeight: 700,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
}}
|
|
>
|
|
{notificationCount > 9 ? '9+' : notificationCount}
|
|
</span>
|
|
) : null}
|
|
</Button>
|
|
<Button
|
|
size="$3"
|
|
circular
|
|
borderWidth={1}
|
|
borderColor={isDark ? 'rgba(255, 255, 255, 0.14)' : 'rgba(15, 23, 42, 0.14)'}
|
|
style={{
|
|
backgroundColor: isDark ? 'rgba(255, 255, 255, 0.08)' : 'rgba(15, 23, 42, 0.06)',
|
|
boxShadow: isDark ? '0 8px 18px rgba(2, 6, 23, 0.4)' : '0 8px 18px rgba(15, 23, 42, 0.12)',
|
|
}}
|
|
onPress={onProfilePress}
|
|
>
|
|
<Settings size={16} color={isDark ? '#F8FAFF' : '#0F172A'} />
|
|
</Button>
|
|
</XStack>
|
|
</XStack>
|
|
);
|
|
}
|