71 lines
2.5 KiB
TypeScript
71 lines
2.5 KiB
TypeScript
import React from 'react';
|
|
import { YStack, XStack } from '@tamagui/stacks';
|
|
import { SizableText as Text } from '@tamagui/text';
|
|
import { Clock, Image as ImageIcon } from 'lucide-react';
|
|
import MockupFrame from './MockupFrame';
|
|
import { MockupCard, MockupLabel } from './MockupPrimitives';
|
|
|
|
const timeline = [
|
|
{ time: '18:40', title: 'Sparkler exit', caption: '12 new uploads' },
|
|
{ time: '18:22', title: 'First dance', caption: '7 moments added' },
|
|
{ time: '18:10', title: 'Toast round', caption: '5 guest favorites' },
|
|
{ time: '17:55', title: 'Arrival glow', caption: '4 candid shots' },
|
|
];
|
|
|
|
export default function Mockup04TimelineStream() {
|
|
return (
|
|
<MockupFrame
|
|
title="Mockup 04 - Timeline Stream"
|
|
subtitle="Chronological feed with time markers"
|
|
backgroundStyle={{
|
|
backgroundImage: 'linear-gradient(180deg, rgba(254, 252, 232, 0.9), rgba(255, 255, 255, 0.95))',
|
|
}}
|
|
>
|
|
<MockupCard padding="$3">
|
|
<XStack alignItems="center" gap="$2">
|
|
<Clock size={16} color="#0F172A" />
|
|
<Text fontSize="$4" fontWeight="$7">
|
|
Live timeline
|
|
</Text>
|
|
</XStack>
|
|
<MockupLabel>Moments grouped by when they happened.</MockupLabel>
|
|
</MockupCard>
|
|
|
|
<YStack gap="$3">
|
|
{timeline.map((item, index) => (
|
|
<XStack key={item.time} gap="$3" alignItems="flex-start">
|
|
<YStack alignItems="center" gap="$2" width={60}>
|
|
<Text fontSize="$2" fontWeight="$7">
|
|
{item.time}
|
|
</Text>
|
|
<YStack width={2} flex={1} backgroundColor="$borderColor" opacity={index === timeline.length - 1 ? 0 : 1} />
|
|
</YStack>
|
|
<MockupCard flex={1} padding="$3">
|
|
<XStack alignItems="center" gap="$2">
|
|
<ImageIcon size={16} color="#0F172A" />
|
|
<Text fontSize="$4" fontWeight="$7">
|
|
{item.title}
|
|
</Text>
|
|
</XStack>
|
|
<MockupLabel>{item.caption}</MockupLabel>
|
|
<XStack gap="$2">
|
|
{[1, 2, 3].map((tile) => (
|
|
<YStack
|
|
key={tile}
|
|
flex={1}
|
|
height={56}
|
|
borderRadius="$tile"
|
|
backgroundColor="$muted"
|
|
borderWidth={1}
|
|
borderColor="$borderColor"
|
|
/>
|
|
))}
|
|
</XStack>
|
|
</MockupCard>
|
|
</XStack>
|
|
))}
|
|
</YStack>
|
|
</MockupFrame>
|
|
);
|
|
}
|