77 lines
2.4 KiB
TypeScript
77 lines
2.4 KiB
TypeScript
import React from 'react';
|
|
import { YStack, XStack } from '@tamagui/stacks';
|
|
import { SizableText as Text } from '@tamagui/text';
|
|
import { Filter, Image as ImageIcon } from 'lucide-react';
|
|
import MockupFrame from './MockupFrame';
|
|
import { MockupCard, MockupChip, MockupLabel, MockupTile } from './MockupPrimitives';
|
|
|
|
export default function Mockup02GalleryMosaic() {
|
|
return (
|
|
<MockupFrame
|
|
title="Mockup 02 - Gallery Mosaic"
|
|
subtitle="Image-first grid with fast filters"
|
|
backgroundStyle={{
|
|
backgroundImage: 'linear-gradient(160deg, rgba(248, 250, 252, 0.9), rgba(255, 245, 240, 0.9))',
|
|
}}
|
|
>
|
|
<MockupCard padding="$3">
|
|
<XStack alignItems="center" justifyContent="space-between">
|
|
<XStack alignItems="center" gap="$2">
|
|
<ImageIcon size={18} color="#0F172A" />
|
|
<Text fontSize="$4" fontWeight="$8">
|
|
Gallery
|
|
</Text>
|
|
</XStack>
|
|
<Filter size={18} color="#0F172A" />
|
|
</XStack>
|
|
<XStack gap="$2" flexWrap="wrap">
|
|
{['All', 'Friends', 'Dancefloor', 'Candid'].map((chip) => (
|
|
<MockupChip key={chip}>
|
|
<Text fontSize="$2" fontWeight="$6">
|
|
{chip}
|
|
</Text>
|
|
</MockupChip>
|
|
))}
|
|
</XStack>
|
|
</MockupCard>
|
|
|
|
<XStack gap="$3">
|
|
<YStack flex={1} gap="$3">
|
|
<MockupTile height={160}>
|
|
<MockupLabel>Hero moment</MockupLabel>
|
|
</MockupTile>
|
|
<XStack gap="$3">
|
|
<MockupTile flex={1} height={90} />
|
|
<MockupTile flex={1} height={90} />
|
|
</XStack>
|
|
<MockupTile height={120} />
|
|
</YStack>
|
|
<YStack flex={1} gap="$3">
|
|
<XStack gap="$3">
|
|
<MockupTile flex={1} height={110} />
|
|
<MockupTile flex={1} height={110} />
|
|
</XStack>
|
|
<MockupTile height={180}>
|
|
<MockupLabel>Live spotlight</MockupLabel>
|
|
</MockupTile>
|
|
<MockupTile height={90} />
|
|
</YStack>
|
|
</XStack>
|
|
|
|
<MockupCard>
|
|
<XStack alignItems="center" justifyContent="space-between">
|
|
<YStack gap="$1">
|
|
<Text fontSize="$3" fontWeight="$7">
|
|
Newest uploads
|
|
</Text>
|
|
<MockupLabel>Refreshes every 10s</MockupLabel>
|
|
</YStack>
|
|
<Text fontSize="$2" fontWeight="$7">
|
|
22 new
|
|
</Text>
|
|
</XStack>
|
|
</MockupCard>
|
|
</MockupFrame>
|
|
);
|
|
}
|