Feature/image-component

[Victor1890]

Presentamos una nueva funcionalidad: Componente de Image

El componente de Image se utiliza para mostrar imágenes con soporte de Imagen de respaldo

Beneficios

• Puedes utilizar todas sus propiedades relacionado con la etiqueta img que conoces

• isBlurred: Puedes usar la propiedad isBlurred que duplica la imagen y desenfocarla para crear un efecto de borroso

• isZoomed: Puedes usar la propiedad isZoomed para amplear la imagen cuando pasas el mouse sobre ella

• Carga Animada: El componente de imagen tiene una animación de skeleton que indica the imagen is está cargando y una animación de la opacidad aparece cuando la image ya ha sido cargada

• Imagen con respaldo: Puedes usar la propiedad fallbackSrc para mostrar el respaldo cuando la imagen

  • La propiedad fallbackSrc está en uso
  • La imagen proveída en src está todavía cargando
  • La imagen proveída en src ha fallado en ver de cargar
  • La imagen proveída en src no ha sido encontrada

Cómo usar Componente de Image:

La manera mas sencilla del como utilizar el componente está actualmente el la documentación de Storybook

import Image from "@ogticrd/ui-kit/Image"

function App() {
    return (
        <Image
            width={300}
            height={300}
            src={/* Image here */}
            isBlurred
            radius={"lg"}
            shadow={"lg"}
            alt={"Code Example"}
        />
    )
}

Con Next.js Image

import Image from "@ogticrd/ui-kit/Image"
import NextImage from "next/image";

function App() {
    return (
        <Image
            as={NextImage}
            width={300}
            height={300}
            src={/* Image here */}
            isBlurred
            radius={"lg"}
            shadow={"lg"}
            alt={"Code Example"}
        />
    )
}

isBlurred

isZoomed

Shadow