56 lines
1.7 KiB
TypeScript
56 lines
1.7 KiB
TypeScript
import React from 'react';
|
|
import { YStack, XStack } from '@tamagui/stacks';
|
|
import { SizableText as Text } from '@tamagui/text';
|
|
import { Pressable } from '@tamagui/react-native-web-lite';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
type SheetProps = {
|
|
open: boolean;
|
|
title: string;
|
|
onClose: () => void;
|
|
children: React.ReactNode;
|
|
footer?: React.ReactNode;
|
|
/** Optional bottom offset so content sits above the bottom nav/safe-area. */
|
|
bottomOffsetPx?: number;
|
|
};
|
|
|
|
export function MobileSheet({ open, title, onClose, children, footer, bottomOffsetPx = 88 }: SheetProps) {
|
|
const { t } = useTranslation('mobile');
|
|
if (!open) return null;
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-end justify-center bg-black/40 backdrop-blur-sm">
|
|
<YStack
|
|
width="100%"
|
|
maxWidth={520}
|
|
borderTopLeftRadius={24}
|
|
borderTopRightRadius={24}
|
|
backgroundColor="white"
|
|
padding="$4"
|
|
paddingBottom="$7"
|
|
space="$3"
|
|
shadowColor="#0f172a"
|
|
shadowOpacity={0.12}
|
|
shadowRadius={18}
|
|
shadowOffset={{ width: 0, height: -8 }}
|
|
maxHeight="82vh"
|
|
overflow="auto"
|
|
// keep sheet above bottom nav / safe area
|
|
style={{ marginBottom: `max(env(safe-area-inset-bottom, 0px), ${bottomOffsetPx}px)` }}
|
|
>
|
|
<XStack alignItems="center" justifyContent="space-between">
|
|
<Text fontSize="$md" fontWeight="800" color="#111827">
|
|
{title}
|
|
</Text>
|
|
<Pressable onPress={onClose}>
|
|
<Text fontSize="$md" color="#6b7280">
|
|
{t('actions.close', 'Close')}
|
|
</Text>
|
|
</Pressable>
|
|
</XStack>
|
|
{children}
|
|
{footer ? footer : null}
|
|
</YStack>
|
|
</div>
|
|
);
|
|
}
|