63 lines
2.0 KiB
TypeScript
63 lines
2.0 KiB
TypeScript
import React from 'react';
|
|
import { YStack, XStack } from '@tamagui/stacks';
|
|
import { SizableText as Text } from '@tamagui/text';
|
|
import { Play, Star, Share2 } from 'lucide-react';
|
|
import MockupFrame from './MockupFrame';
|
|
import { MockupCard, MockupLabel, MockupTile } from './MockupPrimitives';
|
|
|
|
export default function Mockup10SpotlightReel() {
|
|
return (
|
|
<MockupFrame
|
|
title="Mockup 10 - Spotlight Reel"
|
|
subtitle="Live highlight reel with action strip"
|
|
backgroundStyle={{
|
|
backgroundImage: 'radial-gradient(circle at 20% 0%, rgba(251, 191, 36, 0.2), transparent 55%)',
|
|
}}
|
|
>
|
|
<MockupCard>
|
|
<XStack alignItems="center" justifyContent="space-between">
|
|
<YStack gap="$1">
|
|
<Text fontSize="$4" fontWeight="$7">
|
|
Spotlight reel
|
|
</Text>
|
|
<MockupLabel>Live highlights curated by guests.</MockupLabel>
|
|
</YStack>
|
|
<Play size={18} color="#0F172A" />
|
|
</XStack>
|
|
</MockupCard>
|
|
|
|
<XStack gap="$2">
|
|
{[1, 2, 3, 4, 5].map((tile) => (
|
|
<MockupTile key={tile} flex={1} height={70} />
|
|
))}
|
|
</XStack>
|
|
|
|
<MockupCard>
|
|
<Text fontSize="$6" fontFamily="$display" fontWeight="$8">
|
|
Now showing
|
|
</Text>
|
|
<YStack height={200} borderRadius="$card" backgroundColor="$muted" />
|
|
<XStack alignItems="center" justifyContent="space-between">
|
|
<XStack alignItems="center" gap="$2">
|
|
<Star size={16} color="#F59E0B" />
|
|
<Text fontSize="$3" fontWeight="$7">
|
|
4.8 rating
|
|
</Text>
|
|
</XStack>
|
|
<Share2 size={16} color="#0F172A" />
|
|
</XStack>
|
|
</MockupCard>
|
|
|
|
<XStack gap="$2">
|
|
{['Like', 'Save', 'Share'].map((action) => (
|
|
<MockupCard key={action} flex={1} padding="$3" alignItems="center">
|
|
<Text fontSize="$3" fontWeight="$7">
|
|
{action}
|
|
</Text>
|
|
</MockupCard>
|
|
))}
|
|
</XStack>
|
|
</MockupFrame>
|
|
);
|
|
}
|