66 lines
1.7 KiB
TypeScript
66 lines
1.7 KiB
TypeScript
import React from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { XStack, YStack } from '@tamagui/stacks';
|
|
import { SizableText as Text } from '@tamagui/text';
|
|
import { Button } from '@tamagui/button';
|
|
import { ArrowLeft } from 'lucide-react';
|
|
|
|
type MockupFrameProps = {
|
|
title: string;
|
|
subtitle?: string;
|
|
hideHeader?: boolean;
|
|
backgroundStyle?: React.CSSProperties;
|
|
children: React.ReactNode;
|
|
};
|
|
|
|
export default function MockupFrame({
|
|
title,
|
|
subtitle,
|
|
hideHeader,
|
|
backgroundStyle,
|
|
children,
|
|
}: MockupFrameProps) {
|
|
const navigate = useNavigate();
|
|
|
|
return (
|
|
<YStack
|
|
minHeight="100vh"
|
|
backgroundColor="$background"
|
|
padding="$4"
|
|
gap="$4"
|
|
style={backgroundStyle}
|
|
>
|
|
{!hideHeader && (
|
|
<XStack alignItems="center" justifyContent="space-between" gap="$3">
|
|
<Button
|
|
size="$3"
|
|
backgroundColor="$surface"
|
|
borderRadius="$pill"
|
|
borderWidth={1}
|
|
borderColor="$borderColor"
|
|
onPress={() => navigate('/mockups')}
|
|
>
|
|
<XStack alignItems="center" gap="$2">
|
|
<ArrowLeft size={16} color="#0F172A" />
|
|
<Text fontSize="$3" fontWeight="$7">
|
|
Back
|
|
</Text>
|
|
</XStack>
|
|
</Button>
|
|
<YStack alignItems="flex-end" gap="$1">
|
|
<Text fontSize="$5" fontWeight="$8" fontFamily="$display">
|
|
{title}
|
|
</Text>
|
|
{subtitle ? (
|
|
<Text fontSize="$2" color="$color" opacity={0.6}>
|
|
{subtitle}
|
|
</Text>
|
|
) : null}
|
|
</YStack>
|
|
</XStack>
|
|
)}
|
|
{children}
|
|
</YStack>
|
|
);
|
|
}
|