Fix/tools resources (#55)

* sprting

* fix: basic tools colouring

src/components/cards/Node.tsx

@@ -1,6 +1,6 @@
 import Star from "@/components/icons/Star";
 import { useHighlight } from "@/hooks/useHighlight";
-import { getBgColorClassName, getColorByAccess, getLevel } from "@/utils/nodes";
+import { getBgColorClassName, getColorByAccess, getLevel, getNodeBgColorClassName } from "@/utils/nodes";
 import { useMemo } from "react";
 import { Handle } from "reactflow";
 import "reactflow/dist/style.css";
@@ -14,8 +14,7 @@ export function NodeCard({
   const highlighted = useHighlight(data);
 
   const { className, access, starColor, summary } = useMemo(() => {
-    const level = getLevel(data);
-    const bgColor = getBgColorClassName(level);
+    const bgColor = getNodeBgColorClassName(data);
     const access = data?.PARSED_MANUAL_TAGS?.ACCESS?.[0];
     const starColor = getColorByAccess(access);
     const summary = data.Notes?.replace(/<[^>]*>?/gm, "");
@@ -30,11 +29,14 @@ export function NodeCard({
     window?.open(data?.url, "_blank")?.focus();
   };
 
+
   return (
     <div className="group cursor-pointer">
       <Handle type="target" position={targetPosition} id={data.key} />
-      <div onClick={onClick} className={className}>
+      <div onClick={onClick} className={className}
+    >
         <div className="relative">
+
           {data.title && <p className="z-10">{data.title}</p>}
           {data.authors && <p className="z-10">{data.authors}</p>}
           {(access === "Institutional Access" ||
@@ -45,6 +47,7 @@ export function NodeCard({
             </div>
           )}
           <div className="absolute hidden group-hover:block bg-white border p-4 mt-2 z-20">
+
             {data.authors && (
               <p>
                 <strong>Author(s)</strong>: {data.authors}

src/data/basic-tools/index.ts

@@ -2,12 +2,16 @@ import output from "@/data/zotero";
 import { Block, Entry } from "@/types/interfaces";
 import { approaches } from "./approaches";
 import { toolsData } from "./tools-data";
+import { isBasicTool } from "@/utils/helpers";
 
 const toolData = toolsData["BASIC TOOLS"];
 
-const entries = output.filter(
-  (entry) => entry?.PARSED_MANUAL_TAGS && "BASIC TOOLS" in entry.PARSED_MANUAL_TAGS
-) as unknown as Entry[];
+const entries = output
+  .filter((entry) => isBasicTool(entry))
+  .map((entry) => ({
+    ...entry,
+    isBasicTool: true,
+  })) as unknown as Entry[];
 
 const groups: Block[] = [
   {

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

@@ -9,6 +9,7 @@ const caseStudiesAndCoreTools = () => {
         <HighlightMenuCard />
       </div>
       {groups?.map((data, index) => {
+        console.log("tesss")
         return (
           <Group
             key={`case-studies-and-core-tools-${data.title}-${index}`}

src/pages/index.tsx

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

src/types/interfaces.ts

@@ -22,6 +22,7 @@ export interface Entry {
   tags: string;
   PARSED_MANUAL_TAGS: ParsedManualTags;
   PARSED_RELATES_TO?: string[];
+  isBasicTool?: Boolean
 }
 
 export type Entries = Entry[];

src/utils/helpers.ts

@@ -1,3 +1,5 @@
+import { Entry } from "@/types/interfaces";
+
 export const hasTag = (entry: any, name: any, value: any) => {
   const attributeValues = entry?.PARSED_MANUAL_TAGS?.[name];
   if (Array.isArray(attributeValues)) return attributeValues.includes(value);
@@ -86,3 +88,6 @@ export const getRandomColor = () => {
 
   return hexColor;
 };
+
+
+export const isBasicTool = (entry: any) => entry?.PARSED_MANUAL_TAGS && "BASIC TOOLS" in entry.PARSED_MANUAL_TAGS

src/utils/nodes.ts

@@ -1,4 +1,6 @@
+import { Entry } from "@/types/interfaces";
 import classNames from "classnames";
+import { isBasicTool } from "./helpers";
 
 export function getColorByAccess(accessType: string) {
   switch (accessType) {
@@ -35,3 +37,12 @@ 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);
+  return getBgColorClassName(level);
+};

tsconfig.json

@@ -1,6 +1,10 @@
 {
   "compilerOptions": {
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -13,9 +17,18 @@
     "jsx": "preserve",
     "incremental": true,
     "paths": {
-      "@/*": ["./src/*"]
-    }
+      "@/*": [
+        "./src/*"
+      ]
+    },
+    "target": "ES2017"
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }