64 lines
2.0 KiB
TypeScript
64 lines
2.0 KiB
TypeScript
import React from 'react';
|
||
import { YStack, XStack } from '@tamagui/stacks';
|
||
import { SizableText as Text } from '@tamagui/text';
|
||
import { CheckCircle2, Circle, ListChecks } from 'lucide-react';
|
||
import MockupFrame from './MockupFrame';
|
||
import { MockupCard, MockupLabel, MockupTile } from './MockupPrimitives';
|
||
|
||
const tasks = [
|
||
{ id: 1, label: 'Capture the first toast', done: true },
|
||
{ id: 2, label: 'Find the loudest laugh', done: false },
|
||
{ id: 3, label: 'Snap a detail shot', done: false },
|
||
{ id: 4, label: 'Find the dance duo', done: true },
|
||
];
|
||
|
||
export default function Mockup09ChecklistFlow() {
|
||
return (
|
||
<MockupFrame
|
||
title="Mockup 09 - Checklist Flow"
|
||
subtitle="Tasks checklist paired with gallery progress"
|
||
backgroundStyle={{
|
||
backgroundImage: 'linear-gradient(180deg, rgba(244, 244, 255, 0.8), rgba(255, 255, 255, 0.9))',
|
||
}}
|
||
>
|
||
<MockupCard>
|
||
<XStack alignItems="center" gap="$2">
|
||
<ListChecks size={18} color="#0F172A" />
|
||
<Text fontSize="$4" fontWeight="$7">
|
||
Today’s checklist
|
||
</Text>
|
||
</XStack>
|
||
<MockupLabel>Complete tasks to unlock more prompts.</MockupLabel>
|
||
</MockupCard>
|
||
|
||
<MockupCard>
|
||
<YStack gap="$2">
|
||
{tasks.map((task) => (
|
||
<XStack key={task.id} alignItems="center" gap="$2">
|
||
{task.done ? (
|
||
<CheckCircle2 size={18} color="#22C55E" />
|
||
) : (
|
||
<Circle size={18} color="#94A3B8" />
|
||
)}
|
||
<Text fontSize="$3" fontWeight="$6">
|
||
{task.label}
|
||
</Text>
|
||
</XStack>
|
||
))}
|
||
</YStack>
|
||
</MockupCard>
|
||
|
||
<MockupCard>
|
||
<Text fontSize="$3" fontWeight="$7">
|
||
Progress gallery
|
||
</Text>
|
||
<XStack gap="$2">
|
||
{[1, 2, 3, 4].map((tile) => (
|
||
<MockupTile key={tile} flex={1} height={70} />
|
||
))}
|
||
</XStack>
|
||
</MockupCard>
|
||
</MockupFrame>
|
||
);
|
||
}
|