75 lines
2.6 KiB
TypeScript
75 lines
2.6 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 { Sparkles, Trophy, Play } from 'lucide-react';
|
|
import MockupFrame from './MockupFrame';
|
|
import { MockupCard, MockupLabel } from './MockupPrimitives';
|
|
|
|
export default function Mockup03PromptQuest() {
|
|
return (
|
|
<MockupFrame
|
|
title="Mockup 03 - Prompt Quest"
|
|
subtitle="Prompt hero with progress and task ladder"
|
|
>
|
|
<MockupCard>
|
|
<XStack alignItems="center" gap="$2">
|
|
<Sparkles size={18} color="#F43F5E" />
|
|
<Text fontSize="$3" fontWeight="$7">
|
|
Prompt of the hour
|
|
</Text>
|
|
</XStack>
|
|
<Text fontSize="$7" fontFamily="$display" fontWeight="$8">
|
|
Capture the boldest dance move
|
|
</Text>
|
|
<MockupLabel>Earn 120 points for completing this prompt.</MockupLabel>
|
|
<YStack gap="$2">
|
|
<XStack alignItems="center" justifyContent="space-between">
|
|
<Text fontSize="$2" fontWeight="$7">
|
|
Quest progress
|
|
</Text>
|
|
<Text fontSize="$2" fontWeight="$7">
|
|
65%
|
|
</Text>
|
|
</XStack>
|
|
<YStack backgroundColor="$muted" borderRadius="$pill" height={10} overflow="hidden">
|
|
<YStack backgroundColor="$primary" width="65%" height={10} />
|
|
</YStack>
|
|
</YStack>
|
|
<Button size="$4" backgroundColor="$primary" borderRadius="$pill">
|
|
Start capture
|
|
</Button>
|
|
</MockupCard>
|
|
|
|
<YStack gap="$3">
|
|
{[1, 2, 3].map((item) => (
|
|
<MockupCard key={item} padding="$3">
|
|
<XStack alignItems="center" justifyContent="space-between">
|
|
<YStack gap="$1">
|
|
<Text fontSize="$4" fontWeight="$7">
|
|
Task {item}
|
|
</Text>
|
|
<MockupLabel>Quick challenge to spark the moment.</MockupLabel>
|
|
</YStack>
|
|
<XStack alignItems="center" gap="$2">
|
|
<Trophy size={16} color="#F59E0B" />
|
|
<Text fontSize="$2" fontWeight="$7">
|
|
+50
|
|
</Text>
|
|
</XStack>
|
|
</XStack>
|
|
<Button size="$3" backgroundColor="$surface" borderRadius="$pill" borderWidth={1} borderColor="$borderColor">
|
|
<XStack alignItems="center" gap="$2">
|
|
<Play size={14} color="#0F172A" />
|
|
<Text fontSize="$2" fontWeight="$7">
|
|
Play task
|
|
</Text>
|
|
</XStack>
|
|
</Button>
|
|
</MockupCard>
|
|
))}
|
|
</YStack>
|
|
</MockupFrame>
|
|
);
|
|
}
|