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

Install with shadcn Beta

Terminal

npx shadcn@latest add @smoothui/image-metadata-preview

Or install the demo

Terminal

npx shadcn@latest add @smoothui/image-metadata-preview-demo

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 = () => (
  <div className="flex h-full w-full items-center justify-center">
    <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!")}
    />
  </div>
)

export default ImageMetadataPreviewDemo

Props

Prop	Type	Default
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