Cards

Описание

Cards содержат контент и действия, относящиеся к единому смысловому контенту

Подробнее об использовании элемента читайте на официальном сайте

Примеры

Elevated

New Music Friday

From your favourite artists

Stress Podcast

Listen anywhere and anytime

Filled

New Music Friday

From your favourite artists

Stress Podcast

Listen anywhere and anytime

Outlined

New Music Friday

From your favourite artists

Stress Podcast

Listen anywhere and anytime

Компонент

Компонент можно сохранить в src/shared/ui/Card.tsx.

import { FC, HTMLAttributes } from "react"
import { cva, VariantProps } from "class-variance-authority"

import { cn } from "@/lib/cn"

const cardVariants = cva("rounded-xl px-4 py-3", {
  variants: {
    appearance: {
      elevated: "bg-surfaceContainerLow shadow-elevation1",
      filled:
        "bg-surfaceContainerHighest shadow-elevation1 text-onSurfaceVariant",
      outlined: "border border-outline",
    },
  },
})

interface CardProps
  extends HTMLAttributes<HTMLDivElement>,
    Required<Pick<VariantProps<typeof cardVariants>, "appearance">> {}

const Card: FC<CardProps> = ({ className, children, appearance, ...props }) => {
  return (
    <div className={cn(cardVariants({ appearance }), className)} {...props}>
      {children}
    </div>
  )
}

export default Card

Использование

Ниже - пример всех вариантов компонента Card.

<Card appearance={"elevated"}>
  {/* Контент находится здесь */}
</Card>

<Card appearance={"filled"}>
  {/* Контент находится здесь */}
</Card>

<Card appearance={"outlined"}>
  {/* Контент находится здесь */}
</Card>

Кастомизация

Вы не привязаны исключительно к предоставленным стилям компонента Card. Можно спокойно изменять компонент под себя.

Данный компонент имеет фон и обводку жёлтого цвета