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

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

PropTypeDefault
imageSrc
string
-
alt?
string
-
filename?
string
-
description?
string
-
metadata
object
-
onShare?
() => void
-
Job Listing Component
Job listing component with animation when showing more information
Animated Tags
Component that displays tags with an animation when they are added or removed from the list of selected tags