58 lines
1016 B
TypeScript
58 lines
1016 B
TypeScript
import * as React from "react"
|
|
import NextImage from "next/image"
|
|
|
|
import { cn } from "@/lib/utils"
|
|
|
|
export type ObjectFit =
|
|
| "contain"
|
|
| "cover"
|
|
| "fill"
|
|
| "none"
|
|
| "scale-down"
|
|
|
|
const objectFitStyles: Record<ObjectFit, string> = {
|
|
contain: "object-contain",
|
|
cover: "object-cover",
|
|
fill: "object-fill",
|
|
none: "object-none",
|
|
"scale-down": "object-scale-down",
|
|
}
|
|
|
|
export interface ImageProps {
|
|
src: string
|
|
alt?: string
|
|
objectFit?: ObjectFit
|
|
circle?: boolean
|
|
height?: number
|
|
width?: number
|
|
className?: string
|
|
}
|
|
|
|
function Image({
|
|
src,
|
|
alt = "",
|
|
objectFit = "cover",
|
|
circle = false,
|
|
height = 300,
|
|
width = 300,
|
|
className,
|
|
}: ImageProps) {
|
|
return (
|
|
<span className="inline-block">
|
|
<NextImage
|
|
src={src}
|
|
alt={alt}
|
|
height={height}
|
|
width={width}
|
|
className={cn(
|
|
objectFitStyles[objectFit],
|
|
circle ? "rounded-full" : "rounded-md",
|
|
className
|
|
)}
|
|
/>
|
|
</span>
|
|
)
|
|
}
|
|
|
|
export { Image }
|