umwd-components 0.1.68 → 0.1.70

package/dist/cjs/components/ContactForm.js

@@ -10,11 +10,18 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-require('prop-types');
 var material = require('@mui/material');
 var isEmail = require('validator/lib/isEmail');
 
 function ContactForm(_ref) {
+  let {
+    data
+  } = _ref;
+  const {
+    id,
+    title,
+    maxWidth = "lg"
+  } = data;
   const [formValues, setFormValues] = React.useState({
     name: "",
     email: "",
@@ -23,10 +30,7 @@ function ContactForm(_ref) {
   });
   const [formErrors, setFormErrors] = React.useState({});
   const handleBlur = e => {
-    console.log(e.target.id);
-    console.log(e.target.value);
     const errors = validate(formValues);
-    console.log(errors);
     setFormErrors({
       ...formErrors,
       [e.target.id]: errors[e.target.id]
@@ -69,7 +73,16 @@ function ContactForm(_ref) {
     console.log("errors from validate", errors);
     return errors;
   };
-  return /*#__PURE__*/React.createElement(material.Stack, {
+  return /*#__PURE__*/React.createElement(material.Container, {
+    maxWidth: maxWidth,
+    sx: {
+      my: 1
+    }
+  }, /*#__PURE__*/React.createElement(material.Paper, {
+    sx: {
+      p: 2
+    }
+  }, /*#__PURE__*/React.createElement(material.Stack, {
     spacing: 2
   }, /*#__PURE__*/React.createElement(material.Typography, {
     variant: "h6",
@@ -127,8 +140,7 @@ function ContactForm(_ref) {
     variant: "contained",
     color: "primary",
     onClick: handleSendCallback
-  }, "Send")));
+  }, "Send")))));
 }
-ContactForm.propTypes = {};
 
 exports.default = ContactForm;

package/dist/cjs/components/HeroSection.js

@@ -18,7 +18,8 @@ function HeroSection(_ref) {
   const {
     heading,
     subHeading,
-    image,
+    bgImage,
+    logoImage,
     link
   } = data;
   return /*#__PURE__*/React.createElement("header", {
@@ -47,16 +48,24 @@ function HeroSection(_ref) {
       height: "100%"
     },
     height: 1080,
-    src: image.url,
+    src: bgImage.url,
     width: 1920
   }), /*#__PURE__*/React.createElement(material.Stack, {
     spacing: 2,
+    alignItems: "center",
+    justifyContent: "center",
     sx: {
       width: "max-content",
       maxWidth: "600px",
       zIndex: 1
     }
-  }, /*#__PURE__*/React.createElement(material.Typography, {
+  }, logoImage && /*#__PURE__*/React.createElement(StrapiImage.StrapiImage, {
+    alt: logoImage.alternativeText,
+    height: logoImage.height || 100,
+    style: logoImage.style || {},
+    src: logoImage.url,
+    width: logoImage.width || 100
+  }), /*#__PURE__*/React.createElement(material.Typography, {
     variant: "h1",
     align: "center"
   }, heading), /*#__PURE__*/React.createElement(material.Typography, {

package/dist/cjs/components/Page.js

@@ -15,6 +15,8 @@ var TextImageSection = require('./TextImageSection.js');
 var HeroSection = require('./HeroSection.js');
 var FeaturesSection = require('./FeaturesSection.js');
 var IconSection = require('./IconSection.js');
+var material = require('@mui/material');
+var ContactForm = require('./ContactForm.js');
 
 function blockRenderer(block) {
   switch (block.__component) {
@@ -28,6 +30,11 @@ function blockRenderer(block) {
         key: block.id,
         data: block
       });
+    case "layout.contact-section":
+      return /*#__PURE__*/React.createElement(ContactForm.default, {
+        key: block.id,
+        data: block
+      });
     case "layout.text-image-section":
       return /*#__PURE__*/React.createElement(TextImageSection.default, {
         key: block.id,
@@ -44,12 +51,17 @@ function blockRenderer(block) {
 }
 function Page(_ref) {
   let {
-    blocks
+    blocks,
+    sx
   } = _ref;
   if (!blocks) {
     return /*#__PURE__*/React.createElement("p", null, "No sections found");
   }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, blocks.map(blockRenderer));
+  return /*#__PURE__*/React.createElement(material.Box, {
+    sx: {
+      ...sx
+    }
+  }, blocks.map(blockRenderer));
 }
 Page.propTypes = {
   blocks: PropTypes.arrayOf(PropTypes.object)

package/dist/cjs/components/StrapiImage.js

@@ -26,7 +26,7 @@ function StrapiImage(_ref) {
     alt: alt,
     height: height,
     width: width,
-    style: style
+    style: style && style
   });
 }
 

package/dist/cjs/components/TextImageSection.js

@@ -23,7 +23,7 @@ function TextImageSection(_ref) {
     text,
     image,
     reverse = false,
-    maxWidth
+    maxWidth = "lg"
   } = data;
 
   /* TODO Text_content should deal with linebreaks,

package/dist/esm/components/ContactForm.js

@@ -6,11 +6,18 @@
  */
   
 import React from 'react';
-import 'prop-types';
-import { Stack, Typography, TextField, Button } from '@mui/material';
+import { Container, Paper, Stack, Typography, TextField, Button } from '@mui/material';
 import isEmail from 'validator/lib/isEmail';
 
 function ContactForm(_ref) {
+  let {
+    data
+  } = _ref;
+  const {
+    id,
+    title,
+    maxWidth = "lg"
+  } = data;
   const [formValues, setFormValues] = React.useState({
     name: "",
     email: "",
@@ -19,10 +26,7 @@ function ContactForm(_ref) {
   });
   const [formErrors, setFormErrors] = React.useState({});
   const handleBlur = e => {
-    console.log(e.target.id);
-    console.log(e.target.value);
     const errors = validate(formValues);
-    console.log(errors);
     setFormErrors({
       ...formErrors,
       [e.target.id]: errors[e.target.id]
@@ -65,7 +69,16 @@ function ContactForm(_ref) {
     console.log("errors from validate", errors);
     return errors;
   };
-  return /*#__PURE__*/React.createElement(Stack, {
+  return /*#__PURE__*/React.createElement(Container, {
+    maxWidth: maxWidth,
+    sx: {
+      my: 1
+    }
+  }, /*#__PURE__*/React.createElement(Paper, {
+    sx: {
+      p: 2
+    }
+  }, /*#__PURE__*/React.createElement(Stack, {
     spacing: 2
   }, /*#__PURE__*/React.createElement(Typography, {
     variant: "h6",
@@ -123,8 +136,7 @@ function ContactForm(_ref) {
     variant: "contained",
     color: "primary",
     onClick: handleSendCallback
-  }, "Send")));
+  }, "Send")))));
 }
-ContactForm.propTypes = {};
 
 export { ContactForm as default };

package/dist/esm/components/HeroSection.js

@@ -16,7 +16,8 @@ function HeroSection(_ref) {
   const {
     heading,
     subHeading,
-    image,
+    bgImage,
+    logoImage,
     link
   } = data;
   return /*#__PURE__*/React.createElement("header", {
@@ -45,16 +46,24 @@ function HeroSection(_ref) {
       height: "100%"
     },
     height: 1080,
-    src: image.url,
+    src: bgImage.url,
     width: 1920
   }), /*#__PURE__*/React.createElement(Stack, {
     spacing: 2,
+    alignItems: "center",
+    justifyContent: "center",
     sx: {
       width: "max-content",
       maxWidth: "600px",
       zIndex: 1
     }
-  }, /*#__PURE__*/React.createElement(Typography, {
+  }, logoImage && /*#__PURE__*/React.createElement(StrapiImage, {
+    alt: logoImage.alternativeText,
+    height: logoImage.height || 100,
+    style: logoImage.style || {},
+    src: logoImage.url,
+    width: logoImage.width || 100
+  }), /*#__PURE__*/React.createElement(Typography, {
     variant: "h1",
     align: "center"
   }, heading), /*#__PURE__*/React.createElement(Typography, {

package/dist/esm/components/Page.js

@@ -11,6 +11,8 @@ import TextImageSection from './TextImageSection.js';
 import { HeroSection } from './HeroSection.js';
 import { FeatureSection } from './FeaturesSection.js';
 import { IconSection } from './IconSection.js';
+import { Box } from '@mui/material';
+import ContactForm from './ContactForm.js';
 
 function blockRenderer(block) {
   switch (block.__component) {
@@ -24,6 +26,11 @@ function blockRenderer(block) {
         key: block.id,
         data: block
       });
+    case "layout.contact-section":
+      return /*#__PURE__*/React.createElement(ContactForm, {
+        key: block.id,
+        data: block
+      });
     case "layout.text-image-section":
       return /*#__PURE__*/React.createElement(TextImageSection, {
         key: block.id,
@@ -40,12 +47,17 @@ function blockRenderer(block) {
 }
 function Page(_ref) {
   let {
-    blocks
+    blocks,
+    sx
   } = _ref;
   if (!blocks) {
     return /*#__PURE__*/React.createElement("p", null, "No sections found");
   }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, blocks.map(blockRenderer));
+  return /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      ...sx
+    }
+  }, blocks.map(blockRenderer));
 }
 Page.propTypes = {
   blocks: PropTypes.arrayOf(PropTypes.object)

package/dist/esm/components/StrapiImage.js

@@ -24,7 +24,7 @@ function StrapiImage(_ref) {
     alt: alt,
     height: height,
     width: width,
-    style: style
+    style: style && style
   });
 }
 

package/dist/esm/components/TextImageSection.js

@@ -19,7 +19,7 @@ function TextImageSection(_ref) {
     text,
     image,
     reverse = false,
-    maxWidth
+    maxWidth = "lg"
   } = data;
 
   /* TODO Text_content should deal with linebreaks,

package/package.json

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

package/src/components/ContactForm.tsx

@@ -0,0 +1,149 @@
+"use client";
+
+import React from "react";
+import {
+  Container,
+  Paper,
+  TextField,
+  Typography,
+  Stack,
+  Button,
+} from "@mui/material";
+import isEmail from "validator/lib/isEmail";
+
+interface ContactFormProps {
+  id: number;
+  title: string;
+  maxWidth: string;
+}
+
+function ContactForm({ data }: { readonly data: ContactFormProps }) {
+  const { id, title, maxWidth = "lg" } = data;
+
+  const [formValues, setFormValues] = React.useState({
+    name: "",
+    email: "",
+    subject: "",
+    message: "",
+  });
+
+  const [formErrors, setFormErrors] = React.useState({});
+
+  const handleBlur = (e: Event) => {
+    const errors = validate(formValues);
+    setFormErrors({ ...formErrors, [e.target.id]: errors[e.target.id] });
+  };
+
+  const handleChange = (e: Event) => {
+    const { id, value } = e.target;
+    setFormValues({ ...formValues, [id]: value });
+    console.log("formValues", formValues);
+  };
+
+  const handleClear = () => {
+    setFormValues({});
+  };
+
+  const handleSendCallback = () => {
+    console.log("Send callback");
+  };
+
+  const validate = (values) => {
+    console.log("values from validate", values);
+    let errors = {};
+
+    if (values.name === "") {
+      errors.name = "Name is required";
+    }
+    if (values.email === "") {
+      errors.email = "Email is required";
+    } else if (!isEmail(values.email)) {
+      errors.email = "Invalid email";
+    }
+    if (values.subject === "") {
+      errors.subject = "Subject is required";
+    }
+    if (values.message === "") {
+      errors.message = "Message is required";
+    }
+
+    console.log("errors from validate", errors);
+
+    return errors;
+  };
+
+  return (
+    <Container maxWidth={maxWidth} sx={{ my: 1 }}>
+      <Paper sx={{ p: 2 }}>
+        <Stack spacing={2}>
+          <Typography variant="h6" align="center">
+            Write us
+          </Typography>
+          <Typography variant="body1" align="center">
+            We're open for any suggestion or just to have a chat
+          </Typography>
+          <TextField
+            id="name"
+            label="Name"
+            value={formValues.name}
+            variant="outlined"
+            onBlur={(e) => handleBlur(e)}
+            onChange={(e) => handleChange(e)}
+            error={formErrors.name != undefined ? true : false}
+            helperText={formErrors.name}
+          />
+          <TextField
+            id="email"
+            label="Email"
+            value={formValues.email}
+            variant="outlined"
+            onBlur={handleBlur}
+            onChange={handleChange}
+            error={formErrors.email != undefined ? true : false}
+            helperText={formErrors.email}
+          />
+          <TextField
+            id="subject"
+            label="Subject"
+            value={formValues.subject}
+            variant="outlined"
+            onBlur={handleBlur}
+            onChange={handleChange}
+            error={formErrors.subject != undefined}
+            helperText={formErrors.subject}
+          />
+          <TextField
+            id="message"
+            label="Message"
+            value={formValues.message}
+            variant="outlined"
+            multiline
+            minRows={5}
+            onBlur={handleBlur}
+            onChange={handleChange}
+            error={formErrors.message != undefined}
+            helperText={formErrors.message}
+          />
+          <Stack direction={"row"} spacing={2} justifyContent={"end"}>
+            <Button
+              variant="outlined"
+              color="primary"
+              onClick={() => handleClear}
+            >
+              Clear
+            </Button>
+            <Button
+              variant="contained"
+              color="primary"
+              onClick={handleSendCallback}
+            >
+              Send
+            </Button>
+          </Stack>
+        </Stack>
+      </Paper>
+    </Container>
+  );
+}
+
+export default ContactForm;

package/src/components/HeroSection.tsx

@@ -7,6 +7,9 @@ interface ImageProps {
   id: number;
   url: string;
   alternativeText: string;
+  style: React.CSSProperties;
+  width: number;
+  height: number;
 }
 
 interface LinkProps {
@@ -21,13 +24,14 @@ interface HeroSectionProps {
     __component: string;
     heading: string;
     subHeading: string;
-    image: ImageProps;
+    bgImage: ImageProps;
+    logoImage: ImageProps;
     link: LinkProps;
   };
 }
 
 export function HeroSection({ data }: Readonly<HeroSectionProps>) {
-  const { heading, subHeading, image, link } = data;
+  const { heading, subHeading, bgImage, logoImage, link } = data;
 
   return (
     <header style={{ position: "relative", padding: 0, margin: 0 }}>
@@ -52,13 +56,24 @@ export function HeroSection({ data }: Readonly<HeroSectionProps>) {
             height: "100%",
           }}
           height={1080}
-          src={image.url}
+          src={bgImage.url}
           width={1920}
         />
         <Stack
           spacing={2}
+          alignItems="center"
+          justifyContent="center"
           sx={{ width: "max-content", maxWidth: "600px", zIndex: 1 }}
         >
+          {logoImage && (
+            <StrapiImage
+              alt={logoImage.alternativeText}
+              height={logoImage.height || 100}
+              style={logoImage.style || {}}
+              src={logoImage.url}
+              width={logoImage.width || 100}
+            />
+          )}
           <Typography variant="h1" align="center">
             {heading}
           </Typography>

package/src/components/Page.js

@@ -6,6 +6,8 @@ import TextImageSection from "./TextImageSection.tsx";
 import { HeroSection } from "./HeroSection.tsx";
 import { FeatureSection } from "./FeaturesSection.tsx";
 import { IconSection } from "./IconSection.tsx";
+import { Box } from "@mui/material";
+import ContactForm from "./ContactForm.tsx";
 
 function blockRenderer(block) {
   switch (block.__component) {
@@ -13,21 +15,24 @@ function blockRenderer(block) {
       return <HeroSection key={block.id} data={block} />;
     case "layout.features-section":
       return <FeatureSection key={block.id} data={block} />;
+    case "layout.contact-section":
+      return <ContactForm key={block.id} data={block} />;
     case "layout.text-image-section":
       return <TextImageSection key={block.id} data={block} />;
     case "layout.icon-section":
       return <IconSection key={block.id} data={block} />;
+
     default:
       return null;
   }
 }
 
-function Page({ blocks }) {
+function Page({ blocks, sx }) {
   if (!blocks) {
     return <p>No sections found</p>;
   }
 
-  return <>{blocks.map(blockRenderer)}</>;
+  return <Box sx={{ ...sx }}>{blocks.map(blockRenderer)}</Box>;
 }
 
 Page.propTypes = {

package/src/components/StrapiImage.tsx

@@ -27,7 +27,7 @@ export function StrapiImage({
       alt={alt}
       height={height}
       width={width}
-      style={style}
+      style={style && style}
     />
   );
 }

package/src/components/TextImageSection.tsx

@@ -24,7 +24,7 @@ interface TextImageSectionProps {
 }
 
 function TextImageSection({ data }: Readonly<TextImageSectionProps>) {
-  const { title, text, image, reverse = false, maxWidth } = data;
+  const { title, text, image, reverse = false, maxWidth = "lg" } = data;
 
   /* TODO Text_content should deal with linebreaks,
   reading up upon mui-markdown docs is advised */

package/src/index.js

@@ -10,6 +10,6 @@ export { default as NavBar } from "./components/NavBar";
 export { default as TextImageSection } from "./components/TextImageSection.tsx";
 export { default as Page } from "./components/Page";
 export { default as Footer } from "./components/Footer";
-export { default as ContactForm } from "./components/ContactForm";
+export { default as ContactForm } from "./components/ContactForm.tsx";
 export { default as WebsitePlaceholder } from "./components/WebsitePlaceholder";
 export { default as BulletList } from "./components/BulletList";

package/src/stories/Page.stories.js

@@ -7,8 +7,8 @@ export default {
   // argTypes: { numberOfChildren: { type: "number" } },
 };
 
-const Template = ({ title, description, blocks, ...args }) => (
-  <Page title={title} description={description} blocks={blocks} />
+const Template = ({ title, description, blocks, sx, ...args }) => (
+  <Page title={title} description={description} blocks={blocks} sx={sx} />
 );
 
 export const HelloWorld = Template.bind({});
@@ -21,11 +21,174 @@ HelloWorld.args = {
       __component: "layout.hero-section",
       heading: "UMWD",
       subHeading: "A place for all your resources",
+      bgImage: {
+        id: 3,
+        url: "https://via.placeholder.com/100",
+        alternativeText: "UMWD",
+      },
+      logoImage: {
+        id: 3,
+        url: "/uploads/logo_decorated_ad284d33ef.png",
+        alternativeText: "UMWD",
+        width: 250,
+        height: 250,
+      },
+      link: {
+        id: 3,
+        url: "/resources",
+        text: "Resources",
+      },
+    },
+    {
+      id: 2,
+      __component: "layout.features-section",
+      title: "AMH",
+      description: "A place for all your resources",
+      feature: [
+        {
+          id: 1,
+          heading: "AIR AMBULANCE",
+          subHeading:
+            "All our aircraft providers are operational around the clock to ensure the patient gets home the fastest way. Our air ambulances are specifically modified to the highest medical standard. To ensure that patients who are in need of repatriation or evacuation can be transported as efficiently as possible. While upholding the highest international standards for medical treatment during the flight. Our aircrafts can carry up to two stretchers if needed and carry an oxygen capacity of ??? liters. Depending on the patient’s needs, travel distance and urgency of transport, the best type of air ambulance will be advised and provided.",
+          icon: "CLOUD_ICON",
+        },
+        {
+          id: 2,
+          heading: "BED TO BED",
+          subHeading:
+            "We offer bed to bed service. Where we will pick up the patient at the hospital of origin and also bring the patient to the receiving hospital with our medical team. This guarantees the best quality handover to the medical team that will take over the care of the patient at home.",
+          icon: "CHECK_ICON",
+        },
+        {
+          id: 3,
+          heading: "COMMERCIAL AIRLINE MEDICAL ESCORT",
+          subHeading:
+            "Medical transfer by commercial airline is a safe and more cost effective way to travel, if transport by air ambulance is not needed. We can provide medical escorts for necessary treatment and support, to keep the patient safe and comfortable during the flight. Depending on the patient’s diagnosis and condition and also flight options. Transport can be done in first class, business class or with a stretcher in economy class. Our team will help you pick the best way of transport.",
+          icon: "CLOCK_ICON",
+        },
+      ],
+    },
+    {
+      id: 1,
+      __component: "layout.text-image-section",
+      title: "Hello Mars",
       image: {
+        url: "/uploads/man_in_circle_icon_6c77b6d3e4.png",
+        alt: "Hello Mars",
+      },
+      text: "**Hello Mars,** \n a distant red planet that has captured the imagination of humanity for centuries. As we gaze upon your mysterious surface from Earth, we can't help but wonder about the secrets you hold. Hello to the vast landscapes of rust-colored terrain, the towering volcanoes, and the enigmatic canyons that weave across your surface.    *Hello Mars,* a planet that has been the focus of numerous space missions, each one aiming to unveil the mysteries of your past and present. From the iconic rovers tirelessly traversing your rocky landscapes to the orbiters capturing breathtaking images from above, we extend our greetings to the scientific endeavors that seek to understand your geology, climate, and potential for life. <br /> <br /> *Hello Mars,* a beacon of human exploration and curiosity. The dreams of setting foot on your soil have fueled the aspirations of generations, and with each technological leap, the possibility of humans visiting you becomes more tangible. The prospect of a human settlement on Mars brings excitement, challenges, and the promise of a new chapter in our interplanetary journey. <br /> <br /> *Hello Mars,* a testament to the indomitable human spirit that constantly seeks to push the boundaries of what is possible. As we continue to study, explore, and dream about the mysteries you hold, we are reminded of the vastness of the cosmos and the endless opportunities for discovery that lie beyond our home planet.",
+      reverse: true,
+    },
+    {
+      id: 1,
+      __component: "layout.icon-section",
+      icon: [
+        {
+          id: 1,
+          title: "INTENSIVE CARE UNIT",
+          text: "Intensive care unit with stretcher and vacuum mattress (adjustable backrest) | oxygen supply, compressed air and vacuum pump | 110/230V + 12/24V power supplies",
+          icon: "CLOCK_ICON",
+        },
+        {
+          id: 2,
+          title: "OXYGEN CAPACITY",
+          text: "4.000 l (per intensive care unit) plus up to 10.800 l in carbon high pressure cylinders",
+          icon: "CHECK_ICON",
+        },
+        {
+          id: 3,
+          title: "RESPIRATION SYSTEM",
+          text: "Hamilton T1 | or Hamilton H900 humidifier for: adults, pediatrics, neonates",
+          icon: "CLOUD_ICON",
+        },
+        {
+          id: 4,
+          title: "MONITORING",
+          text: "Zoll X Series | T1 (invasive and non-invasive blood pressure measurement, pulse oxymetry, capnometry, temperature measurement, ECG monitoring)",
+          icon: "CLOCK_ICON",
+        },
+        {
+          id: 5,
+          title: "DEFIBRILLATOR",
+          text: "Zoll X Series (with external cardiac pacemaker)",
+          icon: "CHECK_ICON",
+        },
+        {
+          id: 6,
+          title: "AED",
+          text: "Heartsine 350 P",
+          icon: "CLOUD_ICON",
+        },
+        {
+          id: 7,
+          title: "SYRINGE PUMPS",
+          text: "Fresenius Agilia Injectomat",
+          icon: "CLOCK_ICON",
+        },
+        {
+          id: 8,
+          title: "INFUSION PUMPS",
+          text: "Fresenus Agilia Volumat",
+          icon: "CHECK_ICON",
+        },
+        {
+          id: 9,
+          title: "PORTABLE SUCTION UNITS",
+          text: "Laerdal LCSU 4",
+          icon: "CLOUD_ICON",
+        },
+        {
+          id: 10,
+          title: "EMERGENCY ALS BAGS",
+          text: "Extensive equipment for emergency and intensive care (e.g. videolaryngoscop, chest tube, urinary catheter, arterial catheter, surgical instruments, coniotomy, central venous line, care products)",
+          icon: "CLOCK_ICON",
+        },
+        {
+          id: 11,
+          title: "MEDICATION",
+          text: "Standard medication for emergency and intensiv care medicine | narcotics | antidotes",
+          icon: "CHECK_ICON",
+        },
+        {
+          id: 12,
+          title: "PEDIATRIC EQUIPMENT",
+          text: "Babypod transport incubator I & II with Kanmed BabyWarmer | Incubator Dräger | intensive care backpack pediatric | additional emergency and intensive care medicine",
+          icon: "CLOUD_ICON",
+        },
+      ],
+    },
+  ],
+};
+
+export const AMH = Template.bind({});
+
+AMH.args = {
+  sx: {
+    header: {
+      h1: {
+        color: "red",
+      },
+    },
+  },
+  title: "Hello Cruel World",
+  blocks: [
+    {
+      id: 3,
+      __component: "layout.hero-section",
+      heading: "UMWD",
+      subHeading: "A place for all your resources",
+      bgImage: {
         id: 3,
         url: "https://via.placeholder.com/100",
         alternativeText: "UMWD",
       },
+      logoImage: {
+        id: 3,
+        url: "/uploads/logo_decorated_ad284d33ef.png",
+        alternativeText: "UMWD",
+        width: 250,
+        height: 250,
+      },
       link: {
         id: 3,
         url: "/resources",
@@ -150,5 +313,10 @@ HelloWorld.args = {
         },
       ],
     },
+    {
+      id: 1,
+      __component: "layout.contact-section",
+      title: "Contact us",
+    },
   ],
 };

package/src/components/ContactForm.js

@@ -1,131 +0,0 @@
-"use client";
-
-import React from "react";
-import PropTypes from "prop-types";
-import { TextField, Typography, Stack, Button } from "@mui/material";
-import isEmail from "validator/lib/isEmail";
-
-function ContactForm({ ...args }) {
-  const [formValues, setFormValues] = React.useState({
-    name: "",
-    email: "",
-    subject: "",
-    message: "",
-  });
-  const [formErrors, setFormErrors] = React.useState({});
-
-  const handleBlur = (e) => {
-    console.log(e.target.id);
-    console.log(e.target.value);
-    const errors = validate(formValues);
-    console.log(errors);
-    setFormErrors({ ...formErrors, [e.target.id]: errors[e.target.id] });
-  };
-
-  const handleChange = (e) => {
-    const { id, value } = e.target;
-    setFormValues({ ...formValues, [id]: value });
-    console.log("formValues", formValues);
-  };
-
-  const handleClear = () => {
-    setFormValues({});
-  };
-
-  const handleSendCallback = () => {
-    console.log("Send callback");
-  };
-
-  const validate = (values) => {
-    console.log("values from validate", values);
-    let errors = {};
-
-    if (values.name === "") {
-      errors.name = "Name is required";
-    }
-    if (values.email === "") {
-      errors.email = "Email is required";
-    } else if (!isEmail(values.email)) {
-      errors.email = "Invalid email";
-    }
-    if (values.subject === "") {
-      errors.subject = "Subject is required";
-    }
-    if (values.message === "") {
-      errors.message = "Message is required";
-    }
-
-    console.log("errors from validate", errors);
-
-    return errors;
-  };
-
-  return (
-    <Stack spacing={2}>
-      <Typography variant="h6" align="center">
-        Write us
-      </Typography>
-      <Typography variant="body1" align="center">
-        We're open for any suggestion or just to have a chat
-      </Typography>
-      <TextField
-        id="name"
-        label="Name"
-        value={formValues.name}
-        variant="outlined"
-        onBlur={(e) => handleBlur(e)}
-        onChange={(e) => handleChange(e)}
-        error={formErrors.name != undefined ? true : false}
-        helperText={formErrors.name}
-      />
-      <TextField
-        id="email"
-        label="Email"
-        value={formValues.email}
-        variant="outlined"
-        onBlur={handleBlur}
-        onChange={handleChange}
-        error={formErrors.email != undefined ? true : false}
-        helperText={formErrors.email}
-      />
-      <TextField
-        id="subject"
-        label="Subject"
-        value={formValues.subject}
-        variant="outlined"
-        onBlur={handleBlur}
-        onChange={handleChange}
-        error={formErrors.subject != undefined}
-        helperText={formErrors.subject}
-      />
-      <TextField
-        id="message"
-        label="Message"
-        value={formValues.message}
-        variant="outlined"
-        multiline
-        minRows={5}
-        onBlur={handleBlur}
-        onChange={handleChange}
-        error={formErrors.message != undefined}
-        helperText={formErrors.message}
-      />
-      <Stack direction={"row"} spacing={2} justifyContent={"end"}>
-        <Button variant="outlined" color="primary" onClick={() => handleClear}>
-          Clear
-        </Button>
-        <Button
-          variant="contained"
-          color="primary"
-          onClick={handleSendCallback}
-        >
-          Send
-        </Button>
-      </Stack>
-    </Stack>
-  );
-}
-
-ContactForm.propTypes = {};
-
-export default ContactForm;