83 lines
3.2 KiB
TypeScript
83 lines
3.2 KiB
TypeScript
import React from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { YStack, XStack } from '@tamagui/stacks';
|
|
import { SizableText as Text } from '@tamagui/text';
|
|
import { Button } from '@tamagui/button';
|
|
import { ArrowRight } from 'lucide-react';
|
|
import MockupFrame from './MockupFrame';
|
|
import { MockupCard, MockupLabel } from './MockupPrimitives';
|
|
|
|
const mockups = [
|
|
{ id: '1', title: 'Capture Orbit', description: 'Full-screen capture hub with orbiting actions.' },
|
|
{ id: '2', title: 'Gallery Mosaic', description: 'Image-first grid with filters and fast scan.' },
|
|
{ id: '3', title: 'Prompt Quest', description: 'Prompt hero with progress and task ladder.' },
|
|
{ id: '4', title: 'Timeline Stream', description: 'Chronological feed with time markers.' },
|
|
{ id: '5', title: 'Compass Hub', description: 'Quadrant navigation around a central action.' },
|
|
{ id: '6', title: 'Split Capture', description: 'Camera preview plus quick tools and queue.' },
|
|
{ id: '7', title: 'Swipe Deck', description: 'Stacked cards for rapid review.' },
|
|
{ id: '8', title: 'Daybook', description: 'Morning/afternoon/night memory sections.' },
|
|
{ id: '9', title: 'Checklist Flow', description: 'Tasks checklist paired with gallery progress.' },
|
|
{ id: '10', title: 'Spotlight Reel', description: 'Live highlight reel with action strip.' },
|
|
];
|
|
|
|
export default function MockupsIndexScreen() {
|
|
const navigate = useNavigate();
|
|
|
|
return (
|
|
<MockupFrame
|
|
title="Guest PWA mockups"
|
|
subtitle="10 layout concepts for the new event experience"
|
|
>
|
|
<MockupCard gap="$2">
|
|
<XStack alignItems="center" justifyContent="space-between">
|
|
<YStack gap="$1">
|
|
<Text fontSize="$5" fontWeight="$8" fontFamily="$display">
|
|
Home concepts
|
|
</Text>
|
|
<MockupLabel>Explore 10 start screen ideas.</MockupLabel>
|
|
</YStack>
|
|
<Button
|
|
size="$3"
|
|
backgroundColor="$primary"
|
|
borderRadius="$pill"
|
|
onPress={() => navigate('/mockups/home')}
|
|
>
|
|
<XStack alignItems="center" gap="$2">
|
|
<Text fontSize="$3" color="white">
|
|
Open
|
|
</Text>
|
|
<ArrowRight size={16} color="white" />
|
|
</XStack>
|
|
</Button>
|
|
</XStack>
|
|
</MockupCard>
|
|
|
|
<YStack gap="$3">
|
|
{mockups.map((mockup) => (
|
|
<MockupCard key={mockup.id} gap="$2">
|
|
<XStack alignItems="center" justifyContent="space-between">
|
|
<Text fontSize="$5" fontWeight="$8" fontFamily="$display">
|
|
{mockup.title}
|
|
</Text>
|
|
<Button
|
|
size="$3"
|
|
backgroundColor="$primary"
|
|
borderRadius="$pill"
|
|
onPress={() => navigate(`/mockups/${mockup.id}`)}
|
|
>
|
|
<XStack alignItems="center" gap="$2">
|
|
<Text fontSize="$3" color="white">
|
|
View
|
|
</Text>
|
|
<ArrowRight size={16} color="white" />
|
|
</XStack>
|
|
</Button>
|
|
</XStack>
|
|
<MockupLabel>{mockup.description}</MockupLabel>
|
|
</MockupCard>
|
|
))}
|
|
</YStack>
|
|
</MockupFrame>
|
|
);
|
|
}
|