100 lines
3.2 KiB
TypeScript
100 lines
3.2 KiB
TypeScript
import React from 'react';
|
|
import { YStack, XStack } from '@tamagui/stacks';
|
|
import { SizableText as Text } from '@tamagui/text';
|
|
import { Button } from '@tamagui/button';
|
|
import { Camera, UploadCloud, Sparkles, Zap } from 'lucide-react';
|
|
import MockupFrame from './MockupFrame';
|
|
import { MockupCard, MockupLabel } from './MockupPrimitives';
|
|
|
|
export default function Mockup01CaptureOrbit() {
|
|
return (
|
|
<MockupFrame
|
|
title="Mockup 01 - Capture Orbit"
|
|
subtitle="Full-screen capture hub with orbiting actions"
|
|
backgroundStyle={{
|
|
backgroundImage: 'radial-gradient(circle at 50% 10%, rgba(248, 113, 113, 0.18), transparent 55%)',
|
|
}}
|
|
>
|
|
<MockupCard padding="$3">
|
|
<XStack alignItems="center" justifyContent="space-between">
|
|
<YStack gap="$1">
|
|
<Text fontSize="$3" fontWeight="$7">
|
|
Event energy
|
|
</Text>
|
|
<MockupLabel>87 moments today</MockupLabel>
|
|
</YStack>
|
|
<XStack alignItems="center" gap="$2">
|
|
<Zap size={16} color="#F97316" />
|
|
<Text fontSize="$3" fontWeight="$7">
|
|
Live
|
|
</Text>
|
|
</XStack>
|
|
</XStack>
|
|
</MockupCard>
|
|
|
|
<YStack alignItems="center" gap="$4">
|
|
<YStack
|
|
width={260}
|
|
height={260}
|
|
borderRadius={130}
|
|
backgroundColor="$surface"
|
|
borderWidth={1}
|
|
borderColor="$borderColor"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
gap="$2"
|
|
style={{ boxShadow: '0 12px 40px rgba(15, 23, 42, 0.08)' }}
|
|
>
|
|
<Camera size={32} color="#0F172A" />
|
|
<Text fontSize="$5" fontWeight="$8" fontFamily="$display">
|
|
Tap to capture
|
|
</Text>
|
|
<Button size="$4" backgroundColor="$primary" borderRadius="$pill">
|
|
Capture
|
|
</Button>
|
|
</YStack>
|
|
|
|
<XStack gap="$3">
|
|
{[
|
|
{ icon: <UploadCloud size={20} color="#0F172A" />, label: 'Upload' },
|
|
{ icon: <Sparkles size={20} color="#0F172A" />, label: 'Prompt' },
|
|
{ icon: <Camera size={20} color="#0F172A" />, label: 'Burst' },
|
|
].map((item) => (
|
|
<YStack
|
|
key={item.label}
|
|
width={72}
|
|
height={72}
|
|
borderRadius={36}
|
|
backgroundColor="$surface"
|
|
borderWidth={1}
|
|
borderColor="$borderColor"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
gap="$1"
|
|
>
|
|
{item.icon}
|
|
<Text fontSize="$2" fontWeight="$6">
|
|
{item.label}
|
|
</Text>
|
|
</YStack>
|
|
))}
|
|
</XStack>
|
|
</YStack>
|
|
|
|
<MockupCard>
|
|
<XStack alignItems="center" justifyContent="space-between">
|
|
<YStack gap="$1">
|
|
<Text fontSize="$3" fontWeight="$7">
|
|
Upload queue
|
|
</Text>
|
|
<MockupLabel>3 queued, 1 sending</MockupLabel>
|
|
</YStack>
|
|
<Button size="$3" backgroundColor="$surface" borderRadius="$pill" borderWidth={1} borderColor="$borderColor">
|
|
View
|
|
</Button>
|
|
</XStack>
|
|
</MockupCard>
|
|
</MockupFrame>
|
|
);
|
|
}
|