UI State Layer

Можно подробно прочитать о том, что такое State Layers на официальном сайте. Учтите, что данный компонент не имеет ничего общего со State / useState, предоставляемых библиотекой react.

Компонент

Скопируйте и вставьте код в свой проект.

Можно сохранить компонент в файл src/shared/ui/UIStateLayer.tsx:

import { FC, HTMLAttributes } from "react"

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

const UIStateLayer: FC<HTMLAttributes<HTMLDivElement>> = ({
  children,
  className,
}) => {
  return (
    <div
      className={cn(
        "w-full h-full bg-opacity-0 group-hover:bg-opacity-[0.08] group-active:bg-opacity-[0.12] group-disabled:bg-opacity-0 transition-all duration-short2 ease-standard",
        className
      )}
    >
      {children}
    </div>
  )
}

export default UIStateLayer