95 lines
2.7 KiB
TypeScript
95 lines
2.7 KiB
TypeScript
import React from 'react';
|
|
import { YStack, XStack } from '@tamagui/stacks';
|
|
import { SizableText as Text } from '@tamagui/text';
|
|
import { Heart, X, Send } from 'lucide-react';
|
|
import MockupFrame from './MockupFrame';
|
|
import { MockupCard, MockupLabel } from './MockupPrimitives';
|
|
|
|
export default function Mockup07SwipeDeck() {
|
|
return (
|
|
<MockupFrame
|
|
title="Mockup 07 - Swipe Deck"
|
|
subtitle="Stacked cards for rapid review"
|
|
backgroundStyle={{
|
|
backgroundImage: 'radial-gradient(circle at 80% 0%, rgba(190, 24, 93, 0.12), transparent 50%)',
|
|
}}
|
|
>
|
|
<MockupCard padding="$3">
|
|
<Text fontSize="$4" fontWeight="$7">
|
|
Review queue
|
|
</Text>
|
|
<MockupLabel>Swipe to approve or skip highlights.</MockupLabel>
|
|
</MockupCard>
|
|
|
|
<YStack height={360} position="relative">
|
|
<MockupCard
|
|
height={320}
|
|
position="absolute"
|
|
left={0}
|
|
right={0}
|
|
style={{ transform: 'translateY(24px) rotate(-2deg)' }}
|
|
>
|
|
<Text fontSize="$4" fontWeight="$7">
|
|
Guest capture 3
|
|
</Text>
|
|
</MockupCard>
|
|
<MockupCard
|
|
height={330}
|
|
position="absolute"
|
|
left={0}
|
|
right={0}
|
|
style={{ transform: 'translateY(12px) rotate(1deg)' }}
|
|
>
|
|
<Text fontSize="$4" fontWeight="$7">
|
|
Guest capture 2
|
|
</Text>
|
|
</MockupCard>
|
|
<MockupCard height={340} position="absolute" left={0} right={0}>
|
|
<Text fontSize="$6" fontFamily="$display" fontWeight="$8">
|
|
Guest capture 1
|
|
</Text>
|
|
<MockupLabel>Tap for full view</MockupLabel>
|
|
<YStack flex={1} borderRadius="$card" backgroundColor="$muted" />
|
|
</MockupCard>
|
|
</YStack>
|
|
|
|
<XStack gap="$3" justifyContent="center">
|
|
<YStack
|
|
width={64}
|
|
height={64}
|
|
borderRadius={32}
|
|
backgroundColor="$surface"
|
|
borderWidth={1}
|
|
borderColor="$borderColor"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
>
|
|
<X size={20} color="#EF4444" />
|
|
</YStack>
|
|
<YStack
|
|
width={72}
|
|
height={72}
|
|
borderRadius={36}
|
|
backgroundColor="$primary"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
>
|
|
<Heart size={24} color="white" />
|
|
</YStack>
|
|
<YStack
|
|
width={64}
|
|
height={64}
|
|
borderRadius={32}
|
|
backgroundColor="$surface"
|
|
borderWidth={1}
|
|
borderColor="$borderColor"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
>
|
|
<Send size={20} color="#0F172A" />
|
|
</YStack>
|
|
</XStack>
|
|
</MockupFrame>
|
|
);
|
|
}
|