@kloudlite/design-system/mjs/atoms/thumbnail.js

A design system for building ambitious products.

"use client";

// components/atoms/thumbnail.tsx
import classNames from "classnames";
import { jsx } from "react/jsx-runtime";
var Thumbnail = ({
  src,
  size = "md",
  rounded = false
}) => {
  return /* @__PURE__ */ jsx(
    "div",
    {
      className: classNames(
        "kl-rounded kl-border kl-border-border-default kl-overflow-clip",
        {
          "kl-w-5xl kl-h-5xl": size === "xs",
          "kl-w-6xl kl-h-6xl": size === "sm",
          "kl-w-8xl kl-h-8xl": size === "md",
          "kl-w-9xl kl-h-w-9xl": size === "lg"
        },
        {
          "kl-rounded-full": rounded,
          "kl-rounded-md": !rounded
        }
      ),
      children: /* @__PURE__ */ jsx(
        "img",
        {
          src,
          alt: "thumbnail",
          className: "kl-w-full kl-h-full kl-object-cover"
        }
      )
    }
  );
};
export {
  Thumbnail
};