Fix/structuring basic resources (#56)

* structuring basic tools and unfiltering

* ordering basic resources titles

Author: Delyc

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}

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[];

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;

src/pages/index.tsx

@@ -1,6 +1,5 @@
 import Group from "@/components/Group";
 import resources from "@/data/resources/advanced-resources";
-// import Grou
 
 
 

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>
   );
 };

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[];

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);
 };