71 lines
2.0 KiB
TypeScript
71 lines
2.0 KiB
TypeScript
import React from 'react';
|
|
import { YStack } from '@tamagui/stacks';
|
|
import { useGuestThemeVariant } from '../lib/guestTheme';
|
|
|
|
type PhotoFrameTileProps = {
|
|
height: number;
|
|
borderRadius?: number | string;
|
|
children?: React.ReactNode;
|
|
shimmer?: boolean;
|
|
shimmerDelayMs?: number;
|
|
};
|
|
|
|
export default function PhotoFrameTile({
|
|
height,
|
|
borderRadius = '$tile',
|
|
children,
|
|
shimmer = false,
|
|
shimmerDelayMs = 0,
|
|
}: PhotoFrameTileProps) {
|
|
const { isDark } = useGuestThemeVariant();
|
|
|
|
return (
|
|
<YStack
|
|
height={height}
|
|
borderRadius={borderRadius}
|
|
padding={6}
|
|
backgroundColor={isDark ? 'rgba(255, 255, 255, 0.04)' : 'rgba(15, 23, 42, 0.04)'}
|
|
borderWidth={1}
|
|
borderColor={isDark ? 'rgba(255, 255, 255, 0.12)' : 'rgba(15, 23, 42, 0.12)'}
|
|
style={{
|
|
boxShadow: isDark ? '0 18px 32px rgba(2, 6, 23, 0.4)' : '0 16px 28px rgba(15, 23, 42, 0.12)',
|
|
}}
|
|
>
|
|
<YStack
|
|
flex={1}
|
|
borderRadius={borderRadius}
|
|
backgroundColor="$muted"
|
|
borderWidth={1}
|
|
borderColor={isDark ? 'rgba(255, 255, 255, 0.12)' : 'rgba(15, 23, 42, 0.1)'}
|
|
overflow="hidden"
|
|
position="relative"
|
|
style={{
|
|
boxShadow: isDark
|
|
? 'inset 0 0 0 1px rgba(255, 255, 255, 0.06)'
|
|
: 'inset 0 0 0 1px rgba(15, 23, 42, 0.04)',
|
|
}}
|
|
>
|
|
{shimmer ? (
|
|
<YStack
|
|
position="absolute"
|
|
top={-40}
|
|
bottom={-40}
|
|
left="-60%"
|
|
width="60%"
|
|
backgroundColor="transparent"
|
|
style={{
|
|
backgroundImage:
|
|
'linear-gradient(120deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0))',
|
|
animation: 'guestNightShimmer 4.6s ease-in-out infinite',
|
|
animationDelay: `${shimmerDelayMs}ms`,
|
|
}}
|
|
/>
|
|
) : null}
|
|
<YStack position="relative" zIndex={1} flex={1}>
|
|
{children}
|
|
</YStack>
|
|
</YStack>
|
|
</YStack>
|
|
);
|
|
}
|