From 0a213db7effee9cf246a414695af35e4049684b6 Mon Sep 17 00:00:00 2001
From: Delyce Twizeyimana <delyce35@gmail.com>
Date: Wed, 13 Nov 2024 11:07:09 +0200
Subject: [PATCH] Fix/structuring basic resources (#56)

* structuring basic tools and unfiltering

* ordering basic resources titles
---
 src/components/cards/Canvas.tsx       |  9 ++++++---
 src/data/basic-tools/approaches.ts    | 24 +++++++++++++---------
 src/data/resources/basic-resources.ts |  2 +-
 src/pages/index.tsx                   |  1 -
 src/pages/tools-resources.tsx         | 29 ++++++++++++++++-----------
 src/types/interfaces.ts               |  3 ++-
 src/utils/nodes.ts                    |  5 ++---
 7 files changed, 42 insertions(+), 31 deletions(-)

diff --git a/src/components/cards/Canvas.tsx b/src/components/cards/Canvas.tsx
index d562e84..c44c5e5 100644
--- a/src/components/cards/Canvas.tsx
+++ b/src/components/cards/Canvas.tsx
@@ -35,15 +35,18 @@ const CardCanvas = ({ data, blockHeight, columns }: any) => {
   return (
     <div
       style={{
-        height: `${blockHeight * 12.5}rem`,
+        height: `${blockHeight * 6}rem`,
+        maxHeight: `${blockHeight * 12.5}rem`,
+        
         width: "auto",
         position: "relative",
         zIndex: 20,
-        marginTop: 10,
+        // marginTop: 10,
         padding: 0,
       }}
-      className="flex justify-center"
+      className="flex justify-center "
     >
+
       <ReactFlow
         nodes={nodes}
         nodeTypes={NodeTypes}
diff --git a/src/data/basic-tools/approaches.ts b/src/data/basic-tools/approaches.ts
index f59405a..381788f 100644
--- a/src/data/basic-tools/approaches.ts
+++ b/src/data/basic-tools/approaches.ts
@@ -8,14 +8,18 @@ const rawApproaches = output
   .filter((approach) => approach) as string[];
 
 export const approaches = Array.from(new Set(rawApproaches)).map(
-    (approach: string) => {
-        const data = toolsData[approach.toUpperCase()];
-        const entries = output.filter((entry) => entry?.PARSED_MANUAL_TAGS?.TOOLS?.includes(approach)
-        );
-        return {
-            title: approach,
-            description: data?.description,
-            entries,
-        };
-    }
+  (approach: string) => {
+    const data = toolsData[approach.toUpperCase()];
+    const entries = output
+      .filter((entry) => entry?.PARSED_MANUAL_TAGS?.TOOLS?.includes(approach))
+      .map((entry) => ({
+        ...entry,
+        hasDefaultBackground: true,
+      }));
+    return {
+      title: approach,
+      description: data?.description,
+      entries,
+    };
+  }
 ) as unknown as Block[];
diff --git a/src/data/resources/basic-resources.ts b/src/data/resources/basic-resources.ts
index fd2e4ee..2ede6be 100644
--- a/src/data/resources/basic-resources.ts
+++ b/src/data/resources/basic-resources.ts
@@ -17,6 +17,6 @@ const groups: Group[] = Object.keys(rawGroups).map((group) => {
         title: group,
         blocks: rawGroups[group]
     };
-}).sort((a, b) => a.title.localeCompare(b.title)) as unknown as Group[];
+}) as unknown as Group[];
 
 export default groups;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 26d8b89..8f4eae3 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,6 +1,5 @@
 import Group from "@/components/Group";
 import resources from "@/data/resources/advanced-resources";
-// import Grou
 
 
 
diff --git a/src/pages/tools-resources.tsx b/src/pages/tools-resources.tsx
index e54b00f..e35ffa8 100644
--- a/src/pages/tools-resources.tsx
+++ b/src/pages/tools-resources.tsx
@@ -4,18 +4,23 @@ import tools from "../data/basic-tools";
 
 const ToolsResources = () => {
   return (
-    <section className="mt-10 flex gap-y-8 px-8 flex-wrap">
-      {tools.map((data: any, i: any) =>
-        <div key={`${data.title}-${i}`} className="w-1/2 px-4 h-1/2">
-          <Block
-            title={data.title}
-            description={data.description}
-            entries={data.entries}
-          />
-        </div>
-      )}
-
-
+    <section className="mt-10 grid grid-cols-3 gap-y-8 px-8 flex-wrap ">
+      {tools.map((data: any, i: any) => {
+        return (
+          <div
+            key={`${data.title}-${i}`}
+            className={`${
+              data.title === "Basic Tools" ? "col-span-2 row-span-3 flex justify-center items-center" : ""
+            }  px-4 `}
+          >
+            <Block
+              title={data.title}
+              description={data.description}
+              entries={data.entries}
+            />
+          </div>
+        );
+      })}
     </section>
   );
 };
diff --git a/src/types/interfaces.ts b/src/types/interfaces.ts
index 7376dd9..f5e6ff3 100644
--- a/src/types/interfaces.ts
+++ b/src/types/interfaces.ts
@@ -22,7 +22,8 @@ export interface Entry {
   tags: string;
   PARSED_MANUAL_TAGS: ParsedManualTags;
   PARSED_RELATES_TO?: string[];
-  isBasicTool?: Boolean
+  isBasicTool?: Boolean;
+  hasDefaultBackground?: Boolean
 }
 
 export type Entries = Entry[];
diff --git a/src/utils/nodes.ts b/src/utils/nodes.ts
index c37bd33..d3f1c7e 100644
--- a/src/utils/nodes.ts
+++ b/src/utils/nodes.ts
@@ -39,10 +39,9 @@ export const getBgColorClassName = (level: any) => {
 };
 
 export const getNodeBgColorClassName = (entry: Entry) => {
-  console.log(entry)
       
   if(entry.isBasicTool) return classNames("bg-[#f8cecc] border-[#b85450]");
-
-  const level = getLevel(entry);
+  
+  const level = !entry.hasDefaultBackground ? getLevel(entry) : '';
   return getBgColorClassName(level);
 };