@0.2.13: fuller support for next/image in ImageBlock

pkgs/luxdefi-ui/blocks/components/image-block.tsx

@@ -1,10 +1,9 @@
 import React from 'react'
-
 import Image from 'next/image'
 
-import { constrain } from '../../util'
 import type { Dimensions } from '../../types'
 import type { Block, ImageBlock } from '../def'
+import { cn, constrain, containsToken } from '../../util'
 
 const ImageBlockComponent: React.FC<{
   block: Block
@@ -17,16 +16,23 @@ const ImageBlockComponent: React.FC<{
 }) => {
 
   if (block.blockType !== 'image') {
-    return <>iamge block required</>
+    return <>image block required</>
   }
 
-  const b = block as ImageBlock
-
-  const dim = b.dim as Dimensions
-  const conDim = (constraint ? constrain(dim, constraint) : dim) 
-
-  return (
-    <Image src={b.image!} alt='image' width={conDim.w} height={conDim.h}  className={className}/>
+  const {src, dim, props} = block as ImageBlock
+  const toSpread: any = {}
+  if (dim) {
+    const dimCon = (constraint ? constrain(dim, constraint) : dim)
+    toSpread.width = dimCon.w
+    toSpread.height = dimCon.h
+  }  
+
+  return (props?.fill) ? (
+    <div className='relative w-full h-full'>
+      <Image src={src} {...toSpread} {...props} className={className}/>
+    </div>
+  ) : (
+    <Image src={src} {...toSpread} {...props} className={className}/>   
   )
 }
 

pkgs/luxdefi-ui/blocks/def/image-block.ts

@@ -1,10 +1,19 @@
 import type { Dimensions } from '../../types'
 import type Block from './block'
 
+// https://nextjs.org/docs/app/api-reference/components/image
 interface ImageBlock extends Block {
   blockType: 'image'
-  image?: string,      
-  dim:  Dimensions 
+  src: string      
+  dim?:  Dimensions 
+    // cf: next/Image documentation, and type, as well as React.ImgHTMLAttributes
+  props?: {
+    sizes?: string
+    alt?: string
+    fill?: boolean 
+    objectFit?: string
+    objectPosition?: string
+  }
 }
 
 export {

pkgs/luxdefi-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luxdefi/ui",
-  "version": "0.2.12",
+  "version": "0.2.13",
   "description": "Library that contains shared UI primitives, styles, and core types",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",