Janady13/llms-txt-hub / packages/design-system/components/shadcn/card.tsx

Source identity

Field	Recorded value
Source type	GitHub source
Original record	Janady13/llms-txt-hub / packages/design-system/components/shadcn/card.tsx
Date	Not specified in source
Repository	Janady13/llms-txt-hub
Revision	e0f4bf978d4df168369c7601d9c5f5ea89e84377
Branch	main
Path or archive member	packages/design-system/components/shadcn/card.tsx
Original SHA-256	6df83aef2a50282e2e9de62c83baf725dca15fb9d82b253274aae34f4100f519
Git blob SHA	87a69cd91e5339d2138fe46706e9d4c8f279192e
Reading-copy SHA-256	6df83aef2a50282e2e9de62c83baf725dca15fb9d82b253274aae34f4100f519

Original source ↗

Recovered source transcript

Download complete source text ↓87 lines · 2.2 KB

import * as React from 'react'

import { cn } from '../../lib/utils'

/**
 * Card container component with hover effects
 *
 * @param props - Component props
 * @param props.className - Optional CSS class names to apply
 * @param props.rest - Additional props passed to the underlying div element (React.ComponentProps<'div'>)
 *
 * @returns JSX element rendering a styled card container with hover lift effect
 *
 * @example
 * ```tsx
 * <Card className="p-4">
 *   <CardHeader>
 *     <CardTitle>Card Title</CardTitle>
 *   </CardHeader>
 *   <CardContent>
 *     <p>Card content goes here.</p>
 *   </CardContent>
 * </Card>
 * ```
 */
function Card({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card"
      className={cn(
        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border p-4 shadow-sm',
        'transition-all duration-300 ease-out',
        'hover:shadow-lg hover:-translate-y-1 hover:border-foreground/10',
        className
      )}
      {...props}
    />
  )
}

/** Card header section */
function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-header"
      className={cn('flex flex-col gap-1.5 px-6', className)}
      {...props}
    />
  )
}

/** Card title text */
function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-title"
      className={cn('leading-none font-semibold', className)}
      {...props}
    />
  )
}

/** Card description text */
function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-description"
      className={cn('text-muted-foreground text-sm', className)}
      {...props}
    />
  )
}

/** Card content section */
function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
  return <div data-slot="card-content" className={cn('px-6', className)} {...props} />
}

/** Card footer section */
function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div data-slot="card-footer" className={cn('flex items-center px-6', className)} {...props} />
  )
}

export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }