66 lines
1.3 KiB
TypeScript
66 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
import { XStack, YStack } from '@tamagui/stacks';
|
|
import { SizableText as Text } from '@tamagui/text';
|
|
|
|
type StackProps = React.ComponentProps<typeof YStack>;
|
|
|
|
type RowProps = React.ComponentProps<typeof XStack>;
|
|
|
|
export function MockupCard({ children, ...props }: StackProps) {
|
|
return (
|
|
<YStack
|
|
padding="$4"
|
|
borderRadius="$card"
|
|
backgroundColor="$surface"
|
|
borderWidth={1}
|
|
borderColor="$borderColor"
|
|
gap="$3"
|
|
{...props}
|
|
>
|
|
{children}
|
|
</YStack>
|
|
);
|
|
}
|
|
|
|
export function MockupTile({ children, ...props }: StackProps) {
|
|
return (
|
|
<YStack
|
|
padding="$3"
|
|
borderRadius="$tile"
|
|
backgroundColor="$muted"
|
|
borderWidth={1}
|
|
borderColor="$borderColor"
|
|
gap="$2"
|
|
{...props}
|
|
>
|
|
{children}
|
|
</YStack>
|
|
);
|
|
}
|
|
|
|
export function MockupChip({ children, ...props }: RowProps) {
|
|
return (
|
|
<XStack
|
|
alignItems="center"
|
|
gap="$2"
|
|
paddingVertical="$2"
|
|
paddingHorizontal="$3"
|
|
borderRadius="$pill"
|
|
backgroundColor="$surface"
|
|
borderWidth={1}
|
|
borderColor="$borderColor"
|
|
{...props}
|
|
>
|
|
{children}
|
|
</XStack>
|
|
);
|
|
}
|
|
|
|
export function MockupLabel({ children }: { children: React.ReactNode }) {
|
|
return (
|
|
<Text fontSize="$2" color="$color" opacity={0.6}>
|
|
{children}
|
|
</Text>
|
|
);
|
|
}
|