47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import { YStack, XStack } from '@tamagui/stacks';
|
|
import { SizableText as Text } from '@tamagui/text';
|
|
import { Image as ImageIcon, Filter } from 'lucide-react';
|
|
import MockupFrame from './MockupFrame';
|
|
import { MockupCard, MockupLabel, MockupTile } from './MockupPrimitives';
|
|
|
|
export default function MockupHome05GalleryFirst() {
|
|
return (
|
|
<MockupFrame
|
|
title="Home 05 - Gallery First"
|
|
subtitle="Grid preview + quick filters"
|
|
>
|
|
<MockupCard padding="$3">
|
|
<XStack alignItems="center" justifyContent="space-between">
|
|
<XStack alignItems="center" gap="$2">
|
|
<ImageIcon size={18} color="#0F172A" />
|
|
<Text fontSize="$4" fontWeight="$7">
|
|
Moments
|
|
</Text>
|
|
</XStack>
|
|
<Filter size={16} color="#0F172A" />
|
|
</XStack>
|
|
<MockupLabel>Start browsing before you upload.</MockupLabel>
|
|
</MockupCard>
|
|
|
|
<XStack gap="$2">
|
|
{[1, 2, 3].map((tile) => (
|
|
<MockupTile key={tile} flex={1} height={100} />
|
|
))}
|
|
</XStack>
|
|
<XStack gap="$2">
|
|
{[4, 5, 6].map((tile) => (
|
|
<MockupTile key={tile} flex={1} height={120} />
|
|
))}
|
|
</XStack>
|
|
|
|
<MockupCard>
|
|
<Text fontSize="$3" fontWeight="$7">
|
|
Latest uploads
|
|
</Text>
|
|
<MockupLabel>Updated every 15 seconds.</MockupLabel>
|
|
</MockupCard>
|
|
</MockupFrame>
|
|
);
|
|
}
|