umwd-components 0.1.55 → 0.1.56

package/dist/cjs/components/Page.js

@@ -13,16 +13,16 @@ var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.j
 var React = require('react');
 var PropTypes = require('prop-types');
 var TextImageBlock = require('./TextImageBlock.js');
-require('next/link');
-require('next/image');
+var HeroSection = require('./custom/HeroSection.js');
 var FeaturesSection = require('./custom/FeaturesSection.js');
-require('@mui/material');
 
 function blockRenderer(block) {
   switch (block.__component) {
     case "layout.hero-section":
-      return /*#__PURE__*/React.createElement("p", null, "HeroSection");
-    //<HeroSection key={block.id} data={block} />;
+      return /*#__PURE__*/React.createElement(HeroSection.HeroSection, {
+        key: block.id,
+        data: block
+      });
     case "layout.feature-section":
       return /*#__PURE__*/React.createElement(FeaturesSection.FeatureSection, {
         key: block.id,

package/dist/cjs/components/custom/HeroSection.js

@@ -0,0 +1,42 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+'use strict';
+
+var Link = require('next/link');
+var StrapiImage = require('./StrapiImage.js');
+
+function HeroSection(_ref) {
+  let {
+    data
+  } = _ref;
+  const {
+    heading,
+    subHeading,
+    image,
+    link
+  } = data;
+  return /*#__PURE__*/React.createElement("header", {
+    className: "relative h-[600px] overflow-hidden"
+  }, /*#__PURE__*/React.createElement(StrapiImage.StrapiImage, {
+    alt: "Background",
+    className: "absolute inset-0 object-cover w-full h-full",
+    height: 1080,
+    src: image.url,
+    width: 1920
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "relative z-10 flex flex-col items-center justify-center h-full text-center text-white bg-black bg-opacity-20"
+  }, /*#__PURE__*/React.createElement("h1", {
+    className: "text-4xl font-bold md:text-5xl lg:text-6xl"
+  }, heading), /*#__PURE__*/React.createElement("p", {
+    className: "mt-4 text-lg md:text-xl lg:text-2xl"
+  }, subHeading), /*#__PURE__*/React.createElement(Link, {
+    className: "mt-8 inline-flex items-center justify-center px-6 py-3 text-base font-medium text-black bg-white rounded-md shadow hover:bg-gray-100",
+    href: link.url
+  }, link.text)));
+}
+
+exports.HeroSection = HeroSection;

package/dist/cjs/components/custom/StrapiImage.js

@@ -0,0 +1,32 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+'use strict';
+
+var Image = require('next/image');
+var utils = require('../../lib/utils.js');
+
+function StrapiImage(_ref) {
+  let {
+    src,
+    alt,
+    height,
+    width,
+    className
+  } = _ref;
+  if (!src) return null;
+  const imageUrl = utils.getStrapiMedia(src);
+  const imageFallback = "https://placehold.co/".concat(width, "x").concat(height);
+  return /*#__PURE__*/React.createElement(Image, {
+    src: imageUrl !== null && imageUrl !== void 0 ? imageUrl : imageFallback,
+    alt: alt,
+    height: height,
+    width: width,
+    className: className
+  });
+}
+
+exports.StrapiImage = StrapiImage;

package/dist/cjs/lib/utils.js

@@ -0,0 +1,28 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+'use strict';
+
+// import { type ClassValue, clsx } from "clsx";
+// import { twMerge } from "tailwind-merge";
+//
+// export function cn(...inputs: ClassValue[]) {
+//   return twMerge(clsx(inputs));
+// }
+
+function getStrapiURL() {
+  var _process$env$NEXT_PUB;
+  return (_process$env$NEXT_PUB = process.env.NEXT_PUBLIC_STRAPI_URL) !== null && _process$env$NEXT_PUB !== void 0 ? _process$env$NEXT_PUB : "http://localhost:1337";
+}
+function getStrapiMedia(url) {
+  if (url == null) return null;
+  if (url.startsWith("data:")) return url;
+  if (url.startsWith("http") || url.startsWith("//")) return url;
+  return "".concat(getStrapiURL()).concat(url);
+}
+
+exports.getStrapiMedia = getStrapiMedia;
+exports.getStrapiURL = getStrapiURL;

package/dist/esm/components/Page.js

@@ -9,16 +9,16 @@ import { extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
 import React from 'react';
 import PropTypes from 'prop-types';
 import TextImageBlock from './TextImageBlock.js';
-import 'next/link';
-import 'next/image';
+import { HeroSection } from './custom/HeroSection.js';
 import { FeatureSection } from './custom/FeaturesSection.js';
-import '@mui/material';
 
 function blockRenderer(block) {
   switch (block.__component) {
     case "layout.hero-section":
-      return /*#__PURE__*/React.createElement("p", null, "HeroSection");
-    //<HeroSection key={block.id} data={block} />;
+      return /*#__PURE__*/React.createElement(HeroSection, {
+        key: block.id,
+        data: block
+      });
     case "layout.feature-section":
       return /*#__PURE__*/React.createElement(FeatureSection, {
         key: block.id,

package/dist/esm/components/custom/HeroSection.js

@@ -0,0 +1,40 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import Link from 'next/link';
+import { StrapiImage } from './StrapiImage.js';
+
+function HeroSection(_ref) {
+  let {
+    data
+  } = _ref;
+  const {
+    heading,
+    subHeading,
+    image,
+    link
+  } = data;
+  return /*#__PURE__*/React.createElement("header", {
+    className: "relative h-[600px] overflow-hidden"
+  }, /*#__PURE__*/React.createElement(StrapiImage, {
+    alt: "Background",
+    className: "absolute inset-0 object-cover w-full h-full",
+    height: 1080,
+    src: image.url,
+    width: 1920
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "relative z-10 flex flex-col items-center justify-center h-full text-center text-white bg-black bg-opacity-20"
+  }, /*#__PURE__*/React.createElement("h1", {
+    className: "text-4xl font-bold md:text-5xl lg:text-6xl"
+  }, heading), /*#__PURE__*/React.createElement("p", {
+    className: "mt-4 text-lg md:text-xl lg:text-2xl"
+  }, subHeading), /*#__PURE__*/React.createElement(Link, {
+    className: "mt-8 inline-flex items-center justify-center px-6 py-3 text-base font-medium text-black bg-white rounded-md shadow hover:bg-gray-100",
+    href: link.url
+  }, link.text)));
+}
+
+export { HeroSection };

package/dist/esm/components/custom/StrapiImage.js

@@ -0,0 +1,30 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import Image from 'next/image';
+import { getStrapiMedia } from '../../lib/utils.js';
+
+function StrapiImage(_ref) {
+  let {
+    src,
+    alt,
+    height,
+    width,
+    className
+  } = _ref;
+  if (!src) return null;
+  const imageUrl = getStrapiMedia(src);
+  const imageFallback = "https://placehold.co/".concat(width, "x").concat(height);
+  return /*#__PURE__*/React.createElement(Image, {
+    src: imageUrl !== null && imageUrl !== void 0 ? imageUrl : imageFallback,
+    alt: alt,
+    height: height,
+    width: width,
+    className: className
+  });
+}
+
+export { StrapiImage };

package/dist/esm/lib/utils.js

@@ -0,0 +1,25 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+// import { type ClassValue, clsx } from "clsx";
+// import { twMerge } from "tailwind-merge";
+//
+// export function cn(...inputs: ClassValue[]) {
+//   return twMerge(clsx(inputs));
+// }
+
+function getStrapiURL() {
+  var _process$env$NEXT_PUB;
+  return (_process$env$NEXT_PUB = process.env.NEXT_PUBLIC_STRAPI_URL) !== null && _process$env$NEXT_PUB !== void 0 ? _process$env$NEXT_PUB : "http://localhost:1337";
+}
+function getStrapiMedia(url) {
+  if (url == null) return null;
+  if (url.startsWith("data:")) return url;
+  if (url.startsWith("http") || url.startsWith("//")) return url;
+  return "".concat(getStrapiURL()).concat(url);
+}
+
+export { getStrapiMedia, getStrapiURL };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "umwd-components",
-  "version": "0.1.55",
+  "version": "0.1.56",
   "description": "UMWD Component library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/Page.js

@@ -5,12 +5,11 @@ import PropTypes from "prop-types";
 import TextImageBlock from "./TextImageBlock";
 import { HeroSection } from "./custom/HeroSection.tsx";
 import { FeatureSection } from "./custom/FeaturesSection.tsx";
-import { Typography } from "@mui/material";
 
 function blockRenderer(block) {
   switch (block.__component) {
     case "layout.hero-section":
-      return <p>HeroSection</p>; //<HeroSection key={block.id} data={block} />;
+      return <HeroSection key={block.id} data={block} />;
     case "layout.feature-section":
       return <FeatureSection key={block.id} data={block} />;
     case "layout.text-image-section":