41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
import { View, TouchableOpacity, ViewStyle } from 'react-native'
|
|
import { cn } from '../../lib/utils'
|
|
|
|
// Keep shadow style for now as it's often better handled natively than via Tailwind utilities for cross-platform consistency
|
|
// OR use nativewind shadow classes if configured properly. Let's use Tailwind classes for shadow to align with the system if possible,
|
|
// but often standard CSS shadows don't map perfectly to RN shadow props (elevation vs shadowOffset).
|
|
// For specific "card" feel, we might want to keep a consistent shadow.
|
|
// However, the prompt asked for "10x better" design.
|
|
|
|
interface CardProps {
|
|
children: React.ReactNode
|
|
onPress?: () => void
|
|
className?: string
|
|
noPadding?: boolean
|
|
}
|
|
|
|
export function Card({ children, onPress, className = '', noPadding = false }: CardProps) {
|
|
const baseClasses = cn(
|
|
'bg-card rounded-xl border border-border shadow-sm',
|
|
!noPadding && 'p-4',
|
|
className
|
|
)
|
|
|
|
if (onPress) {
|
|
return (
|
|
<TouchableOpacity
|
|
onPress={onPress}
|
|
className={baseClasses}
|
|
activeOpacity={0.8}
|
|
>
|
|
{children}
|
|
</TouchableOpacity>
|
|
)
|
|
}
|
|
return (
|
|
<View className={baseClasses}>
|
|
{children}
|
|
</View>
|
|
)
|
|
}
|