36 lines
972 B
TypeScript
36 lines
972 B
TypeScript
import React from 'react';
|
|
import { YStack } from '@tamagui/stacks';
|
|
import type { YStackProps } from '@tamagui/stacks';
|
|
import { useAppearance } from '@/hooks/use-appearance';
|
|
|
|
type SurfaceCardProps = YStackProps & {
|
|
glow?: boolean;
|
|
};
|
|
|
|
export default function SurfaceCard({ children, glow = false, ...props }: SurfaceCardProps) {
|
|
const { resolved } = useAppearance();
|
|
const isDark = resolved === 'dark';
|
|
const borderColor = isDark ? 'rgba(255, 255, 255, 0.12)' : 'rgba(15, 23, 42, 0.12)';
|
|
const boxShadow = isDark
|
|
? glow
|
|
? '0 22px 40px rgba(6, 10, 22, 0.55)'
|
|
: '0 16px 30px rgba(2, 6, 23, 0.35)'
|
|
: glow
|
|
? '0 22px 38px rgba(15, 23, 42, 0.16)'
|
|
: '0 14px 24px rgba(15, 23, 42, 0.12)';
|
|
|
|
return (
|
|
<YStack
|
|
padding="$4"
|
|
borderRadius="$card"
|
|
backgroundColor="$surface"
|
|
borderWidth={1}
|
|
borderColor={borderColor}
|
|
style={{ boxShadow }}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</YStack>
|
|
);
|
|
}
|