69 lines
2.7 KiB
TypeScript
69 lines
2.7 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, Home } from 'lucide-react';
|
|
import MockupFrame from './MockupFrame';
|
|
import { MockupCard, MockupLabel } from './MockupPrimitives';
|
|
|
|
const mockups = [
|
|
{ id: '1', title: 'Pulse Hero', description: 'Live stats + big capture call-to-action.' },
|
|
{ id: '2', title: 'Story Rings', description: 'Circular quick actions with story chips.' },
|
|
{ id: '3', title: 'Live Stream', description: 'Highlight reel + action strip.' },
|
|
{ id: '4', title: 'Task Sprint', description: 'Prompt ladder + progress meter.' },
|
|
{ id: '5', title: 'Gallery First', description: 'Grid preview + quick filters.' },
|
|
{ id: '6', title: 'Calm Focus', description: 'Minimal home with one primary action.' },
|
|
{ id: '7', title: 'Moment Stack', description: 'Stacked cards for rapid capture.' },
|
|
{ id: '8', title: 'Countdown Stage', description: 'Event timing + live show entry.' },
|
|
{ id: '9', title: 'Share Hub', description: 'Invite + QR + guest sharing tools.' },
|
|
{ id: '10', title: 'Moodboard', description: 'Palette + prompts to set the vibe.' },
|
|
];
|
|
|
|
export default function MockupsHomeIndexScreen() {
|
|
const navigate = useNavigate();
|
|
|
|
return (
|
|
<MockupFrame
|
|
title="Home concepts"
|
|
subtitle="10 start screen ideas for the new guest PWA"
|
|
>
|
|
<MockupCard padding="$3">
|
|
<XStack alignItems="center" gap="$2">
|
|
<Home size={18} color="#0F172A" />
|
|
<Text fontSize="$4" fontWeight="$8">
|
|
Start screen concepts
|
|
</Text>
|
|
</XStack>
|
|
<MockupLabel>Pick one as the north star for v2.</MockupLabel>
|
|
</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/home/${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>
|
|
);
|
|
}
|