76 lines
2.3 KiB
TypeScript
76 lines
2.3 KiB
TypeScript
import React from 'react';
|
|
import { YStack, XStack } from '@tamagui/stacks';
|
|
import { SizableText as Text } from '@tamagui/text';
|
|
import { Camera, Sparkles, Image as ImageIcon, Users } from 'lucide-react';
|
|
import MockupFrame from './MockupFrame';
|
|
import { MockupCard, MockupLabel } from './MockupPrimitives';
|
|
|
|
const rings = [
|
|
{ label: 'Capture', icon: <Camera size={18} color="#0F172A" /> },
|
|
{ label: 'Prompts', icon: <Sparkles size={18} color="#0F172A" /> },
|
|
{ label: 'Gallery', icon: <ImageIcon size={18} color="#0F172A" /> },
|
|
{ label: 'Guests', icon: <Users size={18} color="#0F172A" /> },
|
|
];
|
|
|
|
export default function MockupHome02StoryRings() {
|
|
return (
|
|
<MockupFrame
|
|
title="Home 02 - Story Rings"
|
|
subtitle="Circular quick actions with story chips"
|
|
backgroundStyle={{
|
|
backgroundImage: 'radial-gradient(circle at 80% 0%, rgba(244, 63, 94, 0.14), transparent 55%)',
|
|
}}
|
|
>
|
|
<MockupCard>
|
|
<Text fontSize="$5" fontFamily="$display" fontWeight="$8">
|
|
Morning glow
|
|
</Text>
|
|
<MockupLabel>Tap a ring to jump in.</MockupLabel>
|
|
</MockupCard>
|
|
|
|
<XStack justifyContent="space-between">
|
|
{rings.map((ring) => (
|
|
<YStack key={ring.label} alignItems="center" gap="$2">
|
|
<YStack
|
|
width={72}
|
|
height={72}
|
|
borderRadius={36}
|
|
backgroundColor="$surface"
|
|
borderWidth={2}
|
|
borderColor="$primary"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
>
|
|
{ring.icon}
|
|
</YStack>
|
|
<Text fontSize="$2" fontWeight="$6">
|
|
{ring.label}
|
|
</Text>
|
|
</YStack>
|
|
))}
|
|
</XStack>
|
|
|
|
<YStack gap="$3">
|
|
<MockupCard>
|
|
<Text fontSize="$4" fontWeight="$7">
|
|
Story highlights
|
|
</Text>
|
|
<XStack gap="$2">
|
|
{[1, 2, 3].map((chip) => (
|
|
<YStack
|
|
key={chip}
|
|
flex={1}
|
|
height={90}
|
|
borderRadius="$tile"
|
|
backgroundColor="$muted"
|
|
borderWidth={1}
|
|
borderColor="$borderColor"
|
|
/>
|
|
))}
|
|
</XStack>
|
|
</MockupCard>
|
|
</YStack>
|
|
</MockupFrame>
|
|
);
|
|
}
|