ComponentsImage Metadata Preview

Image Metadata Preview

Component that displays the metadata information of an image, uses useMeasure to get the size of the information box and move the image on the Y axis

Scenario with orange black colors

Code

1

Install with shadcn Beta

Terminal

npx shadcn@latest add "https://smoothui.dev/r/image-metadata-preview.json"

Or install the demo

Terminal

npx shadcn@latest add "https://smoothui.dev/r/image-metadata-preview-demo.json"

How to use

Demo.tsx

"use client"

import React from "react"

import ImageMetadataPreview from "@/components/smoothui/ui/ImageMetadataPreview"

const demoMetadata = {
  created: "2 yrs ago",
  updated: "2 yrs ago",
  by: "Edu Calvo",
  source: "95d2a403ff12d7e3b",
}

const demoImage =
  "https://images.unsplash.com/photo-1594063596316-aa5f41ceb8dc?=jpg&fit=crop&w=600&q=80&fit=max"

const ImageMetadataPreviewDemo = () => (
  <ImageMetadataPreview
    imageSrc={demoImage}
    alt="Scenario with orange black colors"
    filename="screenshot 2024-06-12 at 20.00.22"
    description="No description"
    metadata={demoMetadata}
    onShare={() => alert("Share clicked!")}
  />
)

export default ImageMetadataPreviewDemo

Props

PropTypeDescription
imageSrcstringThe image URL to display.
alt?stringAlternative text for the image.
filename?stringThe filename to display above the metadata.
description?stringA description to display under the filename.
metadataobjectMetadata information for the image.
Object shape:
FieldTypeDescription
createdstringCreated date (e.g. '2 yrs ago')
updatedstringUpdated date (e.g. '2 yrs ago')
bystringAuthor or owner name
sourcestringSource identifier or hash
onShare?() => voidOptional callback fired when the share button is clicked.