feat: cria widthContext e altera componente List

src/components/List/List.tsx

@@ -3,7 +3,7 @@ import { Link } from "react-router-dom";
 
 interface ListProps {
   className: string;
-  itemsList: { value: string; name: string }[];
+  itemsList: { value: string; name: string; phoneNumber?: string }[];
 }
 
 const List = (props: ListProps) => {
@@ -11,11 +11,18 @@ const List = (props: ListProps) => {
 
   return (
     <ul className={className}>
-      {itemsList.map((item, index) => (
-        <li key={index}>
-          <Link to={item.value}>{item.name}</Link>
-        </li>
-      ))}
+      {itemsList.map((item, index) =>
+        item.phoneNumber ? (
+          <li key={index}>
+            <p>{item.name}</p>
+            <Link to={item.value}>{item.phoneNumber}</Link>
+          </li>
+        ) : (
+          <li key={index}>
+            <Link to={item.value}>{item.name}</Link>
+          </li>
+        )
+      )}
     </ul>
   );
 };

src/contexts/WidthContext.tsx

@@ -0,0 +1,36 @@
+import { createContext, useState, useEffect } from "react";
+
+interface WidthContextData {
+  width: number;
+  isMobile: boolean;
+}
+
+interface Props {
+  children: React.ReactNode;
+}
+
+export const WidthContext = createContext({} as WidthContextData);
+
+export const WidthProvider: React.FC<Props> = ({ children }) => {
+  const [width, setWidth] = useState(window.innerWidth);
+  const [isMobile, setIsMobile] = useState(width <= 1024);
+
+  const updateWidth = () => {
+    setWidth(window.innerWidth);
+    console.log("atualizou width");
+  };
+
+  useEffect(() => {
+    window.addEventListener("resize", updateWidth);
+  }, []);
+
+  useEffect(() => {
+    width <= 1024 ? setIsMobile(true) : setIsMobile(false);
+  }, [width]);
+
+  return (
+    <WidthContext.Provider value={{ width: width, isMobile: isMobile }}>
+      {children}
+    </WidthContext.Provider>
+  );
+};

src/index.tsx

@@ -5,14 +5,17 @@ import Institucional from "./pages/Institucional";
 
 import "./global.scss";
 import { ModalProvider } from "./contexts/ModalContext";
+import { WidthProvider } from "./contexts/WidthContext";
 
 const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement
 );
 root.render(
   <React.StrictMode>
-    <ModalProvider>
-      <Institucional />
-    </ModalProvider>
+    <WidthProvider>
+      <ModalProvider>
+        <Institucional />
+      </ModalProvider>
+    </WidthProvider>
   </React.StrictMode>
 );