59 lines
1.6 KiB
TypeScript
59 lines
1.6 KiB
TypeScript
import React from 'react';
|
|
import { YStack, XStack } from '@tamagui/stacks';
|
|
import { SizableText as Text } from '@tamagui/text';
|
|
import { Sun, CloudSun, MoonStar } from 'lucide-react';
|
|
import MockupFrame from './MockupFrame';
|
|
import { MockupCard, MockupLabel, MockupTile } from './MockupPrimitives';
|
|
|
|
const sections = [
|
|
{
|
|
key: 'morning',
|
|
title: 'Morning glow',
|
|
icon: <Sun size={18} color="#F97316" />,
|
|
},
|
|
{
|
|
key: 'afternoon',
|
|
title: 'Afternoon energy',
|
|
icon: <CloudSun size={18} color="#F59E0B" />,
|
|
},
|
|
{
|
|
key: 'night',
|
|
title: 'Night sparkle',
|
|
icon: <MoonStar size={18} color="#6366F1" />,
|
|
},
|
|
];
|
|
|
|
export default function Mockup08Daybook() {
|
|
return (
|
|
<MockupFrame
|
|
title="Mockup 08 - Daybook"
|
|
subtitle="Morning/afternoon/night memory sections"
|
|
>
|
|
<MockupCard>
|
|
<Text fontSize="$5" fontFamily="$display" fontWeight="$8">
|
|
Today in moments
|
|
</Text>
|
|
<MockupLabel>Group memories by vibe, not just time.</MockupLabel>
|
|
</MockupCard>
|
|
|
|
<YStack gap="$4">
|
|
{sections.map((section) => (
|
|
<YStack key={section.key} gap="$2">
|
|
<XStack alignItems="center" gap="$2">
|
|
{section.icon}
|
|
<Text fontSize="$4" fontWeight="$7">
|
|
{section.title}
|
|
</Text>
|
|
</XStack>
|
|
<XStack gap="$2">
|
|
{[1, 2, 3].map((tile) => (
|
|
<MockupTile key={tile} flex={1} height={110} />
|
|
))}
|
|
</XStack>
|
|
</YStack>
|
|
))}
|
|
</YStack>
|
|
</MockupFrame>
|
|
);
|
|
}
|