Migrate to Next

2022-11-11 22:41:53 +00:00
parent 58e38dbedd
commit 4aaad4d704
352 changed files with 15583 additions and 21335 deletions
--- a/components/CaseStudy.js
+++ b/components/CaseStudy.js
@@ -0,0 +1,89 @@
+import React from "react";
+import { Icon, IconWithText, Text } from ".";
+import {
+  CheckSvg,
+  ClockSvg,
+  CalendarSvg,
+  PoundSvg,
+  TableListSvg,
+} from "../icons";
+import styles from "./CaseStudy.module.css";
+
+export default function CaseStudy({ data }) {
+  const { features, price, duration, date } = data;
+  const formattedDate = new Date(date).toLocaleString("en-GB", {
+    month: "long",
+    year: "numeric",
+  });
+  return (
+    <div className={styles.block}>
+      <div className={styles.content}>
+        <div className={styles.features}>
+          <IconWithText
+            icon={
+              <Icon>
+                <TableListSvg />
+              </Icon>
+            }
+          >
+            <Text weight="bold" size="lg" noMargin>
+              Features:
+            </Text>
+          </IconWithText>
+          <ul className={styles.featurelist}>
+            {features.map((feature) => (
+              <li key={feature}>
+                <Icon size="lg" color="success">
+                  <CheckSvg />
+                </Icon>
+                <span>{feature}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+        <div className={styles.rest}>
+          <IconWithText
+            icon={
+              <Icon>
+                <PoundSvg />
+              </Icon>
+            }
+          >
+            <Text weight="bold" size="lg" noMargin>
+              Total Cost:
+            </Text>
+          </IconWithText>
+          <Text noMargin>{price}</Text>
+        </div>
+        <div className={styles.rest}>
+          <IconWithText
+            icon={
+              <Icon>
+                <ClockSvg />
+              </Icon>
+            }
+          >
+            <Text weight="bold" size="lg" noMargin>
+              Time taken:
+            </Text>
+          </IconWithText>
+          <Text noMargin>{duration}</Text>
+        </div>
+        <div className={styles.rest}>
+          <IconWithText
+            icon={
+              <Icon>
+                <CalendarSvg />
+              </Icon>
+            }
+          >
+            <Text weight="bold" size="lg" noMargin>
+              Date:
+            </Text>
+          </IconWithText>
+          <Text noMargin>{formattedDate}</Text>
+        </div>
+      </div>
+    </div>
+  );
+}