smooth-components/dist/smooth-components.js

A collection of smooth and elegant React components for building modern web applications.

(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".poster-container{position:relative;z-index:30;margin-bottom:6rem;border-radius:3px;overflow:hidden;border:25px solid black;background-color:#6b728080;opacity:.8;cursor:pointer;transform:translateY(0) scale(1);transition:all .3s ease-out;box-shadow:0 20px 25px -5px #000000e6,0 8px 10px -6px #0000001a;filter:grayscale(.1) contrast(.99) sepia(.05) blur(0px)}.poster-container.group{display:none}@media (min-width: 1024px){.poster-container{margin-bottom:0}}.poster-container:hover{transform:scale(1.01) translateY(-.25rem);box-shadow:0 25px 50px -12px #00000040,0 0 20px #000}.poster-image{width:100%;height:100%;object-fit:cover;-webkit-user-select:none;user-select:none;pointer-events:none;filter:blur(.4px);transition:all .3s ease-in-out;display:block}.poster-container:hover .poster-image{filter:blur(.2px);transform:scale(1.01)}.poster-image-glint{position:absolute;top:0;left:-100%;width:100%;height:100%;pointer-events:none;z-index:10;background:linear-gradient(to right,transparent,rgba(255,255,255,.4),transparent);transform:skew(-12deg);transition:all .6s ease-in-out}.poster-container:hover .poster-image-glint{left:100%}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
import { jsxs as l, jsx as t } from "react/jsx-runtime";
const m = 0.91, T = "auto", E = "auto", p = "oklch(12.9% 0.042 264.695)", _ = !0, g = ({
  alt: o,
  src: s,
  styles: e,
  hasGlintEffect: r = _
}) => {
  const {
    opacity: c = m,
    height: a = E,
    width: i = T,
    borderColor: n = p
  } = e ?? {};
  return /* @__PURE__ */ l(
    "div",
    {
      className: "poster-container",
      style: {
        opacity: c,
        height: a,
        width: i,
        borderColor: n
      },
      children: [
        /* @__PURE__ */ t("img", { alt: o, src: s, className: "poster-image" }),
        r && /* @__PURE__ */ t("div", { className: "poster-image-glint" })
      ]
    }
  );
};
export {
  g as Poster
};