fix: removing the highlight bug and add fixed width (#34)

kareraolivier · web-flow · commit b7d45af7c93a · 2024-04-29T20:22:41.000+02:00
* fix: removing the highlight bug

* feat: add fixed width
diff --git a/src/components/cards/Canvas.tsx b/src/components/cards/Canvas.tsx
@@ -1,5 +1,5 @@
 import { parseEdges, parseNodes } from "@/utils/canvas";
-import { useEffect, useMemo, useState } from "react";
+import { useMemo } from "react";
 import ReactFlow from "reactflow";
 import "reactflow/dist/style.css";
 import { NodeCard } from "./Node";
diff --git a/src/context/highlight.tsx b/src/context/highlight.tsx
@@ -1,9 +1,18 @@
-import { createContext, useCallback, useContext, useState } from "react";
+import {
+  Dispatch,
+  SetStateAction,
+  createContext,
+  useCallback,
+  useContext,
+  useState,
+} from "react";
 
 export type HighlightContextType = {
   field: string;
   value: string | number;
   setTag: (field: string, value: string | number) => void;
+  setField: Dispatch<SetStateAction<string>>;
+  setValue: Dispatch<SetStateAction<string | number>>;
 };
 const HighlightContext = createContext<HighlightContextType | undefined>(
   undefined
@@ -22,7 +31,9 @@ export function HighlightProvider({ children }: { children: React.ReactNode }) {
   );
 
   return (
-    <HighlightContext.Provider value={{ field, value, setTag }}>
+    <HighlightContext.Provider
+      value={{ field, value, setTag, setField, setValue }}
+    >
       {children}
     </HighlightContext.Provider>
   );
diff --git a/src/hooks/useHighlight.ts b/src/hooks/useHighlight.ts
@@ -7,7 +7,7 @@ export const useHighlight = (entry: Entry) => {
   const [highlighted, setHighlighted] = useState<boolean>(false);
 
   const timerRef = useRef<number | null>(null);
-  const { field, value } = useHighlightContext();
+  const { field, value, setField, setValue } = useHighlightContext();
 
   const onHighlight = useCallback(() => {
     if (!field) return;
@@ -22,6 +22,8 @@ export const useHighlight = (entry: Entry) => {
     timerRef.current = window.setTimeout(() => {
       setHighlighted(false);
     }, 2000);
+    setField("");
+    setValue("");
   }, [field, value]);
 
   useEffect(() => {
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -3,8 +3,13 @@ import { Html, Head, Main, NextScript } from "next/document";
 export default function Document() {
   return (
     <Html lang="en">
-      <Head />
-      <body className="max-w-custom mx-auto">
+      <Head>
+        <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1, maximum-scale=1"
+        />
+      </Head>
+      <body className="min-w-minWidth max-w-maxWidth mx-auto overflow-x-auto">
         <Main />
         <NextScript />
       </body>
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -48,7 +48,10 @@ const config: Config = {
   theme: {
     extend: {
       maxWidth: {
-        custom: "3500px",
+        maxWidth: "3400px",
+      },
+      minWidth: {
+        minWidth: "2600px",
       },
       colors: {
         black: {
