64 lines
2.0 KiB
TypeScript
64 lines
2.0 KiB
TypeScript
import React from 'react';
|
|
import { YStack, XStack } from '@tamagui/stacks';
|
|
import { SizableText as Text } from '@tamagui/text';
|
|
import { Button } from '@tamagui/button';
|
|
import { Share2, QrCode, Link } from 'lucide-react';
|
|
import MockupFrame from './MockupFrame';
|
|
import { MockupCard, MockupLabel } from './MockupPrimitives';
|
|
|
|
export default function MockupHome09ShareHub() {
|
|
return (
|
|
<MockupFrame
|
|
title="Home 09 - Share Hub"
|
|
subtitle="Invite + QR + guest sharing tools"
|
|
backgroundStyle={{
|
|
backgroundImage: 'radial-gradient(circle at 25% 0%, rgba(14, 165, 233, 0.18), transparent 50%)',
|
|
}}
|
|
>
|
|
<MockupCard>
|
|
<XStack alignItems="center" gap="$2">
|
|
<Share2 size={18} color="#0F172A" />
|
|
<Text fontSize="$4" fontWeight="$7">
|
|
Invite guests
|
|
</Text>
|
|
</XStack>
|
|
<MockupLabel>Share the link or show the QR code.</MockupLabel>
|
|
</MockupCard>
|
|
|
|
<XStack gap="$3">
|
|
<MockupCard flex={1} alignItems="center" gap="$2">
|
|
<QrCode size={24} color="#0F172A" />
|
|
<Text fontSize="$3" fontWeight="$7">
|
|
Show QR
|
|
</Text>
|
|
<MockupLabel>Scan to join</MockupLabel>
|
|
</MockupCard>
|
|
<MockupCard flex={1} alignItems="center" gap="$2">
|
|
<Link size={24} color="#0F172A" />
|
|
<Text fontSize="$3" fontWeight="$7">
|
|
Copy link
|
|
</Text>
|
|
<MockupLabel>Send in chat</MockupLabel>
|
|
</MockupCard>
|
|
</XStack>
|
|
|
|
<YStack
|
|
padding="$4"
|
|
borderRadius="$card"
|
|
backgroundColor="$surface"
|
|
borderWidth={1}
|
|
borderColor="$borderColor"
|
|
gap="$3"
|
|
>
|
|
<Text fontSize="$4" fontWeight="$7">
|
|
Welcome pack
|
|
</Text>
|
|
<MockupLabel>Tips for guests and upload etiquette.</MockupLabel>
|
|
<Button size="$3" backgroundColor="$primary" borderRadius="$pill" alignSelf="flex-start">
|
|
Open guide
|
|
</Button>
|
|
</YStack>
|
|
</MockupFrame>
|
|
);
|
|
}
|