azlan-ui-components-library/dist/index.js

Reusable UI components

import * as React from 'react';

// Don't declare return type manually
function Banner({ title, heading, image }) {
    return (React.createElement("div", { style: {
            textAlign: "center",
            padding: "2rem",
            backgroundColor: "#f9f9f9",
            borderRadius: "8px",
            boxShadow: "0 4px 12px rgba(0,0,0,0.1)",
            maxWidth: "960px",
            margin: "0 auto",
        } },
        React.createElement("img", { src: image, alt: heading, style: {
                maxWidth: "100%",
                height: "auto",
                borderRadius: "6px",
            } }),
        React.createElement("h1", { style: {
                fontSize: "2rem",
                fontWeight: 700,
                marginTop: "1.5rem",
                color: "#1e3a8a",
                lineHeight: 1.2,
            } }, heading),
        React.createElement("p", { style: {
                fontSize: "1.125rem",
                marginTop: "0.5rem",
                color: "#4b5563",
            } }, title)));
}

function styleInject(css, ref) {
  if ( ref === void 0 ) ref = {};
  var insertAt = ref.insertAt;

  if (typeof document === 'undefined') { return; }

  var head = document.head || document.getElementsByTagName('head')[0];
  var style = document.createElement('style');
  style.type = 'text/css';

  if (insertAt === 'top') {
    if (head.firstChild) {
      head.insertBefore(style, head.firstChild);
    } else {
      head.appendChild(style);
    }
  } else {
    head.appendChild(style);
  }

  if (style.styleSheet) {
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }
}

var css_248z = ".card-container {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  gap: 12px;\r\n  max-width: 400px;\r\n  height: fit-content;\r\n  border: 1px solid #e0e0e0;\r\n  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\r\n  border-radius: 12px;\r\n  overflow: hidden;\r\n  padding: 12px;\r\n  transition: transform 0.2s ease-in-out;\r\n}\r\n\r\n.card-container:hover {\r\n  transform: scale(1.05);\r\n}\r\n\r\n.card-image-wrapper {\r\n  width: 100%;\r\n  text-align: center;\r\n}\r\n\r\n.card-meta {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  width: 100%;\r\n  gap: 8px;\r\n}";
styleInject(css_248z);

const Card = ({ id, imageUrl, title, category, price, description }) => {
    return (React.createElement("div", { className: "card-container" },
        React.createElement("div", { className: "card-image-wrapper" },
            React.createElement("a", { href: `/products/${id}` },
                React.createElement("img", { src: imageUrl, alt: "thumbnail", width: 300, height: 300 }))),
        React.createElement("div", null,
            React.createElement("h1", null, title)),
        React.createElement("div", { className: "card-meta" },
            React.createElement("p", null,
                "Category: ",
                category),
            React.createElement("p", null,
                "Price: ",
                price)),
        React.createElement("div", null,
            React.createElement("p", null, description))));
};

export { Banner, Card };