umwd-components 0.1.74 → 0.1.76

package/dist/cjs/components/FleetSection.js

@@ -0,0 +1,136 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+'use strict';
+
+var React = require('react');
+var material = require('@mui/material');
+var StrapiImage = require('./StrapiImage.js');
+var RadarIcon = require('@mui/icons-material/Radar');
+var SpeedIcon = require('@mui/icons-material/Speed');
+var HeightIcon = require('@mui/icons-material/Height');
+
+function FleetSection(_ref) {
+  let {
+    data
+  } = _ref;
+  const {
+    airplane
+  } = data;
+  return /*#__PURE__*/React.createElement(material.Container, {
+    maxWidth: "lg",
+    sx: {
+      my: 1
+    }
+  }, /*#__PURE__*/React.createElement(material.Stack, {
+    spacing: 2,
+    direction: "row",
+    justifyContent: "stretch",
+    flexWrap: "wrap",
+    sx: {
+      width: "100%"
+    },
+    useFlexGap: true
+  }, airplane.map(airplane => /*#__PURE__*/React.createElement(material.Card, {
+    key: airplane.id,
+    sx: {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      flex: 1,
+      minWidth: "350px"
+    }
+  }, /*#__PURE__*/React.createElement(material.CardHeader, {
+    title: airplane.name,
+    subheader: airplane.description
+  }), /*#__PURE__*/React.createElement(material.CardMedia, {
+    sx: {
+      p: 1
+    }
+  }, /*#__PURE__*/React.createElement(material.Paper, {
+    sx: {
+      p: 1,
+      py: 2,
+      height: "250px",
+      position: "relative",
+      display: "grid",
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    variant: "outlined"
+  }, airplane.floorplan !== null && /*#__PURE__*/React.createElement(StrapiImage.StrapiImage, {
+    src: airplane.floorplan.url,
+    alt: airplane.floorplan.alternativeText,
+    width: airplane.floorplan.width,
+    height: airplane.floorplan.height,
+    style: {}
+  }), /*#__PURE__*/React.createElement(material.Box, {
+    sx: {
+      position: "absolute",
+      right: "1rem",
+      bottom: "1rem"
+    }
+  }, /*#__PURE__*/React.createElement(material.Typography, {
+    variant: "body2",
+    color: "text.secondary",
+    align: "right"
+  }, /*#__PURE__*/React.createElement("strong", null, "Cabin Dimensions:"), " ", /*#__PURE__*/React.createElement("strong", null, "H"), " ", airplane.cabinHeight, " m ", /*#__PURE__*/React.createElement("strong", null, "W"), " ", airplane.cabinWidth, " m ", /*#__PURE__*/React.createElement("strong", null, "L"), " ", airplane.cabinLength, " m")))), /*#__PURE__*/React.createElement(material.CardContent, null, /*#__PURE__*/React.createElement(material.Stack, {
+    direction: "row",
+    spacing: 1
+  }, /*#__PURE__*/React.createElement(material.Chip, {
+    label: "Range: ".concat(airplane.range, " km"),
+    variant: "filled",
+    color: "primary",
+    icon: /*#__PURE__*/React.createElement(RadarIcon, null)
+  }), /*#__PURE__*/React.createElement(material.Chip, {
+    label: "Speed: ".concat(airplane.speed, " km/h"),
+    variant: "filled",
+    color: "primary",
+    icon: /*#__PURE__*/React.createElement(SpeedIcon, null)
+  }), /*#__PURE__*/React.createElement(material.Chip, {
+    label: "Ceiling: ".concat(airplane.ceiling, " ft"),
+    variant: "filled",
+    color: "primary",
+    icon: /*#__PURE__*/React.createElement(HeightIcon, null)
+  })))))));
+}
+
+/* 
+{
+      id: 1,
+      __component: "layout.fleet-section",
+      title: "Fleet",
+      description: "Description of our fleet",
+      airplane: [
+        {
+          id: 1,
+          name: "CHALLENGER 604",
+          description:
+            "Bombardier Challenger 604. Is our best long-range jet and can be equipped with an intensive care unit for one critical care patient or the option to carry 2 stable patients. ",
+          range: "7408",
+          speed: "854",
+          ceiling: "41000",
+          cabinHeight: 1.83,
+          cabinWidth: 2.11,
+          cabinLength: 8.66,
+        },
+        {
+          id: 2,
+          name: "BEECHCRAFT KING AIR 200",
+          description:
+            "A twin turboprop aircraft with pressurized cabin. Is our best air ambulance for Europe and North Africa. It is equipped with a single stretcher for one stable ICU patient.",
+          range: "2200",
+          speed: "500",
+          ceiling: "35000",
+          cabinHeight: 1.46,
+          cabinWidth: 1.37,
+          cabinLength: 5.08,
+        },
+      ],
+    },
+     */
+
+exports.FleetSection = FleetSection;

package/dist/cjs/components/IconSection.js

@@ -114,8 +114,8 @@ function IconSection(_ref) {
       }
     }, Icon !== null && /*#__PURE__*/React.createElement(Icon, {
       sx: {
-        mt: 0.2,
-        mr: 2
+        mr: 2,
+        mt: 0.2
       }
     }), icon.title), /*#__PURE__*/React.createElement(material.Typography, {
       variant: "caption",

package/dist/cjs/components/Page.js

@@ -14,6 +14,7 @@ var PropTypes = require('prop-types');
 var TextImageSection = require('./TextImageSection.js');
 var HeroSection = require('./HeroSection.js');
 var FeaturesSection = require('./FeaturesSection.js');
+var FleetSection = require('./FleetSection.js');
 var IconSection = require('./IconSection.js');
 var material = require('@mui/material');
 var ContactForm = require('./ContactForm.js');
@@ -45,6 +46,11 @@ function blockRenderer(block) {
         key: block.id,
         data: block
       });
+    case "layout.fleet-section":
+      return /*#__PURE__*/React.createElement(FleetSection.FleetSection, {
+        key: block.id,
+        data: block
+      });
     default:
       return null;
   }

package/dist/cjs/components/TextImageSection.js

@@ -14,6 +14,19 @@ var material = require('@mui/material');
 var StrapiImage = require('./StrapiImage.js');
 
 const MuiMarkdown = /*#__PURE__*/React.lazy(() => import( /* webpackChunkName: "mui-markdown" */'mui-markdown'));
+
+/* 
+TODO intregrate this interface into StrapiImage.tsx
+
+interface ImageProps {
+  id: number;
+  url: string;
+  alternativeText: string;
+  style: React.CSSProperties;
+  width: number;
+  height: number;
+} */
+
 function TextImageSection(_ref) {
   let {
     data

package/dist/esm/components/FleetSection.js

@@ -0,0 +1,134 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import React from 'react';
+import { Container, Stack, Card, CardHeader, CardMedia, Paper, Box, Typography, CardContent, Chip } from '@mui/material';
+import { StrapiImage } from './StrapiImage.js';
+import RadarIcon from '@mui/icons-material/Radar';
+import SpeedIcon from '@mui/icons-material/Speed';
+import HeightIcon from '@mui/icons-material/Height';
+
+function FleetSection(_ref) {
+  let {
+    data
+  } = _ref;
+  const {
+    airplane
+  } = data;
+  return /*#__PURE__*/React.createElement(Container, {
+    maxWidth: "lg",
+    sx: {
+      my: 1
+    }
+  }, /*#__PURE__*/React.createElement(Stack, {
+    spacing: 2,
+    direction: "row",
+    justifyContent: "stretch",
+    flexWrap: "wrap",
+    sx: {
+      width: "100%"
+    },
+    useFlexGap: true
+  }, airplane.map(airplane => /*#__PURE__*/React.createElement(Card, {
+    key: airplane.id,
+    sx: {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      flex: 1,
+      minWidth: "350px"
+    }
+  }, /*#__PURE__*/React.createElement(CardHeader, {
+    title: airplane.name,
+    subheader: airplane.description
+  }), /*#__PURE__*/React.createElement(CardMedia, {
+    sx: {
+      p: 1
+    }
+  }, /*#__PURE__*/React.createElement(Paper, {
+    sx: {
+      p: 1,
+      py: 2,
+      height: "250px",
+      position: "relative",
+      display: "grid",
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    variant: "outlined"
+  }, airplane.floorplan !== null && /*#__PURE__*/React.createElement(StrapiImage, {
+    src: airplane.floorplan.url,
+    alt: airplane.floorplan.alternativeText,
+    width: airplane.floorplan.width,
+    height: airplane.floorplan.height,
+    style: {}
+  }), /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      position: "absolute",
+      right: "1rem",
+      bottom: "1rem"
+    }
+  }, /*#__PURE__*/React.createElement(Typography, {
+    variant: "body2",
+    color: "text.secondary",
+    align: "right"
+  }, /*#__PURE__*/React.createElement("strong", null, "Cabin Dimensions:"), " ", /*#__PURE__*/React.createElement("strong", null, "H"), " ", airplane.cabinHeight, " m ", /*#__PURE__*/React.createElement("strong", null, "W"), " ", airplane.cabinWidth, " m ", /*#__PURE__*/React.createElement("strong", null, "L"), " ", airplane.cabinLength, " m")))), /*#__PURE__*/React.createElement(CardContent, null, /*#__PURE__*/React.createElement(Stack, {
+    direction: "row",
+    spacing: 1
+  }, /*#__PURE__*/React.createElement(Chip, {
+    label: "Range: ".concat(airplane.range, " km"),
+    variant: "filled",
+    color: "primary",
+    icon: /*#__PURE__*/React.createElement(RadarIcon, null)
+  }), /*#__PURE__*/React.createElement(Chip, {
+    label: "Speed: ".concat(airplane.speed, " km/h"),
+    variant: "filled",
+    color: "primary",
+    icon: /*#__PURE__*/React.createElement(SpeedIcon, null)
+  }), /*#__PURE__*/React.createElement(Chip, {
+    label: "Ceiling: ".concat(airplane.ceiling, " ft"),
+    variant: "filled",
+    color: "primary",
+    icon: /*#__PURE__*/React.createElement(HeightIcon, null)
+  })))))));
+}
+
+/* 
+{
+      id: 1,
+      __component: "layout.fleet-section",
+      title: "Fleet",
+      description: "Description of our fleet",
+      airplane: [
+        {
+          id: 1,
+          name: "CHALLENGER 604",
+          description:
+            "Bombardier Challenger 604. Is our best long-range jet and can be equipped with an intensive care unit for one critical care patient or the option to carry 2 stable patients. ",
+          range: "7408",
+          speed: "854",
+          ceiling: "41000",
+          cabinHeight: 1.83,
+          cabinWidth: 2.11,
+          cabinLength: 8.66,
+        },
+        {
+          id: 2,
+          name: "BEECHCRAFT KING AIR 200",
+          description:
+            "A twin turboprop aircraft with pressurized cabin. Is our best air ambulance for Europe and North Africa. It is equipped with a single stretcher for one stable ICU patient.",
+          range: "2200",
+          speed: "500",
+          ceiling: "35000",
+          cabinHeight: 1.46,
+          cabinWidth: 1.37,
+          cabinLength: 5.08,
+        },
+      ],
+    },
+     */
+
+export { FleetSection };

package/dist/esm/components/IconSection.js

@@ -112,8 +112,8 @@ function IconSection(_ref) {
       }
     }, Icon !== null && /*#__PURE__*/React.createElement(Icon, {
       sx: {
-        mt: 0.2,
-        mr: 2
+        mr: 2,
+        mt: 0.2
       }
     }), icon.title), /*#__PURE__*/React.createElement(Typography, {
       variant: "caption",

package/dist/esm/components/Page.js

@@ -10,6 +10,7 @@ import PropTypes from 'prop-types';
 import TextImageSection from './TextImageSection.js';
 import { HeroSection } from './HeroSection.js';
 import { FeatureSection } from './FeaturesSection.js';
+import { FleetSection } from './FleetSection.js';
 import { IconSection } from './IconSection.js';
 import { Box } from '@mui/material';
 import ContactForm from './ContactForm.js';
@@ -41,6 +42,11 @@ function blockRenderer(block) {
         key: block.id,
         data: block
       });
+    case "layout.fleet-section":
+      return /*#__PURE__*/React.createElement(FleetSection, {
+        key: block.id,
+        data: block
+      });
     default:
       return null;
   }

package/dist/esm/components/TextImageSection.js

@@ -10,6 +10,19 @@ import { Container, Paper, Typography, Stack, Box } from '@mui/material';
 import { StrapiImage } from './StrapiImage.js';
 
 const MuiMarkdown = /*#__PURE__*/React.lazy(() => import( /* webpackChunkName: "mui-markdown" */'mui-markdown'));
+
+/* 
+TODO intregrate this interface into StrapiImage.tsx
+
+interface ImageProps {
+  id: number;
+  url: string;
+  alternativeText: string;
+  style: React.CSSProperties;
+  width: number;
+  height: number;
+} */
+
 function TextImageSection(_ref) {
   let {
     data

package/package.json

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

package/src/components/FleetSection.tsx

@@ -0,0 +1,180 @@
+import React from "react";
+import {
+  Stack,
+  Card,
+  CardHeader,
+  CardContent,
+  Typography,
+  Container,
+  CardMedia,
+  Box,
+  Chip,
+  Paper,
+} from "@mui/material";
+import { StrapiImage } from "./StrapiImage.tsx";
+import RadarIcon from "@mui/icons-material/Radar";
+import SpeedIcon from "@mui/icons-material/Speed";
+import HeightIcon from "@mui/icons-material/Height";
+
+interface ImageProps {
+  id: number;
+  url: string;
+  alternativeText: string;
+  style: React.CSSProperties;
+  width: number;
+  height: number;
+}
+
+interface AirplaneProps {
+  id: number;
+  name: string;
+  description: string;
+  range: number;
+  speed: number;
+  ceiling: number;
+  cabinHeight: number;
+  cabinWidth: number;
+  cabinLength: number;
+  floorplan: ImageProps;
+}
+
+interface FleetSectionProps {
+  id: number;
+  __component: string;
+  title: string;
+  description: string;
+  airplane: AirplaneProps[];
+}
+
+export function FleetSection({ data }: { readonly data: FleetSectionProps }) {
+  const { airplane } = data;
+  return (
+    <Container maxWidth="lg" sx={{ my: 1 }}>
+      <Stack
+        spacing={2}
+        direction="row"
+        justifyContent="stretch"
+        flexWrap="wrap"
+        sx={{ width: "100%" }}
+        useFlexGap={true}
+      >
+        {airplane.map((airplane) => (
+          <Card
+            key={airplane.id}
+            sx={{
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "space-between",
+              flex: 1,
+              minWidth: "350px",
+            }}
+          >
+            <CardHeader
+              title={airplane.name}
+              subheader={airplane.description}
+            />
+            <CardMedia
+              sx={{
+                p: 1,
+              }}
+            >
+              <Paper
+                sx={{
+                  p: 1,
+                  py: 2,
+                  height: "250px",
+                  position: "relative",
+                  display: "grid",
+                  alignItems: "center",
+                  justifyContent: "center",
+                }}
+                variant="outlined"
+              >
+                {airplane.floorplan !== null && (
+                  <StrapiImage
+                    src={airplane.floorplan.url}
+                    alt={airplane.floorplan.alternativeText}
+                    width={airplane.floorplan.width}
+                    height={airplane.floorplan.height}
+                    style={{}}
+                  />
+                )}
+                <Box
+                  sx={{ position: "absolute", right: "1rem", bottom: "1rem" }}
+                >
+                  <Typography
+                    variant="body2"
+                    color="text.secondary"
+                    align="right"
+                  >
+                    <strong>Cabin Dimensions:</strong> <strong>H</strong>{" "}
+                    {airplane.cabinHeight} m <strong>W</strong>{" "}
+                    {airplane.cabinWidth} m <strong>L</strong>{" "}
+                    {airplane.cabinLength} m
+                  </Typography>
+                </Box>
+              </Paper>
+            </CardMedia>
+            <CardContent>
+              <Stack direction="row" spacing={1}>
+                <Chip
+                  label={`Range: ${airplane.range} km`}
+                  variant="filled"
+                  color="primary"
+                  icon={<RadarIcon />}
+                />
+                <Chip
+                  label={`Speed: ${airplane.speed} km/h`}
+                  variant="filled"
+                  color="primary"
+                  icon={<SpeedIcon />}
+                />
+                <Chip
+                  label={`Ceiling: ${airplane.ceiling} ft`}
+                  variant="filled"
+                  color="primary"
+                  icon={<HeightIcon />}
+                />
+              </Stack>
+            </CardContent>
+          </Card>
+        ))}
+      </Stack>
+    </Container>
+  );
+}
+
+/* 
+{
+      id: 1,
+      __component: "layout.fleet-section",
+      title: "Fleet",
+      description: "Description of our fleet",
+      airplane: [
+        {
+          id: 1,
+          name: "CHALLENGER 604",
+          description:
+            "Bombardier Challenger 604. Is our best long-range jet and can be equipped with an intensive care unit for one critical care patient or the option to carry 2 stable patients. ",
+          range: "7408",
+          speed: "854",
+          ceiling: "41000",
+          cabinHeight: 1.83,
+          cabinWidth: 2.11,
+          cabinLength: 8.66,
+        },
+        {
+          id: 2,
+          name: "BEECHCRAFT KING AIR 200",
+          description:
+            "A twin turboprop aircraft with pressurized cabin. Is our best air ambulance for Europe and North Africa. It is equipped with a single stretcher for one stable ICU patient.",
+          range: "2200",
+          speed: "500",
+          ceiling: "35000",
+          cabinHeight: 1.46,
+          cabinWidth: 1.37,
+          cabinLength: 5.08,
+        },
+      ],
+    },
+     */

package/src/components/IconSection.tsx

@@ -121,7 +121,7 @@ export function IconSection({ data }: { readonly data: IconSectionProps }) {
                       minHeight: "4.2rem",
                     }}
                   >
-                    {Icon !== null && <Icon sx={{ mt: 0.2, mr: 2 }} />}
+                    {Icon !== null && <Icon sx={{ mr: 2, mt: 0.2 }} />}
                     {icon.title}
                   </Typography>
 

package/src/components/Page.js

@@ -5,6 +5,7 @@ import PropTypes from "prop-types";
 import TextImageSection from "./TextImageSection.tsx";
 import { HeroSection } from "./HeroSection.tsx";
 import { FeatureSection } from "./FeaturesSection.tsx";
+import { FleetSection } from "./FleetSection.tsx";
 import { IconSection } from "./IconSection.tsx";
 import { Box } from "@mui/material";
 import ContactForm from "./ContactForm.tsx";
@@ -21,6 +22,8 @@ function blockRenderer(block) {
       return <TextImageSection key={block.id} data={block} />;
     case "layout.icon-section":
       return <IconSection key={block.id} data={block} />;
+    case "layout.fleet-section":
+      return <FleetSection key={block.id} data={block} />;
 
     default:
       return null;

package/src/components/TextImageSection.tsx

@@ -9,6 +9,18 @@ import { StrapiImage } from "./StrapiImage.tsx";
 
 type maxWidth = "xs" | "sm" | "md" | "lg" | "xl" | false | string;
 
+/* 
+TODO intregrate this interface into StrapiImage.tsx
+
+interface ImageProps {
+  id: number;
+  url: string;
+  alternativeText: string;
+  style: React.CSSProperties;
+  width: number;
+  height: number;
+} */
+
 interface TextImageSectionProps {
   data: {
     title: string;

package/src/stories/Page.stories.js

@@ -224,6 +224,52 @@ AMH.args = {
         },
       ],
     },
+    {
+      id: 1,
+      __component: "layout.fleet-section",
+      title: "Fleet",
+      description: "Description of our fleet",
+      airplane: [
+        {
+          id: 1,
+          name: "CHALLENGER 604",
+          description:
+            "Bombardier Challenger 604. Is our best long-range jet and can be equipped with an intensive care unit for one critical care patient or the option to carry 2 stable patients. ",
+          range: "7408",
+          speed: "854",
+          ceiling: "41000",
+          cabinHeight: 1.83,
+          cabinWidth: 2.11,
+          cabinLength: 8.66,
+          floorplan: {
+            url: "/uploads/CHALLENGER_604_efe6e0309f.png",
+            alt: "Challenger 604 Floor Plan",
+            width: 1000,
+            height: 282,
+            style: {},
+          },
+        },
+        {
+          id: 2,
+          name: "BEECHCRAFT KING AIR 200",
+          description:
+            "A twin turboprop aircraft with pressurized cabin. Is our best air ambulance for Europe and North Africa. It is equipped with a single stretcher for one stable ICU patient.",
+          range: "2200",
+          speed: "500",
+          ceiling: "35000",
+          cabinHeight: 1.46,
+          cabinWidth: 1.37,
+          cabinLength: 5.08,
+          floorplan: {
+            url: "/uploads/BEECHCRAFT_KING_AIR_200_828251b91c.png",
+            alt: "Challenger 604 Floor Plan",
+            width: 1000,
+            height: 233,
+            style: {},
+          },
+        },
+      ],
+    },
     {
       id: 1,
       __component: "layout.text-image-section",