67 lines
2.1 KiB
TypeScript
67 lines
2.1 KiB
TypeScript
import React from 'react';
|
|
import { YStack, XStack } from '@tamagui/stacks';
|
|
import { SizableText as Text } from '@tamagui/text';
|
|
import { Camera, Grid2x2, Zap, UploadCloud } from 'lucide-react';
|
|
import MockupFrame from './MockupFrame';
|
|
import { MockupCard, MockupLabel, MockupTile } from './MockupPrimitives';
|
|
|
|
export default function Mockup06SplitCapture() {
|
|
return (
|
|
<MockupFrame
|
|
title="Mockup 06 - Split Capture"
|
|
subtitle="Camera preview plus quick tools and queue"
|
|
backgroundStyle={{
|
|
backgroundImage: 'linear-gradient(180deg, rgba(240, 249, 255, 0.95), rgba(255, 255, 255, 0.95))',
|
|
}}
|
|
>
|
|
<YStack gap="$3">
|
|
<YStack
|
|
height={260}
|
|
borderRadius="$card"
|
|
backgroundColor="$muted"
|
|
borderWidth={1}
|
|
borderColor="$borderColor"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
gap="$2"
|
|
>
|
|
<Camera size={32} color="#0F172A" />
|
|
<Text fontSize="$4" fontWeight="$7">
|
|
Live preview
|
|
</Text>
|
|
<MockupLabel>Tap anywhere to focus.</MockupLabel>
|
|
</YStack>
|
|
|
|
<XStack gap="$3">
|
|
{[
|
|
{ icon: <Grid2x2 size={18} color="#0F172A" />, label: 'Grid' },
|
|
{ icon: <Zap size={18} color="#F97316" />, label: 'Flash' },
|
|
{ icon: <UploadCloud size={18} color="#0F172A" />, label: 'Upload' },
|
|
].map((tool) => (
|
|
<MockupCard key={tool.label} flex={1} padding="$3" alignItems="center">
|
|
{tool.icon}
|
|
<Text fontSize="$3" fontWeight="$7">
|
|
{tool.label}
|
|
</Text>
|
|
</MockupCard>
|
|
))}
|
|
</XStack>
|
|
</YStack>
|
|
|
|
<MockupCard>
|
|
<XStack alignItems="center" justifyContent="space-between">
|
|
<Text fontSize="$4" fontWeight="$7">
|
|
Upload queue
|
|
</Text>
|
|
<MockupLabel>2 waiting</MockupLabel>
|
|
</XStack>
|
|
<XStack gap="$2">
|
|
{[1, 2, 3].map((tile) => (
|
|
<MockupTile key={tile} flex={1} height={72} />
|
|
))}
|
|
</XStack>
|
|
</MockupCard>
|
|
</MockupFrame>
|
|
);
|
|
}
|