<ContextualInformationCard />

Desactualizada

Esta documentación esta desactualizada.

Este componente esta disponible en el paquete: @nubeteck/prime.

📖 Descripción

ContextualInformationCard es un componente para crear vistas de detalles donde se requiere dar información importante sobre algo en especifico.

🔧 Propiedades

Este componente acepta las siguientes propiedades:

interface IContextualInformationCardProps {
  title: string;
  avatar: AvatarProps;
  rightSection?: React.ReactNode;
  items: { title: string; icon: string }[];
}

Propiedad	Tipo	Descripción
title	string	Titulo del componente.
avatar	AvatarProps	Acceso a las propiedades del avatar
rightSection	React.ReactNode	Acceso a la sección derecha del componente.
items	Array	Un arreglo de objetos con titulo y icono para colocar debajo el titulo como información adicional.

⚙️ Ejemplo

const Page = () => {
  return (
    <>
      <ContextualInformationCard
        title="Prime React Typescript Docs"
        avatar={{
          imageAlt: "Avatar",
          image: "/avatar-placeholder.webp",
        }}
        items={[
          { icon: "at", title: "Prueba 1" },
          { icon: "plus", title: "Prueba 2" },
          { icon: "abacus", title: "Prueba 3" },
        ]}
        leftSection={
          <>
            <Button size="small" label="Hello" />
            <Button size="small" label="World" severity="help" />
          </>
        }
      />
    </>
  );
};