Merge pull request #7 from EnAccess/ft/case-study-and-core-toolkits

feat: case study and core toolkits

next.config.js

@@ -4,6 +4,9 @@
 const nextConfig = {
   reactStrictMode: false,
   output: "export",
+  images: {
+    unoptimized: true,
+  },
 };
 
 module.exports = nextConfig;

src/components/cards/InformationCard.tsx

@@ -2,6 +2,7 @@ import classNames from "classnames";
 import React from "react";
 import { ArcherElement } from "react-archer";
 import Star from "../icons/Star";
+import { getColorByAccess } from "../../utils/Helper";
 
 const InformationCard = ({ data }: any) => {
   const level = Array.isArray(data.PARSED_MANUAL_TAGS.CO_DESIGN_LEVEL)
@@ -13,6 +14,9 @@ const InformationCard = ({ data }: any) => {
     "bg-level-primary-2 border-level-secondary-2": level == 2,
     "bg-level-primary-3 border-level-secondary-3": level == 3,
   });
+  const dataAccess = data.PARSED_MANUAL_TAGS.ACCESS;
+  const starColor = getColorByAccess(dataAccess);
+
   return (
     <div key={data.Key} id={data.Key} className="group cursor-pointer">
       <ArcherElement
@@ -40,9 +44,11 @@ const InformationCard = ({ data }: any) => {
         >
           <div className="relative">
             {data.Title}
-            {data.PARSED_MANUAL_TAGS.ACCESS === "Institutional Access" ? (
+            {dataAccess === "Institutional Access" ||
+            dataAccess === "Paid Service" ||
+            dataAccess === "Open Source" ? (
               <div className="absolute -bottom-5 -right-5">
-                <Star />
+                <Star color={starColor} />
               </div>
             ) : (
               ""

src/components/casestudyandcoretools/CaseStudy.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { Entries, Entry } from "@/types/interfaces";
+import InformationCard from "../cards/InformationCard";
+import { ArcherContainer } from "react-archer";
+
+interface Props {
+  categorizedEntries: { level1: Entries; level2: Entries; level3: Entries };
+}
+
+const CaseStudy = ({ categorizedEntries }: Props) => {
+  return (
+    <div className="md:p-10">
+      <ArcherContainer>
+        <div className="flex p-4 gap-6 flex-wrap">
+          {categorizedEntries.level3.map((data: Entry) => (
+            <div key={data.Key} className="w-72">
+              <InformationCard data={data} />
+            </div>
+          ))}
+        </div>
+        <div className="flex p-4 gap-6 flex-wrap">
+          {categorizedEntries.level2.map((data: Entry) => (
+            <div key={data.Key} className="w-72">
+              <InformationCard data={data} />
+            </div>
+          ))}
+        </div>
+        <div className="flex p-4 gap-6 flex-wrap">
+          {categorizedEntries.level1.map((data: Entry) => (
+            <div key={data.Key} className="w-72">
+              <InformationCard data={data} />
+            </div>
+          ))}
+        </div>
+      </ArcherContainer>
+    </div>
+  );
+};
+
+export default CaseStudy;

src/components/casestudyandcoretools/CoreTools.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { Entries, Entry } from "@/types/interfaces";
+import InformationCard from "../cards/InformationCard";
+import { ArcherContainer } from "react-archer";
+
+interface Props {
+  categorizedEntries: { level1: Entries; level2: Entries; level3: Entries };
+}
+const CoreTools = ({ categorizedEntries }: Props) => {
+  return (
+    <div className="md:p-10">
+      <ArcherContainer>
+        <div className="flex p-4 gap-6 flex-wrap">
+          {categorizedEntries.level3.map((data: Entry) => (
+            <div key={data.Key} className="w-72">
+              <InformationCard data={data} />{" "}
+            </div>
+          ))}
+        </div>
+        <div className="flex p-4 gap-6 flex-wrap">
+          {categorizedEntries.level2.map((data: Entry) => (
+            <div key={data.Key} className="w-72">
+              <InformationCard data={data} />
+            </div>
+          ))}
+        </div>
+        <div className="flex p-4 gap-6 flex-wrap">
+          {categorizedEntries.level1.map((data: Entry) => (
+            <div key={data.Key} className="w-72">
+              <InformationCard data={data} />{" "}
+            </div>
+          ))}
+        </div>
+      </ArcherContainer>
+    </div>
+  );
+};
+
+export default CoreTools;

src/components/casestudyandcoretools/HightlightCaseStudyDetails.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import ArrowDown from "../../components/icons/ArrowDown";
+import { caseStudy } from "@/utils/Helper";
+
+const HightlightCaseStudyDetails = () => {
+  return (
+    <div className="flex items-center flex-col">
+      <ArrowDown />
+      <h1 className="text-center text-gray-500 text-xl font-bold mb-3 ">
+        Hightlight Case Study Details
+      </h1>
+      <div className="bg-gray-200 rounded-3xl flex gap-2 py-4 px-8 border border-gray-500">
+        <div className="p-4">
+          <h1 className="text-center text-gray-500 text-xl font-bold mb-3 ">
+            Case Study Implementation Level
+          </h1>
+          <div>
+            <div className="flex flex-col gap-2 p-4">
+              {caseStudy.Level.map((element, index) => (
+                <button
+                  key={index}
+                  className="border border-gray-500 p-4 bg-black-900 text-white rounded-lg"
+                >
+                  {element}
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+        <div className="p-4">
+          <h1 className="text-center text-gray-500 text-xl font-bold mb-3 ">
+            Case Study Technology
+          </h1>
+          <div className="flex flex-col gap-2 p-4">
+            {caseStudy.Technology.map((element, index) => (
+              <button
+                key={index}
+                className="border border-gray-500 p-4 bg-gray-50 text-black rounded-lg"
+              >
+                {element}
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default HightlightCaseStudyDetails;

src/components/icons/ArrowDown.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+const ArrowDown = () => {
+  return (
+    <div>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="120"
+        height="80"
+        viewBox="0 0 80 128"
+        version="1.1"
+      >
+        <path
+          d="M 40.762 53.250 L 40.500 90.500 30.853 91 L 21.206 91.500 36.112 105.848 L 51.018 120.196 58.759 113.173 C 63.016 109.310, 69.864 102.741, 73.975 98.575 L 81.450 91 71.725 91 L 62 91 62 53.500 L 62 16 51.512 16 L 41.024 16 40.762 53.250"
+          stroke="black"
+          strokeWidth="2"
+          fill="#FFFF33"
+          fillRule="evenodd"
+        />
+      </svg>
+    </div>
+  );
+};
+
+export default ArrowDown;

src/components/icons/Star.tsx

@@ -1,12 +1,12 @@
 import React from "react";
 
-const Star = () => {
+const Star = ({ color }: { color: string }) => {
   return (
     <svg
       width="50px"
       height="50px"
       viewBox="0 0 24 24"
-      fill="#fde047"
+      fill={color}
       xmlns="http://www.w3.org/2000/svg"
     >
       <path

src/pages/_document.tsx

@@ -4,7 +4,7 @@ export default function Document() {
   return (
     <Html lang="en">
       <Head />
-      <body>
+      <body className="max-w-custom mx-auto">
         <Main />
         <NextScript />
       </body>

src/pages/case-studies-and-core-tools.tsx

@@ -1,7 +1,46 @@
 import React from "react";
+import Data from "../../public/output.json";
+import CoreTools from "../components/casestudyandcoretools/CoreTools";
+import CaseStudy from "../components/casestudyandcoretools/CaseStudy";
+import { Entries } from "../types/interfaces";
+import HightlightCaseStudyDetails from "../components/casestudyandcoretools/HightlightCaseStudyDetails";
+import { categorizeByCoDesignLevel } from "../utils/Helper";
 
 const CaseStudiesAndCoreTools = () => {
-  return <div>CaseStudiesAndCoreTools</div>;
+  const entriesWithCoreToolkit = Data.filter(
+    (entry) => entry.PARSED_MANUAL_TAGS.CORE_TOOLKIT
+  ) as Entries;
+
+  const entriesWithCaseStudy = Data.filter(
+    (entry) => entry.PARSED_MANUAL_TAGS["CASE STUDY GROUP"]
+  ) as Entries;
+
+  const categorizedCoreToolkitEntries = categorizeByCoDesignLevel(
+    entriesWithCoreToolkit
+  );
+  const categorizedCaseStudyEntries =
+    categorizeByCoDesignLevel(entriesWithCaseStudy);
+
+  return (
+    <div className="p-4 flex flex-col gap-4 text-sm">
+      <div className="flex justify-between items-center gap-2 flex-wrap">
+        <div className="border-gray-300 border-4 border-dashed bg-gray-100">
+          <h1 className="m-2 text-lg font-semibold">CORE Toolkits</h1>
+          <CoreTools categorizedEntries={categorizedCoreToolkitEntries} />
+        </div>
+
+        <div className="px-4 p-4">
+          <HightlightCaseStudyDetails />
+        </div>
+      </div>
+      <div>
+        <div className="border-gray-300 border-4 border-dashed bg-gray-100">
+          <h1 className="m-2 text-lg font-semibold">Case Studies</h1>
+          <CaseStudy categorizedEntries={categorizedCaseStudyEntries} />
+        </div>
+      </div>
+    </div>
+  );
 };
 
 export default CaseStudiesAndCoreTools;

src/types/interfaces.ts

@@ -3,6 +3,7 @@ export interface ParsedManualTags {
   CO_DESIGN_LEVEL?: string;
   ["USEFUL FOR"]?: string[];
   ["PROJECT STEP"]?: string;
+  ["CASE STUDY THEME"]?: string[];
   THEME?: string;
   ACCESS?: string;
   TOOLS?: string;

src/utils/Helper.ts

@@ -0,0 +1,48 @@
+import { Entries, Entry } from "@/types/interfaces";
+
+interface Accumulator {
+  level1: Entries;
+  level2: Entries;
+  level3: Entries;
+}
+
+export const categorizeByCoDesignLevel = (entries: Entries) => {
+  return entries.reduce(
+    (acc: Accumulator, entry: Entry) => {
+      const coDesignLevel = entry.PARSED_MANUAL_TAGS.CO_DESIGN_LEVEL;
+      switch (coDesignLevel) {
+        case "1":
+          acc.level1.unshift(entry);
+          break;
+        case "2":
+          acc.level2.unshift(entry);
+          break;
+        case "3":
+          acc.level3.unshift(entry);
+          break;
+        default:
+          console.error(`Unknown CO_DESIGN_LEVEL: ${coDesignLevel}`);
+      }
+      return acc;
+    },
+    { level1: [], level2: [], level3: [] }
+  );
+};
+
+export function getColorByAccess(accessType: string) {
+  switch (accessType) {
+    case "Institutional Access":
+      return "#FFFF33"; // Yellow
+    case "Open Source":
+      return "#33FF33"; // green
+    case "Paid Service":
+      return "#33FF33"; // Red
+    default:
+      return "transparent";
+  }
+}
+
+export const caseStudy = {
+  Level: ["Household", "Community", "Policy/Systemic", "Productivity Use"],
+  Technology: ["Coding", "Lighting", "Hummanitarian Inflastructure"],
+};

tailwind.config.ts

@@ -8,7 +8,13 @@ const config: Config = {
   ],
   theme: {
     extend: {
+      maxWidth: {
+        custom: "3500px",
+      },
       colors: {
+        black: {
+          900: "#333333",
+        },
         level: {
           primary: {
             0: "#dae8fc",