@julseb-lib/react 0.0.84 → 0.0.86

package/dist/lib/components/Wrapper/Wrapper.tsx

@@ -1,43 +1,50 @@
-/*=============================================== Wrapper component ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import { StyledWrapper } from "./styles"
 import type { ILibWrapper } from "./types"
 
 /**
- * @description Returns a Wrapper component
- * @link https://documentation-components-react.vercel.app/layouts/container
+ * Wrapper component for creating a container with customizable gap, background color, and minimum height.
+ *
+ * @component
  * @extends HTMLDivElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLDivElement>
- * @prop gap?: "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"
- * @prop backgroundColor?: Any color from the library
- * @prop minHeight?: string | number
+ * @param {Object} props - Wrapper props.
+ * @param {string} [props.data-testid] - Test id for testing purposes.
+ * @param {React.ElementType} [props.as] - Custom element type to render as.
+ * @param {React.ForwardedRef<HTMLDivElement>} [props.ref] - Ref forwarded to the root element.
+ * @param {"xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | number | "0px"} [props.gap="l"] - Gap between children.
+ * @param {string} [props.backgroundColor="transparent"] - Background color (any color from the library).
+ * @param {string|number} [props.minHeight="100svh"] - Minimum height of the container.
+ * @param {React.ReactNode} [props.children] - Content to render inside the wrapper.
+ * @param {any} [props.rest] - Additional props passed to the root element.
+ * @returns {JSX.Element} The rendered Wrapper component.
+ *
+ * @see https://documentation-components-react.vercel.app/layouts/container
+ * @example
+ * <Wrapper gap="m" backgroundColor="white">
+ *   <div>Content</div>
+ * </Wrapper>
  */
-export const Wrapper = forwardRef<HTMLDivElement, ILibWrapper>(
-    (
-        {
-            "data-testid": testid,
-            as,
-            children,
-            gap = "l",
-            backgroundColor = "transparent",
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <StyledWrapper
-                data-testid={testid}
-                ref={ref}
-                as={as}
-                $gap={gap}
-                $backgroundColor={backgroundColor}
-                {...rest}
-            >
-                {children}
-            </StyledWrapper>
-        )
-    }
-)
+export const Wrapper: FC<ILibWrapper> = ({
+    "data-testid": testid,
+    as,
+    ref,
+    children,
+    gap = "l",
+    backgroundColor = "transparent",
+    minHeight = "100svh",
+    ...rest
+}) => {
+    return (
+        <StyledWrapper
+            data-testid={testid}
+            ref={ref}
+            as={as}
+            $gap={gap}
+            $backgroundColor={backgroundColor}
+            $minHeight={minHeight}
+            {...rest}
+        >
+            {children}
+        </StyledWrapper>
+    )
+}

package/dist/lib/components/Wrapper/index.ts

@@ -1,3 +1 @@
-/*=============================================== Wrapper exports ===============================================*/
-
 export * from "./Wrapper"

package/dist/lib/components/Wrapper/styles.tsx

@@ -1,16 +1,18 @@
-/*=============================================== Wrapper styles ===============================================*/
-
 import styled from "styled-components"
+import { stringifyPx } from "@julseb-lib/utils"
 import { MEDIA, Mixins, setDefaultTheme } from "../../"
 import type { LibAllColors, LibSpacers } from "../../types"
 
 const StyledWrapper = styled.section<{
     $gap: LibSpacers
     $backgroundColor: LibAllColors
+    $minHeight: string | number
 }>`
     position: relative;
     background-color: ${({ $backgroundColor, theme }) =>
         Mixins.AllColors($backgroundColor, theme)};
+    height: ${({ $minHeight }) => stringifyPx($minHeight)};
+    min-height: ${({ $minHeight }) => stringifyPx($minHeight)};
     ${({ $gap }) =>
         Mixins.Flexbox({
             $gap,
@@ -20,7 +22,8 @@ const StyledWrapper = styled.section<{
     @media ${MEDIA.BREAKPOINT_TABLET_LARGE} {
         flex-direction: column;
         align-items: center;
-        min-height: inherit;
+        justify-content: flex-start;
+        min-height: ${({ $minHeight }) => stringifyPx($minHeight)};
     }
 `
 

package/dist/lib/components/Wrapper/types.ts

@@ -1,5 +1,3 @@
-/*=============================================== Wrapper types ===============================================*/
-
 import type { LibComponentBase, LibSpacers, LibAllColors } from "../../types"
 
 export interface ILibWrapper extends LibComponentBase<HTMLDivElement> {

package/dist/lib/components/Youtube/Youtube.tsx

@@ -1,44 +1,49 @@
-/*=============================================== Youtube component ===============================================*/
-
-import { forwardRef } from "react"
+import type { FC } from "react"
 import { convertYoutube } from "@julseb-lib/utils"
 import { StyledYoutube } from "./styles"
 import type { ILibYoutube } from "./types"
 
 /**
- * @description Returns a Youtube component
- * @link https://documentation-components-react.vercel.app/components/youtube
+ * Youtube component for embedding a YouTube video with customizable aspect ratio, width, and height.
+ *
+ * @component
  * @extends HTMLIframeElement
- * @prop data-testid?: string
- * @prop as?: ElementType
- * @prop ref?: ForwardedRef<HTMLIframeElement>
- * @prop aspectRatio?: string
+ * @param {Object} props - Youtube props.
+ * @param {string} [props.data-testid] - Test id for testing purposes.
+ * @param {ElementType} [props.as] - Custom element type to render as.
+ * @param {ForwardedRef<HTMLIframeElement>} [props.ref] - Ref forwarded to the iframe element.
+ * @param {string} [props.src=""] - YouTube video URL or ID.
+ * @param {string|number} [props.width="100%"] - Width of the iframe.
+ * @param {string|number} [props.height="auto"] - Height of the iframe.
+ * @param {string} [props.aspectRatio="16/9"] - Aspect ratio for the iframe.
+ * @param {any} [props.rest] - Additional props passed to the iframe element.
+ * @returns {JSX.Element} The rendered Youtube component.
+ *
+ * @see https://documentation-components-react.vercel.app/components/youtube
+ * @example
+ * <Youtube src="https://www.youtube.com/watch?v=dQw4w9WgXcQ" aspectRatio="16/9" />
  */
-export const Youtube = forwardRef<HTMLIFrameElement, ILibYoutube>(
-    (
-        {
-            "data-testid": testid,
-            src = "",
-            width = "100%",
-            height = "auto",
-            aspectRatio = "16/9",
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <StyledYoutube
-                data-testid={testid}
-                ref={ref}
-                src={convertYoutube(src)}
-                frameborder="0"
-                allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-                allowfullscreen
-                $width={width}
-                $height={height}
-                $aspectRatio={aspectRatio}
-                {...rest}
-            />
-        )
-    }
-)
+export const Youtube: FC<ILibYoutube> = ({
+    "data-testid": testid,
+    ref,
+    src = "",
+    width = "100%",
+    height = "auto",
+    aspectRatio = "16/9",
+    ...rest
+}) => {
+    return (
+        <StyledYoutube
+            data-testid={testid}
+            ref={ref}
+            src={convertYoutube(src)}
+            frameborder="0"
+            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+            allowfullscreen
+            $width={width}
+            $height={height}
+            $aspectRatio={aspectRatio}
+            {...rest}
+        />
+    )
+}

package/dist/lib/components/Youtube/index.ts

@@ -1,3 +1 @@
-/*=============================================== Youtube exports ===============================================*/
-
 export * from "./Youtube"

package/dist/lib/components/Youtube/styles.tsx

@@ -1,5 +1,3 @@
-/*=============================================== Youtube styles ===============================================*/
-
 import styled from "styled-components"
 import { stringifyPx } from "@julseb-lib/utils"
 import { setDefaultTheme } from "../../"

package/dist/lib/components/Youtube/types.ts

@@ -1,5 +1,3 @@
-/*=============================================== Youtube types ===============================================*/
-
 import type { IframeHTMLAttributes } from "react"
 import type { LibComponentBase } from "../../types"
 

package/dist/lib/context/Theme.context.tsx

@@ -1,7 +1,3 @@
-"use client"
-
-/*=============================================== Theme context ===============================================*/
-
 import { useState, useEffect, createContext, useContext } from "react"
 import type { IStyleSheetManager, DefaultTheme } from "styled-components"
 import { StyleSheetManager } from "../utils"
@@ -16,10 +12,19 @@ interface ILibThemeProvider {
 }
 
 /**
- * @description Returns a Wrapper for the theme
- * @link https://documentation-components-react.vercel.app/styles/theme-provider
- * @prop stylesheetManager?: boolean | IStyleSheetManager => import IStyleSheetManager from "styled-components"
- * @prop children?: ReactChildren
+ * ThemeProviderWrapper provides a context for managing and toggling between light and dark themes in the application.
+ *
+ * @component
+ * @param {Object} props - ThemeProviderWrapper props.
+ * @param {boolean | IStyleSheetManager} [props.stylesheetManager] - Optionally wrap children with a styled-components StyleSheetManager.
+ * @param {ReactChildren} [props.children] - Children components to wrap with the theme context.
+ * @returns {JSX.Element} The Theme context provider with optional StyleSheetManager.
+ *
+ * @see https://documentation-components-react.vercel.app/styles/theme-provider
+ * @example
+ * <ThemeProviderWrapper>
+ *   <App />
+ * </ThemeProviderWrapper>
  */
 export const ThemeProviderWrapper = ({
     children,
@@ -99,10 +104,13 @@ export const ThemeProviderWrapper = ({
 }
 
 /**
- * @description Hook for Theme context
- * @link https://documentation-components-react.vercel.app/styles/theme-provider
- * @prop theme: DefaultTheme => import from "styled-components"
- * @prop selectedTheme: "light" | "dark" | undefined
- * @prop toggleTheme: () => void
+ * useLibTheme is a hook for accessing the Theme context and toggling the theme.
+ *
+ * @function
+ * @returns {ILibThemeContext} The theme context with properties: theme, selectedTheme, toggleTheme.
+ *
+ * @see https://documentation-components-react.vercel.app/styles/theme-provider
+ * @example
+ * const { theme, selectedTheme, toggleTheme } = useLibTheme()
  */
 export const useLibTheme = () => useContext(ThemeContext) as ILibThemeContext

package/dist/lib/context/Toaster/Toaster.context.tsx

@@ -1,6 +1,3 @@
-// @ts-nocheck
-/*=============================================== Toaster context ===============================================*/
-
 import { createContext, useReducer, useContext } from "react"
 import { uuid } from "@julseb-lib/utils"
 import { Toaster } from "../../components/Toast/Toaster"
@@ -40,13 +37,18 @@ const initialState = {
 }
 
 /**
- * @description Returns a Context component for Toast
- * @link https://documentation-components-react.vercel.app/components/toast
- * @prop data-testid?: string
- * @prop className?: string
- * @prop children: ReactChildren
- * @prop toastOptions?: { duration?: number; labelClose?: string; withTimer?: boolean }
- * @prop position?: "top-left" | "top-right" | "bottom-left" | "bottom-right"
+ * ToasterProviderWrapper provides a context for managing toast notifications throughout the app.
+ *
+ * @component
+ * @param {Object} props - ToasterProviderWrapper props.
+ * @param {string} [props.data-testid] - Test id for testing purposes.
+ * @param {string} [props.className] - Additional class names.
+ * @param {ReactChildren} props.children - Children components to wrap with the toaster context.
+ * @param {{ duration?: number; labelClose?: string; withTimer?: boolean }} [props.toastOptions] - Default options for all toasts.
+ * @param {"top-left" | "top-right" | "bottom-left" | "bottom-right"} [props.position] - Position of the toaster on the screen.
+ * @returns {JSX.Element} The Toaster context provider with the Toaster component.
+ *
+ * @see https://documentation-components-react.vercel.app/components/toast
  */
 export const ToasterProviderWrapper = ({
     "data-testid": testid,
@@ -119,13 +121,11 @@ export const ToasterProviderWrapper = ({
 }
 
 /**
- * @description Hook for Toaster context
- * @link https://documentation-components-react.vercel.app/components/toast
- * @function success
- * @function error
- * @function warning
- * @function info
- * @function loading
- * @function remove
+ * useToast is a hook for accessing the Toaster context and managing toast notifications.
+ *
+ * @function
+ * @returns {ILibToasterContext} The toaster context with methods: success, error, warning, info, loading, remove.
+ *
+ * @see https://documentation-components-react.vercel.app/components/toast
  */
 export const useToast = () => useContext(ToastContext) as ILibToasterContext

package/dist/lib/context/Toaster/index.ts

@@ -1,5 +1,3 @@
 "use client"
 
-/*=============================================== Exports ===============================================*/
-
-export * from "./Toaster.context"
+export * from "./Toaster.context"

package/dist/lib/context/Toaster/toast.reducer.ts

@@ -1,5 +1,3 @@
-/*=============================================== Toast reducer ===============================================*/
-
 import type { LibToast } from "../../types"
 
 type ToastAction = "ADD_TOAST" | "DELETE_TOAST"

package/dist/lib/hooks/index.ts

@@ -1,5 +1,3 @@
-/*=============================================== Export hooks ===============================================*/
-
 export * from "./useClickOutside"
 export * from "./useCopyToClipboard"
 export * from "./useDebounce"

package/dist/lib/hooks/useClickOutside.tsx

@@ -1,17 +1,22 @@
-/*=============================================== useClickOutside ===============================================*/
-
-import { useEffect, type RefObject } from "react"
+import { useEffect, type Ref } from "react"
 
 type Event = MouseEvent | TouchEvent
 
 /**
- * @description Hook to trigger a function on click outside an element
- * @link https://documentation-components-react.vercel.app/helpers/hooks#useClickOutside
- * @argument ref: RefObject<T>,
- * @argument handler: (event: Event) => void
+ * useClickOutside is a hook to trigger a function when a click occurs outside the referenced element.
+ *
+ * @function
+ * @template T
+ * @param {Ref<T>} ref - Ref to the target element.
+ * @param {(event: MouseEvent | TouchEvent) => void} handler - Function to call when a click outside is detected.
+ * @see https://documentation-components-react.vercel.app/helpers/hooks#useClickOutside
+ *
+ * @example
+ * const ref = useRef(null)
+ * useClickOutside(ref, () => setOpen(false))
  */
 export const useClickOutside = <T extends HTMLElement = HTMLElement>(
-    ref: RefObject<T>,
+    ref: Ref<T>,
     handler: (event: Event) => void
 ) => {
     useEffect(() => {
@@ -20,7 +25,7 @@ export const useClickOutside = <T extends HTMLElement = HTMLElement>(
 
             if (target.getAttribute("href")) return false
 
-            const el = ref?.current
+            const el = (ref as any)?.current
             if (!el || el.contains((e?.target as Node) || null)) {
                 return
             }

package/dist/lib/hooks/useCopyToClipboard.tsx

@@ -1,13 +1,18 @@
-/*=============================================== useCopyToClipboard ===============================================*/
-
 import { useState } from "react"
 
 type CopiedValue = string | null
 type CopyFn = (text: string) => Promise<boolean>
 
 /**
- * @description Hook to trigger a function to copy content
- * @link https://documentation-components-react.vercel.app/helpers/hooks#useCopyToClipboard
+ * useCopyToClipboard is a hook to copy text content to the clipboard and track the copied value.
+ *
+ * @function
+ * @returns {[CopiedValue, CopyFn]} A tuple containing the last copied value and a function to copy text.
+ * @see https://documentation-components-react.vercel.app/helpers/hooks#useCopyToClipboard
+ *
+ * @example
+ * const [copied, copy] = useCopyToClipboard()
+ * copy("Hello world!")
  */
 export const useCopyToClipboard = (): [CopiedValue, CopyFn] => {
     const [copiedText, setCopiedText] = useState<CopiedValue>(null)

package/dist/lib/hooks/useDebounce.tsx

@@ -1,12 +1,17 @@
-/*=============================================== useDebounce ===============================================*/
-
 import { useState, useEffect } from "react"
 
 /**
- * @description Hook to delay a function
- * @link https://documentation-components-react.vercel.app/helpers/hooks#useDebounce
- * @argument value: <T> => type to define
- * @argument delay?: number
+ * useDebounce is a hook to delay updating a value until after a specified delay.
+ *
+ * @function
+ * @template T
+ * @param {T} value - The value to debounce.
+ * @param {number} [delay=1000] - Delay in milliseconds before updating the debounced value.
+ * @returns {T} The debounced value.
+ * @see https://documentation-components-react.vercel.app/helpers/hooks#useDebounce
+ *
+ * @example
+ * const debouncedValue = useDebounce(searchTerm, 500)
  */
 export const useDebounce = <T,>(value: T, delay: number = 1000) => {
     const [debouncedValue, setDebouncedValue] = useState<T>(value)

package/dist/lib/hooks/useExportData.tsx

@@ -1,5 +1,3 @@
-/*=============================================== useTableSorting ===============================================*/
-
 interface IDownloadFile {
     blob: Blob
     fileName: string
@@ -19,8 +17,20 @@ const downloadFile = ({ blob, fileName }: IDownloadFile) => {
 }
 
 /**
- * @description Hook to export data to JSON or CSV
- * @link https://documentation-components-react.vercel.app/helpers/hooks#useExportData
+ * useExportData is a hook to export data to JSON or CSV files.
+ *
+ * @function
+ * @template T
+ * @returns {{
+ *   exportToJson: (data: Array<T>, fileName: string) => void,
+ *   exportToCsv: (data: Array<T>, fileName: string, headers: Array<string>) => void
+ * }} An object with methods to export data as JSON or CSV.
+ * @see https://documentation-components-react.vercel.app/helpers/hooks#useExportData
+ *
+ * @example
+ * const { exportToJson, exportToCsv } = useExportData()
+ * exportToJson(dataArray, "my-data")
+ * exportToCsv(dataArray, "my-data", ["header1", "header2"])
  */
 export const useExportData = <T,>() => {
     const exportToJson = (data: Array<T>, fileName: string) =>

package/dist/lib/hooks/useFetch.tsx

@@ -1,12 +1,17 @@
-/*=============================================== useFetch ===============================================*/
-
 import { useEffect, useState } from "react"
 
 /**
- * @description Hook to fetch data
- * @link https://documentation-components-react.vercel.app/helpers/hooks#useFetch
- * @argument fetchFunction: Promise<T> => to define
- * @argument dependencies?: any
+ * useFetch is a hook to fetch data asynchronously and manage loading and error states.
+ *
+ * @function
+ * @template T
+ * @param {Promise<T>} fetchFunction - The promise to fetch data.
+ * @param {any} [dependencies] - Optional dependencies array for the effect.
+ * @returns {{ response: T | null, error: any, loading: boolean }} An object containing the response, error, and loading state.
+ * @see https://documentation-components-react.vercel.app/helpers/hooks#useFetch
+ *
+ * @example
+ * const { response, error, loading } = useFetch(fetchDataPromise, [dependency])
  */
 export const useFetch = <T,>(fetchFunction: Promise<T>, dependencies?: any) => {
     const [response, setResponse] = useState<T | null>(null)

package/dist/lib/hooks/useForm.tsx

@@ -1,12 +1,22 @@
-/*=============================================== useForm ===============================================*/
-
 import { useState, type ChangeEvent } from "react"
 
 /**
- * @description Hook to use in forms
- * @link https://documentation-components-react.vercel.app/helpers/hooks#useForm
- * @argument initialState = {} as T => type to define
- * @argument onSubmit?: (formData: T) => void
+ * useForm is a hook to manage form state, input changes, reset, and submission.
+ *
+ * @function
+ * @template T
+ * @param {T} [initialState={}] - Initial state of the form.
+ * @param {(formData: T) => void} [onSubmit] - Optional submit handler called with form data.
+ * @returns {{
+ *   formData: T,
+ *   handleInputs: (e: ChangeEvent<HTMLInputElement>) => void,
+ *   resetForm: () => void,
+ *   handleSubmit: (e: ChangeEvent<HTMLFormElement>) => void
+ * }} An object with form state and handlers.
+ * @see https://documentation-components-react.vercel.app/helpers/hooks#useForm
+ *
+ * @example
+ * const { formData, handleInputs, resetForm, handleSubmit } = useForm({ name: "" }, data => console.log(data))
  */
 export const useForm = <T,>(
     initialState = {} as T,

package/dist/lib/hooks/useIsOverflow.ts

@@ -1,20 +1,22 @@
-/*=============================================== useIsOverflow ===============================================*/
-
-import {
-    useState,
-    useLayoutEffect,
-    type RefCallback,
-    type RefObject,
-} from "react"
+import { useState, useLayoutEffect, type RefCallback, type Ref } from "react"
 
 /**
- * @description Hook to detect if an element is overflowing
- * @link https://documentation-components-react.vercel.app/helpers/hooks#useIsOverflow
- * @argument ref: RefObject<HTMLElement>,
- * @argument options?: { callback: RefCallback<boolean>; check?: "width" | "height" }
+ * useIsOverflow is a hook to detect if an element is overflowing its container in width or height.
+ *
+ * @function
+ * @param {Ref<HTMLElement>} ref - Ref to the target HTML element.
+ * @param {Object} [options] - Optional configuration.
+ * @param {RefCallback<boolean>} [options.callback] - Callback function called with the overflow state.
+ * @param {"width" | "height"} [options.check="width"] - Whether to check for overflow in width or height.
+ * @returns {boolean | undefined} Returns true if the element is overflowing, false if not, or undefined if not yet determined.
+ * @see https://documentation-components-react.vercel.app/helpers/hooks#useIsOverflow
+ *
+ * @example
+ * const ref = useRef<HTMLDivElement>(null)
+ * const isOverflow = useIsOverflow(ref, { check: "height" })
  */
 export const useIsOverflow = (
-    ref: RefObject<HTMLElement>,
+    ref: Ref<HTMLElement>,
     options?: {
         callback: RefCallback<boolean>
         check?: "width" | "height"
@@ -23,7 +25,7 @@ export const useIsOverflow = (
     const [isOverflow, setIsOverflow] = useState<undefined | boolean>(undefined)
 
     useLayoutEffect(() => {
-        const { current } = ref
+        const { current } = ref as any
 
         const trigger = () => {
             if (current) {

package/dist/lib/hooks/useKeyPress.tsx

@@ -1,12 +1,18 @@
-/*=============================================== useKeyPress ===============================================*/
-
 import { useEffect } from "react"
 
 /**
- * @description Hook to trigger functions on key press
- * @link https://documentation-components-react.vercel.app/helpers/hooks#useKeyPress
- * @argument keyCodes: string | Array<string>
- * @argument callback: () => void
+ * useKeyPress is a hook to trigger a callback function when specific key(s) are pressed, with optional exclusion of modifier keys.
+ *
+ * @function
+ * @param {string | Array<string>} keyCodes - Key code or array of key codes to listen for (e.g., "Enter", ["Control", "KeyS"]).
+ * @param {() => void} callback - Function to call when the key(s) are pressed.
+ * @param {Array<string>} [excludeKeys] - Array of modifier keys to exclude (e.g., ["Command", "Control"]).
+ * @returns {void}
+ * @see https://documentation-components-react.vercel.app/helpers/hooks#useKeyPress
+ *
+ * @example
+ * useKeyPress("Enter", () => console.log("Enter pressed"))
+ * useKeyPress(["Control", "KeyS"], () => save(), ["Shift"])
  */
 export const useKeyPress = (
     keyCodes: string | Array<string>,

package/dist/lib/hooks/useMaxWidth.tsx

@@ -1,11 +1,15 @@
-/*=============================================== useMaxWidth ===============================================*/
-
 import { useState, useEffect } from "react"
 
 /**
- * @description Hook to detect if an element is smaller than a set width
- * @link https://documentation-components-react.vercel.app/helpers/hooks#useMaxWidth
- * @argument width: number
+ * useMaxWidth is a hook to detect if the window width is smaller than or equal to a specified value.
+ *
+ * @function
+ * @param {number} width - The maximum width to check against (in pixels).
+ * @returns {boolean} Returns true if the window width is less than or equal to the specified width, otherwise false.
+ * @see https://documentation-components-react.vercel.app/helpers/hooks#useMaxWidth
+ *
+ * @example
+ * const isMobile = useMaxWidth(768)
  */
 export const useMaxWidth = (width: number): boolean => {
     const [isMax, setIsMax] = useState<boolean>(false)