53 lines
1.7 KiB
TypeScript
53 lines
1.7 KiB
TypeScript
import React from 'react';
|
|
import { YStack, XStack } from '@tamagui/stacks';
|
|
import { SizableText as Text } from '@tamagui/text';
|
|
import { Play, Share2, Cast } from 'lucide-react';
|
|
import MockupFrame from './MockupFrame';
|
|
import { MockupCard, MockupLabel, MockupTile } from './MockupPrimitives';
|
|
|
|
export default function MockupHome03LiveStream() {
|
|
return (
|
|
<MockupFrame
|
|
title="Home 03 - Live Stream"
|
|
subtitle="Highlight reel + action strip"
|
|
backgroundStyle={{
|
|
backgroundImage: 'linear-gradient(180deg, rgba(254, 242, 242, 0.9), rgba(255, 255, 255, 0.95))',
|
|
}}
|
|
>
|
|
<MockupCard>
|
|
<XStack alignItems="center" justifyContent="space-between">
|
|
<XStack alignItems="center" gap="$2">
|
|
<Cast size={18} color="#0F172A" />
|
|
<Text fontSize="$4" fontWeight="$7">
|
|
Live highlight stream
|
|
</Text>
|
|
</XStack>
|
|
<Text fontSize="$2" fontWeight="$7">
|
|
24 now
|
|
</Text>
|
|
</XStack>
|
|
<MockupLabel>Tap to join the live wall.</MockupLabel>
|
|
</MockupCard>
|
|
|
|
<MockupCard>
|
|
<YStack height={210} borderRadius="$card" backgroundColor="$muted" />
|
|
<XStack alignItems="center" justifyContent="space-between">
|
|
<XStack alignItems="center" gap="$2">
|
|
<Play size={16} color="#0F172A" />
|
|
<Text fontSize="$3" fontWeight="$7">
|
|
Now playing
|
|
</Text>
|
|
</XStack>
|
|
<Share2 size={16} color="#0F172A" />
|
|
</XStack>
|
|
</MockupCard>
|
|
|
|
<XStack gap="$2">
|
|
{[1, 2, 3, 4].map((tile) => (
|
|
<MockupTile key={tile} flex={1} height={70} />
|
|
))}
|
|
</XStack>
|
|
</MockupFrame>
|
|
);
|
|
}
|