"use client"; import * as React from "react"; import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "@/lib/utils"; /** * Card variants — mountain terrain themed * * Variants: * - ridge: Standard elevated card (default) * - valley: Subtle, recessed appearance * - peak: Prominent with stronger shadow * - canyon: Deep, bordered container * - snow: Minimal, clean white card */ const cardVariants = cva( "rounded-peak border border-border bg-card text-card-foreground shadow-trail transition-shadow duration-normal", { variants: { variant: { ridge: "shadow-ridge hover:shadow-summit hover:-translate-y-1 transition-all focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2", valley: "bg-slate-50 border-border shadow-basecamp dark:bg-slate-800/50", peak: "shadow-summit hover:shadow-expedition border-input", canyon: "border-2 border-input shadow-basecamp", snow: "border-0 shadow-none bg-white dark:bg-slate-950", }, padding: { none: "", sm: "p-4", md: "p-6", lg: "p-8", }, }, defaultVariants: { variant: "ridge", padding: "md", }, } ); interface CardProps extends React.HTMLAttributes, VariantProps {} const Card = React.forwardRef( ({ className, variant, padding, ...props }, ref) => (

) ); Card.displayName = "Card"; const CardHeader = React.forwardRef>( ({ className, ...props }, ref) => (

) ); CardHeader.displayName = "CardHeader"; const CardTitle = React.forwardRef>( ({ className, ...props }, ref) => (

) ); CardTitle.displayName = "CardTitle"; const CardDescription = React.forwardRef>( ({ className, ...props }, ref) => (
) ); CardDescription.displayName = "CardDescription"; const CardContent = React.forwardRef>( ({ className, ...props }, ref) => (
) ); CardContent.displayName = "CardContent"; const CardFooter = React.forwardRef>( ({ className, ...props }, ref) => (
) ); CardFooter.displayName = "CardFooter"; export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, cardVariants }; export type { CardProps };