82 lines
2.7 KiB
TypeScript
82 lines
2.7 KiB
TypeScript
import React from 'react';
|
|
import { YStack, XStack } from '@tamagui/stacks';
|
|
import { SizableText as Text } from '@tamagui/text';
|
|
import { Compass, Image as ImageIcon, Sparkles, UploadCloud } from 'lucide-react';
|
|
import MockupFrame from './MockupFrame';
|
|
import { MockupCard, MockupLabel } from './MockupPrimitives';
|
|
|
|
export default function Mockup05CompassHub() {
|
|
return (
|
|
<MockupFrame
|
|
title="Mockup 05 - Compass Hub"
|
|
subtitle="Quadrant navigation around a central action"
|
|
>
|
|
<YStack position="relative" height={360} gap="$3">
|
|
<XStack gap="$3">
|
|
<MockupCard flex={1} height={150} justifyContent="center" alignItems="center">
|
|
<ImageIcon size={20} color="#0F172A" />
|
|
<Text fontSize="$3" fontWeight="$7">
|
|
Gallery
|
|
</Text>
|
|
<MockupLabel>Browse moments</MockupLabel>
|
|
</MockupCard>
|
|
<MockupCard flex={1} height={150} justifyContent="center" alignItems="center">
|
|
<UploadCloud size={20} color="#0F172A" />
|
|
<Text fontSize="$3" fontWeight="$7">
|
|
Upload
|
|
</Text>
|
|
<MockupLabel>Quick add</MockupLabel>
|
|
</MockupCard>
|
|
</XStack>
|
|
<XStack gap="$3">
|
|
<MockupCard flex={1} height={150} justifyContent="center" alignItems="center">
|
|
<Sparkles size={20} color="#0F172A" />
|
|
<Text fontSize="$3" fontWeight="$7">
|
|
Tasks
|
|
</Text>
|
|
<MockupLabel>Earn points</MockupLabel>
|
|
</MockupCard>
|
|
<MockupCard flex={1} height={150} justifyContent="center" alignItems="center">
|
|
<Compass size={20} color="#0F172A" />
|
|
<Text fontSize="$3" fontWeight="$7">
|
|
Live show
|
|
</Text>
|
|
<MockupLabel>See highlights</MockupLabel>
|
|
</MockupCard>
|
|
</XStack>
|
|
|
|
<YStack
|
|
position="absolute"
|
|
top="50%"
|
|
left="50%"
|
|
width={110}
|
|
height={110}
|
|
borderRadius={55}
|
|
backgroundColor="$primary"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
style={{ transform: 'translate(-50%, -50%)' }}
|
|
>
|
|
<Text fontSize="$4" fontWeight="$8" color="white">
|
|
Capture
|
|
</Text>
|
|
</YStack>
|
|
</YStack>
|
|
|
|
<MockupCard>
|
|
<XStack alignItems="center" justifyContent="space-between">
|
|
<YStack gap="$1">
|
|
<Text fontSize="$3" fontWeight="$7">
|
|
Event compass
|
|
</Text>
|
|
<MockupLabel>Tap any quadrant to jump.</MockupLabel>
|
|
</YStack>
|
|
<Text fontSize="$2" fontWeight="$7">
|
|
4 zones
|
|
</Text>
|
|
</XStack>
|
|
</MockupCard>
|
|
</MockupFrame>
|
|
);
|
|
}
|