mini-starter/mini/src/components/ui/card.tsx

import { View } from '@tarojs/components'
import { cn } from '@/utils/cn'

interface CardProps {
  className?: string
  children: React.ReactNode
}

export function Card({ className, children }: CardProps) {
  return (
    <View className={cn("bg-white rounded-xl shadow-sm", className)}>
      {children}
    </View>
  )
}

interface CardHeaderProps {
  className?: string
  children: React.ReactNode
}

export function CardHeader({ className, children }: CardHeaderProps) {
  return (
    <View className={cn("p-4 border-b border-gray-100", className)}>
      {children}
    </View>
  )
}

interface CardContentProps {
  className?: string
  children: React.ReactNode
}

export function CardContent({ className, children }: CardContentProps) {
  return (
    <View className={cn("p-4", className)}>
      {children}
    </View>
  )
}

interface CardFooterProps {
  className?: string
  children: React.ReactNode
}

export function CardFooter({ className, children }: CardFooterProps) {
  return (
    <View className={cn("p-4 border-t border-gray-100", className)}>
      {children}
    </View>
  )
}