Picture

1import * as React from "react"
2 
3import { cn } from "@/lib/utils"
4 
5type PictureProps = React.HTMLAttributes<HTMLElement> & {
6  children?: React.ReactNode
7}
8 
9function PictureRoot({ className, children, ...props }: PictureProps) {
10  return (
11    <figure
12      className={cn(
13        "relative overflow-hidden rounded-md bg-muted [&_img]:rounded-md",
14        className
15      )}
16      {...props}
17    >
18      {children}
19    </figure>
20  )
21}
22 
23type PictureImageProps = React.ImgHTMLAttributes<HTMLImageElement> & {
24  objectPosition?: React.CSSProperties["objectPosition"]
25  transition?: boolean
26}
27 
28function PictureImage({
29  className,
30  objectPosition,
31  transition = false,
32  style,
33  ...props
34}: PictureImageProps) {
35  return (
36    <img
37      {...props}
38      style={{ objectPosition, ...style }}
39      className={cn(
40        "block w-full object-cover opacity-60 grayscale transition-opacity duration-700",
41        transition &&
42          "hover:opacity-100 hover:grayscale-[60%] hover:duration-1000 focus:opacity-100 focus:grayscale-[60%] focus:duration-1000",
43        className
44      )}
45    />
46  )
47}
48 
49type PictureCaptionProps = React.HTMLAttributes<HTMLElement>
50 
51function PictureCaption({
52  className,
53  children,
54  ...props
55}: PictureCaptionProps) {
56  return (
57    <figcaption
58      className={cn(
59        "absolute bottom-0 right-0 h-6 px-1.5 text-xs font-bold leading-6 text-accent bg-[rgba(4,37,43,0.6)]",
60        className
61      )}
62      {...props}
63    >
64      {children}
65    </figcaption>
66  )
67}
68 
69export const Picture = Object.assign(PictureRoot, {
70  Image: PictureImage,
71  Caption: PictureCaption,
72})
73 
74export { PictureImage, PictureCaption }
75export type { PictureProps, PictureImageProps, PictureCaptionProps }