80 lines
2.1 KiB
TypeScript
80 lines
2.1 KiB
TypeScript
import * as React from "react"
|
|
|
|
import { cn } from "@/lib/utils"
|
|
import { cardRecipe, type ControlSize } from "@/design-system/recipes"
|
|
|
|
// Размер карточки из дизайн-системы (по умолчанию md — прежний вид)
|
|
interface CardSizeProps {
|
|
cardSize?: ControlSize
|
|
}
|
|
|
|
const Card = React.forwardRef<
|
|
HTMLDivElement,
|
|
React.HTMLAttributes<HTMLDivElement>
|
|
>(({ className, ...props }, ref) => (
|
|
<div
|
|
ref={ref}
|
|
className={cn(cardRecipe.root, className)}
|
|
{...props}
|
|
/>
|
|
))
|
|
Card.displayName = "Card"
|
|
|
|
const CardHeader = React.forwardRef<
|
|
HTMLDivElement,
|
|
React.HTMLAttributes<HTMLDivElement> & CardSizeProps
|
|
>(({ className, cardSize, ...props }, ref) => (
|
|
<div
|
|
ref={ref}
|
|
className={cn(cardRecipe.header({ size: cardSize }), className)}
|
|
{...props}
|
|
/>
|
|
))
|
|
CardHeader.displayName = "CardHeader"
|
|
|
|
const CardTitle = React.forwardRef<
|
|
HTMLDivElement,
|
|
React.HTMLAttributes<HTMLDivElement>
|
|
>(({ className, ...props }, ref) => (
|
|
<div
|
|
ref={ref}
|
|
className={cn(cardRecipe.title, className)}
|
|
{...props}
|
|
/>
|
|
))
|
|
CardTitle.displayName = "CardTitle"
|
|
|
|
const CardDescription = React.forwardRef<
|
|
HTMLDivElement,
|
|
React.HTMLAttributes<HTMLDivElement>
|
|
>(({ className, ...props }, ref) => (
|
|
<div
|
|
ref={ref}
|
|
className={cn(cardRecipe.description, className)}
|
|
{...props}
|
|
/>
|
|
))
|
|
CardDescription.displayName = "CardDescription"
|
|
|
|
const CardContent = React.forwardRef<
|
|
HTMLDivElement,
|
|
React.HTMLAttributes<HTMLDivElement> & CardSizeProps
|
|
>(({ className, cardSize, ...props }, ref) => (
|
|
<div ref={ref} className={cn(cardRecipe.content({ size: cardSize }), className)} {...props} />
|
|
))
|
|
CardContent.displayName = "CardContent"
|
|
|
|
const CardFooter = React.forwardRef<
|
|
HTMLDivElement,
|
|
React.HTMLAttributes<HTMLDivElement> & CardSizeProps
|
|
>(({ className, cardSize, ...props }, ref) => (
|
|
<div
|
|
ref={ref}
|
|
className={cn(cardRecipe.footer({ size: cardSize }), className)}
|
|
{...props}
|
|
/>
|
|
))
|
|
CardFooter.displayName = "CardFooter"
|
|
|
|
export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
|