@evenicanpm/storefront-core 1.0.6 → 1.2.0

package/src/components/_components/icons/up-down.tsx

@@ -1,21 +0,0 @@
-import createSvgIcon from "@mui/material/utils/createSvgIcon";
-
-const UpDown = createSvgIcon(
-  <svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M8.64847 6.88354H3.35158C3.04454 6.88354 2.86173 7.2269 3.03517 7.4812L5.68362 11.3824C5.83596 11.6062 6.16526 11.6062 6.3176 11.3824L8.96605 7.4812C9.13714 7.2269 8.9555 6.88354 8.64847 6.88354Z"
-      fill="currentColor"
-    />
-    <path
-      d="M8.64852 6.76641C8.54188 6.76641 8.43524 6.76641 8.32743 6.76641C8.05204 6.76641 7.77782 6.76641 7.50243 6.76641C7.13329 6.76641 6.76532 6.76641 6.39618 6.76641C6.0036 6.76641 5.61102 6.76641 5.21845 6.76641C4.87274 6.76641 4.52821 6.76641 4.18251 6.76641C3.95517 6.76641 3.72783 6.76641 3.49931 6.76641C3.45361 6.76641 3.40673 6.76641 3.36103 6.76641C3.17705 6.76758 3.00478 6.85898 2.91455 7.02187C2.82197 7.18828 2.83251 7.39102 2.93916 7.54922C2.96728 7.59141 2.9954 7.63242 3.02353 7.67344C3.16064 7.87617 3.29892 8.07891 3.43603 8.28164C3.64111 8.58281 3.84618 8.88516 4.05009 9.18633C4.26923 9.50977 4.48954 9.8332 4.70868 10.1566C4.89384 10.4285 5.07782 10.7016 5.26298 10.9734C5.36259 11.1211 5.46337 11.2687 5.56298 11.4164C5.63798 11.5277 5.73642 11.6168 5.87001 11.6508C6.08446 11.7059 6.2954 11.6145 6.41962 11.4363C6.50282 11.3168 6.58368 11.1949 6.66571 11.0742C6.84032 10.8164 7.01493 10.5598 7.18954 10.302C7.40751 9.97969 7.62665 9.65859 7.84461 9.33633C8.05438 9.02812 8.26415 8.71875 8.47274 8.41055C8.62391 8.18789 8.77508 7.96406 8.92625 7.74141C9.02703 7.59375 9.14891 7.44961 9.14539 7.26094C9.14422 6.98672 8.91922 6.77109 8.64852 6.76641C8.49735 6.76406 8.49735 6.99844 8.64852 7.00078C8.85125 7.0043 8.98133 7.22109 8.88055 7.39687C8.8618 7.42969 8.83836 7.46133 8.81727 7.49297C8.70125 7.66289 8.58641 7.83398 8.47039 8.00391C8.06493 8.60156 7.65946 9.19922 7.25282 9.79687C6.93173 10.2703 6.61063 10.7437 6.28954 11.216C6.2661 11.2512 6.24266 11.2863 6.21805 11.3203C6.12313 11.4504 5.94149 11.4715 5.82548 11.3684C5.79149 11.3379 5.76806 11.2992 5.74227 11.2617C5.69774 11.1961 5.65321 11.1305 5.60868 11.0648C5.2454 10.5305 4.88212 9.99492 4.52001 9.46055C4.13915 8.89922 3.75712 8.33672 3.37626 7.77539C3.29775 7.65937 3.21806 7.54453 3.14072 7.42852C3.05634 7.30195 3.07392 7.14726 3.18642 7.0582C3.2497 7.00898 3.31298 7.00078 3.3915 7.00078C3.86025 7.00078 4.33017 7.00078 4.79892 7.00078C5.55009 7.00078 6.30126 7.00078 7.05243 7.00078C7.55985 7.00078 8.0661 7.00078 8.57352 7.00078C8.5993 7.00078 8.62391 7.00078 8.64969 7.00078C8.79852 7.00078 8.79969 6.76641 8.64852 6.76641ZM8.64852 5.11641H3.35165C3.04462 5.11641 2.86181 4.77305 3.03525 4.51875L5.68368 0.617578C5.83602 0.39375 6.16532 0.39375 6.31766 0.617578L8.9661 4.51875C9.13719 4.77305 8.95555 5.11641 8.64852 5.11641Z"
-      fill="currentColor"
-    />
-    <path
-      d="M8.64832 4.99922C8.28153 4.99922 7.91473 4.99922 7.54676 4.99922C6.80262 4.99922 6.05849 4.99922 5.31552 4.99922C4.73193 4.99922 4.14834 4.99922 3.56592 4.99922C3.50615 4.99922 3.44639 4.99922 3.38662 4.99922C3.30459 4.99922 3.23428 4.98515 3.17803 4.93476C3.07022 4.83633 3.05733 4.6957 3.1417 4.57031C3.16865 4.53047 3.19561 4.49062 3.22256 4.45195C3.55068 3.96914 3.87881 3.48633 4.20576 3.00234C4.60888 2.4082 5.01201 1.81524 5.41513 1.2211C5.52529 1.05821 5.63661 0.895317 5.74677 0.732426C5.77372 0.692583 5.7995 0.650395 5.83583 0.62227C5.95536 0.52852 6.12763 0.55313 6.21903 0.680864C6.30106 0.794536 6.37724 0.912895 6.45575 1.02891C6.62333 1.27618 6.79208 1.52461 6.95966 1.77188C7.37801 2.38828 7.79637 3.00469 8.21473 3.61992C8.37293 3.85312 8.53113 4.08515 8.68816 4.31836C8.7327 4.38281 8.77605 4.44844 8.82059 4.51289C8.8452 4.55039 8.87566 4.58789 8.89441 4.6289C8.96824 4.8 8.84051 4.9957 8.64832 4.99922C8.49715 5.00156 8.49715 5.23593 8.64832 5.23359C8.92371 5.2289 9.15926 5.00039 9.14871 4.71914C9.14519 4.60898 9.10301 4.51289 9.04324 4.425C8.93777 4.26914 8.8323 4.11445 8.72684 3.95859C8.53934 3.68203 8.35184 3.40547 8.16317 3.12891C7.94285 2.80547 7.72371 2.48086 7.5034 2.15742C7.30184 1.85977 7.10028 1.56211 6.89755 1.26563C6.76395 1.06875 6.62919 0.870707 6.49559 0.673833C6.47098 0.637505 6.44638 0.600005 6.42059 0.563677C6.29403 0.382036 6.06903 0.287115 5.85224 0.356255C5.65419 0.418364 5.56044 0.591802 5.45146 0.751176C5.30146 0.971488 5.15263 1.1918 5.00263 1.41328C4.79287 1.72266 4.5831 2.03203 4.37216 2.34141C4.1542 2.6625 3.93623 2.98242 3.71943 3.30352C3.54365 3.5625 3.3667 3.82266 3.19092 4.08164C3.10654 4.20586 3.021 4.3289 2.93779 4.45429C2.82998 4.61601 2.82178 4.82929 2.9249 4.99687C3.01983 5.15039 3.18389 5.23476 3.36318 5.23593C3.50615 5.23711 3.65029 5.23593 3.79326 5.23593C4.08974 5.23593 4.38623 5.23593 4.68271 5.23593C5.06357 5.23593 5.44325 5.23593 5.82411 5.23593C6.21317 5.23593 6.60223 5.23593 6.9913 5.23593C7.31942 5.23593 7.64872 5.23593 7.97684 5.23593C8.17371 5.23593 8.37059 5.23593 8.56746 5.23593C8.59441 5.23593 8.62137 5.23593 8.64832 5.23593C8.79832 5.23359 8.79949 4.99922 8.64832 4.99922Z"
-      fill="currentColor"
-    />
-  </svg>,
-  "UpDown",
-);
-
-export default UpDown;

package/src/components/_components/icons/user.tsx

@@ -1,13 +0,0 @@
-import createSvgIcon from "@mui/material/utils/createSvgIcon";
-
-const User = createSvgIcon(
-  <svg viewBox="0 0 20 23" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M12 13.3718H8.00002C3.95002 13.3718 0.666687 16.6551 0.666687 20.7051C0.666687 21.4414 1.26377 22.0385 2.00002 22.0385H18C18.7363 22.0385 19.3334 21.4414 19.3334 20.7051C19.3334 16.6551 16.05 13.3718 12 13.3718ZM2.70794 20.0385C3.0371 17.4093 5.28335 15.3718 8.00002 15.3718H12C14.715 15.3718 16.9625 17.4114 17.2917 20.0385H2.70794ZM10 11.3718C12.9454 11.3718 15.3334 8.98389 15.3334 6.03847C15.3334 3.09306 12.9454 0.705139 10 0.705139C7.0546 0.705139 4.66669 3.09306 4.66669 6.03847C4.66669 8.98431 7.05419 11.3718 10 11.3718ZM10 2.70514C11.8379 2.70514 13.3334 4.20056 13.3334 6.03847C13.3334 7.87639 11.8379 9.37181 10 9.37181C8.1621 9.37181 6.66669 7.87597 6.66669 6.03847C6.66669 4.20056 8.16252 2.70514 10 2.70514Z"
-      fill="currentColor"
-    />
-  </svg>,
-  "User",
-);
-
-export default User;

package/src/components/_components/icons/user2.tsx

@@ -1,14 +0,0 @@
-import createSvgIcon from "@mui/material/utils/createSvgIcon";
-
-const User2 = createSvgIcon(
-  <svg fill="currentColor" viewBox="0 0 24 24">
-    <path
-      d="M6.65 7.5C6.65 9.21452 7.46395 10.7392 8.72162 11.7184C4.89924 13.0726 2.15 16.7186 2.15 21C2.15 21.47 2.53084 21.85 3 21.85H21C21.4692 21.85 21.85 21.47 21.85 21C21.85 16.7186 19.1008 13.0726 15.2784 11.7184C16.536 10.7392 17.35 9.21452 17.35 7.5C17.35 4.55053 14.9502 2.15 12 2.15C9.04976 2.15 6.65 4.55053 6.65 7.5ZM8.35 7.5C8.35 5.48748 9.98748 3.85 12 3.85C14.0125 3.85 15.65 5.48748 15.65 7.5C15.65 9.51252 14.0125 11.15 12 11.15C9.98748 11.15 8.35 9.51252 8.35 7.5ZM20.106 20.15H3.89395C4.32041 16.0538 7.79275 12.85 12 12.85C16.2072 12.85 19.6796 16.0538 20.106 20.15Z"
-      stroke="#395589"
-      strokeWidth="0.2"
-    />
-  </svg>,
-  "User2",
-);
-
-export default User2;

package/src/components/_components/mini-cart/components/bottom-actions.tsx

@@ -1,27 +0,0 @@
-import Box from "@mui/material/Box";
-import Button from "@mui/material/Button";
-import { useTranslations } from "next-intl";
-
-// ==============================================================
-interface Props {
-  total: string;
-  handleNavigate: (path: string) => () => void;
-}
-// ==============================================================
-
-export default function BottomActions({ total, handleNavigate }: Props) {
-  const t = useTranslations("Cart");
-  return (
-    <Box p={2.5}>
-      <Button
-        fullWidth
-        color="primary"
-        variant="outlined"
-        sx={{ height: 40 }}
-        onClick={handleNavigate("/cart")}
-      >
-        {t("viewCartBtn", { total })}
-      </Button>
-    </Box>
-  );
-}

package/src/components/_components/mini-cart/components/cart-item.tsx

@@ -1,144 +0,0 @@
-"use client";
-import Link from "next/link";
-import Box from "@mui/material/Box";
-import Button from "@mui/material/Button";
-import Avatar from "@mui/material/Avatar";
-import IconButton from "@mui/material/IconButton";
-// MUI ICON COMPONENTS
-import Add from "@mui/icons-material/Add";
-import Close from "@mui/icons-material/Close";
-import Remove from "@mui/icons-material/Remove";
-// GLOBAL CUSTOM COMPONENTS
-import { FlexBox } from "@/components/_components/flex-box/index";
-import { H6, Tiny } from "@/components/_components/Typography";
-import { CartLine } from "@/schemas/cart.schema";
-import { useFormatter, useTranslations } from "next-intl";
-import { CircularProgress } from "@mui/material";
-import { getProductDetailUrl } from "@/lib/build-product-detail-url";
-
-// ==============================================================
-interface Props {
-  item: CartLine;
-  handleCartAmountChange: (cartLine: CartLine) => void;
-  isLineUpdating: boolean;
-  closeDrawer: () => void;
-}
-// ==============================================================
-
-const MiniCartItem: React.FC<Props> = ({
-  closeDrawer,
-  handleCartAmountChange,
-  isLineUpdating,
-  item,
-}) => {
-  const { number } = useFormatter();
-  const t = useTranslations("Cart.CartLine");
-  const currency = (value: number) =>
-    number(value, { style: "currency", currency: "USD" });
-  const quantity = item.Quantity || 0;
-  const onIncreaseClick = () => {
-    const qty = item.Quantity || 0;
-    handleCartAmountChange({ ...item, Quantity: qty + 1 });
-  };
-  return (
-    <FlexBox
-      py={2}
-      px={2.5}
-      key={item.LineId}
-      alignItems="center"
-      borderBottom="1px solid"
-      borderColor="divider"
-    >
-      <FlexBox
-        minWidth={30}
-        minHeight={85}
-        alignItems="center"
-        justifyContent="center"
-      >
-        {!isLineUpdating ? (
-          <FlexBox alignItems="center" flexDirection="column">
-            <Button
-              size="small"
-              color="primary"
-              variant="outlined"
-              onClick={onIncreaseClick}
-              title={t("increaseQuantity")}
-              sx={{ height: 28, width: 28, borderRadius: 50 }}
-            >
-              <Add fontSize="small" />
-            </Button>
-
-            <H6 my="3px">{item.Quantity}</H6>
-
-            <Button
-              data-testid={"decreaseQuantity"}
-              size="small"
-              color="primary"
-              variant="outlined"
-              title={t("decreaseQuantity")}
-              disabled={item.Quantity === 1}
-              onClick={() =>
-                handleCartAmountChange({ ...item, Quantity: quantity - 1 })
-              }
-              sx={{ height: 28, width: 28, borderRadius: 50 }}
-            >
-              <Remove fontSize="small" />
-            </Button>
-          </FlexBox>
-        ) : (
-          <CircularProgress size={"10px"} color={"primary"} />
-        )}
-      </FlexBox>
-
-      <Link
-        href={item.Product ? getProductDetailUrl(item.Product) : ""}
-        onClick={() => closeDrawer()}
-      >
-        <Avatar
-          alt={item.Product?.Name}
-          src={item.Product?.PrimaryImageUrl}
-          sx={{ mx: 1, width: 75, height: 75 }}
-        />
-      </Link>
-
-      <Box
-        flex="1"
-        textOverflow="ellipsis"
-        whiteSpace="nowrap"
-        overflow="hidden"
-      >
-        <Link
-          href={item.Product ? getProductDetailUrl(item.Product) : ""}
-          onClick={() => closeDrawer()}
-        >
-          <H6 ellipsis className="title">
-            {item.Product?.Name}
-          </H6>
-        </Link>
-        <H6 color="grey.600" mt={0.5}>
-          {item?.Product?.Dimensions?.map((d, i) => (
-            <span key={i}>{d?.DimensionValue?.Value + " "}</span>
-          ))}
-        </H6>
-        <Tiny color="grey.600">
-          {currency(item.Price || 0)} x {quantity}
-        </Tiny>
-
-        <H6 color="primary.main" mt={0.5}>
-          {currency(item.TotalAmount || 0)}
-        </H6>
-      </Box>
-
-      <IconButton
-        size="small"
-        onClick={() => handleCartAmountChange({ ...item, Quantity: 0 })}
-        sx={{ marginLeft: 2.5 }}
-        title={t("removeItem")}
-      >
-        <Close fontSize="small" />
-      </IconButton>
-    </FlexBox>
-  );
-};
-
-export default MiniCartItem;

package/src/components/_components/mini-cart/components/empty-view.tsx

@@ -1,29 +0,0 @@
-// GLOBAL CUSTOM COMPONENTS
-import { FlexBox } from "@/components/_components/flex-box/index";
-import { Paragraph } from "@/components/_components/Typography";
-import { useTranslations } from "next-intl";
-
-import { MdShoppingBag as ShoppingBag } from "react-icons/md";
-
-export default function EmptyCartView() {
-  const t = useTranslations("Cart");
-  return (
-    <FlexBox
-      alignItems="center"
-      flexDirection="column"
-      justifyContent="center"
-      height="calc(100% - 74px)"
-    >
-      <ShoppingBag />
-      <Paragraph
-        fontSize={15}
-        mt={2}
-        color="grey.600"
-        textAlign="center"
-        maxWidth={200}
-      >
-        {t("emptyCartMsg")}
-      </Paragraph>
-    </FlexBox>
-  );
-}

package/src/components/_components/mini-cart/components/top-header.tsx

@@ -1,34 +0,0 @@
-import IconButton from "@mui/material/IconButton";
-import Clear from "@mui/icons-material/Clear";
-// LOCAL CUSTOM COMPONENTS
-import { Paragraph } from "@/components/_components/Typography";
-import { FlexBetween, FlexBox } from "@/components/_components/flex-box/index";
-// CUSTOM ICON COMPONENT
-import { MdOutlineShoppingBag as CartBag } from "react-icons/md";
-import { useTranslations } from "next-intl";
-
-// ==============================================================
-interface Props {
-  total: number;
-  toggle: () => void;
-}
-// ==============================================================
-
-export default function TopHeader({ toggle, total }: Props) {
-  const t = useTranslations("Cart");
-  return (
-    <FlexBetween mx={3} height={74}>
-      <FlexBox gap={1} alignItems="center" color="secondary.main">
-        <CartBag color="inherit" />
-
-        <Paragraph lineHeight={0} fontWeight={600}>
-          {t("count", { count: total })}
-        </Paragraph>
-      </FlexBox>
-
-      <IconButton onClick={toggle} title={t("closeMiniCart")}>
-        <Clear />
-      </IconButton>
-    </FlexBetween>
-  );
-}

package/src/components/_components/mini-cart/index.ts

@@ -1 +0,0 @@
-export { default as MiniCart } from "./mini-cart";

package/src/components/_components/mini-cart/mini-cart.tsx

@@ -1,107 +0,0 @@
-"use client";
-
-import { useRouter } from "next/navigation";
-import Box from "@mui/material/Box";
-import Divider from "@mui/material/Divider";
-
-// LOCAL CUSTOM COMPONENTS
-import TopHeader from "./components/top-header";
-import MiniCartItem from "./components/cart-item";
-import EmptyCartView from "./components/empty-view";
-import BottomActions from "./components/bottom-actions";
-// GLOBAL CUSTOM COMPONENT
-import Scrollbar from "@/components/_components/scrollbar/index";
-// CUSTOM UTILS LIBRARY FUNCTION
-// CUSTOM DATA MODEL
-import { Cart, CartLine } from "@/schemas/cart.schema";
-import { useFormatter } from "next-intl";
-import useUpdateCartLines from "@/services/cart/mutations/update-cart-lines";
-import useDeleteCartLine from "@/services/cart/mutations/delete-cart-line";
-
-// =========================================================
-export interface MiniCartProps {
-  cart: Cart;
-  closeDrawer: () => void;
-}
-// =========================================================
-
-export default function MiniCart({ cart, closeDrawer }: MiniCartProps) {
-  const { push } = useRouter();
-  const { number } = useFormatter();
-  const currency = (value: number) =>
-    number(value, { style: "currency", currency: "USD" });
-  const {
-    mutate: updateLine,
-    isPending: isUpdatePending,
-    variables: updateVariables,
-  } = useUpdateCartLines();
-  const {
-    mutate: deleteLine,
-    isPending: isDeletePending,
-    variables: deleteVariables,
-  } = useDeleteCartLine();
-
-  const shouldShowLoadingSpinner = (lineId: string) =>
-    (isUpdatePending || isDeletePending) &&
-    (updateVariables?.cartLine[0].LineId === lineId ||
-      deleteVariables?.cartLine[0].LineId === lineId);
-
-  const handleCartAmountChange = (cartLine: CartLine) => {
-    if (cartLine.Quantity === 0) {
-      deleteLine({
-        cartLine: [cartLine],
-        cartId: cart.Id,
-        version: cart.Version,
-      });
-      return;
-    }
-    updateLine({
-      cartLine: [cartLine],
-      cartId: cart.Id,
-      version: cart.Version,
-    });
-  };
-
-  const handleNavigate = (path: string) => () => {
-    // toggleSidenav();
-    push(path);
-  };
-
-  return (
-    <Box width="100%" minWidth={380}>
-      {/* HEADING SECTION */}
-      <TopHeader toggle={closeDrawer} total={cart?.CartLines.length || 0} />
-
-      <Divider />
-
-      <Box
-        height={`calc(100vh - ${cart?.CartLines.length ? "207px" : "75px"})`}
-      >
-        {/* CART ITEM LIST */}
-        {cart.CartLines.length > 0 ? (
-          <Scrollbar>
-            {cart?.CartLines?.map((item) => (
-              <MiniCartItem
-                item={item}
-                key={item.LineId}
-                handleCartAmountChange={handleCartAmountChange}
-                isLineUpdating={shouldShowLoadingSpinner(item.LineId || "")}
-                closeDrawer={closeDrawer}
-              />
-            ))}
-          </Scrollbar>
-        ) : (
-          <EmptyCartView />
-        )}
-      </Box>
-
-      {/* CART BOTTOM ACTION BUTTONS */}
-      {cart?.CartLines.length > 0 ? (
-        <BottomActions
-          total={currency(cart?.TotalAmount || 0)}
-          handleNavigate={handleNavigate}
-        />
-      ) : null}
-    </Box>
-  );
-}

package/src/components/_components/mobile-navigation/index.ts

@@ -1,3 +0,0 @@
-import MobileNavigationBar from "./mobile-navigation-bar";
-
-export { MobileNavigationBar };

package/src/components/_components/mobile-navigation/mobile-navigation-bar.tsx

@@ -1,73 +0,0 @@
-"use client";
-
-import { Fragment, useContext } from "react";
-import Box from "@mui/material/Box";
-import Badge from "@mui/material/Badge";
-import { Theme } from "@mui/material/styles";
-import useMediaQuery from "@mui/material/useMediaQuery";
-import { useTranslations } from "next-intl";
-// CUSTOM ICON COMPONENTS
-import Home from "@/components/_components/icons/home";
-import User2 from "@/components/_components/icons/user2";
-import CategoryOutlined from "@/components/_components/icons/category-outline";
-import ShoppingBagOutlined from "@/components/_components/icons/shopping-bag-outlined";
-// STYLED COMPONENTS
-import { iconStyle, StyledBox, StyledNavLink, Wrapper } from "./styles/index";
-import getCart from "@/services/cart/queries/get-cart";
-import { NavContext } from "@/components/NavProvider/index";
-
-const MENU_LIST = [
-  { title: "home", Icon: Home, href: "/" },
-  { title: "category", Icon: CategoryOutlined },
-  { title: "cart", Icon: ShoppingBagOutlined, href: "/cart" },
-  { title: "account", Icon: User2, href: "/account/profile" },
-];
-
-export default function MobileNavigationBar2() {
-  const DOWN_900 = useMediaQuery((theme: Theme) => theme.breakpoints.down(900));
-
-  const t = useTranslations("Navigation.Mobile");
-
-  const { toggleMobileSideNav } = useContext(NavContext);
-
-  const { data: cart } = getCart.useData();
-
-  if (DOWN_900) {
-    return (
-      <Box position="relative" display="flex" flexDirection="column">
-        <Wrapper>
-          {MENU_LIST.map(({ Icon, title, href }) => {
-            // Link inner content
-            const ICON = <Icon sx={iconStyle} fontSize="small" />;
-
-            const CONTENT = (
-              <Fragment>
-                {title === "cart" ? (
-                  <Badge badgeContent={cart?.TotalItems || 0} color="primary">
-                    {ICON}
-                  </Badge>
-                ) : (
-                  ICON
-                )}
-
-                {t(title)}
-              </Fragment>
-            );
-
-            return href ? (
-              <StyledNavLink key={title} href={href}>
-                {CONTENT}
-              </StyledNavLink>
-            ) : (
-              <StyledBox key={title} onClick={toggleMobileSideNav}>
-                {CONTENT}
-              </StyledBox>
-            );
-          })}
-        </Wrapper>
-      </Box>
-    );
-  }
-
-  return null;
-}

package/src/components/_components/mobile-navigation/styles/index.ts

@@ -1,63 +0,0 @@
-import Drawer from "@mui/material/Drawer";
-import styled from "@mui/material/styles/styled";
-import { NavLink } from "@/components/_components/nav-link/index";
-import { layoutConstant } from "@/components/_components/utils/constants";
-
-// STYLED COMPONENTS
-const Wrapper = styled("div")(({ theme }) => ({
-  left: 0,
-  right: 0,
-  bottom: 0,
-  display: "none",
-  position: "fixed",
-  justifyContent: "space-around",
-  zIndex: theme.zIndex.drawer + 1,
-  height: layoutConstant.mobileNavHeight,
-  backgroundColor: theme.palette.background.paper,
-  boxShadow: "0px 1px 4px 3px rgba(0, 0, 0, 0.1)",
-  "@media only screen and (max-width: 900px)": {
-    display: "flex",
-    width: "100vw",
-  },
-}));
-
-const StyledNavLink = styled(NavLink)({
-  flex: "1 1 0",
-  display: "flex",
-  fontSize: "13px",
-  alignItems: "center",
-  flexDirection: "column",
-  justifyContent: "center",
-});
-
-const StyledBox = styled("div")(({ theme }) => ({
-  flex: "1 1 0",
-  display: "flex",
-  fontSize: "13px",
-  cursor: "pointer",
-  alignItems: "center",
-  flexDirection: "column",
-  justifyContent: "center",
-  transition: "color 150ms ease-in-out",
-  "&:hover": { color: `${theme.palette.primary.main} !important` },
-}));
-
-const StyledDrawer = styled(Drawer)(({ theme }) => ({
-  width: 250,
-  zIndex: 1501,
-  flexShrink: 0,
-  "& .MuiDrawer-paper": {
-    width: 250,
-    boxSizing: "border-box",
-    boxShadow: theme.shadows[2],
-  },
-}));
-
-const iconStyle = {
-  display: "flex",
-  marginBottom: "4px",
-  alignItems: "center",
-  justifyContent: "center",
-};
-
-export { Wrapper, StyledBox, StyledNavLink, StyledDrawer, iconStyle };

package/src/components/_components/nav-link/index.ts

@@ -1,5 +0,0 @@
-import NavLink from "./nav-link";
-import NavLink2 from "./nav-link-2";
-import NavLink3 from "./nav-link-3";
-
-export { NavLink, NavLink2, NavLink3 };

package/src/components/_components/nav-link/nav-link-2.tsx

@@ -1,32 +0,0 @@
-import Link from "next/link";
-// GLOBAL CUSTOM COMPONENT
-import { Small } from "@/components/_components/Typography";
-
-// ==============================================================
-interface NavLinkProps {
-  url: string;
-  title: string;
-  color?: string;
-  borderColor?: string;
-}
-// ==============================================================
-
-export default function NavLink2({
-  url,
-  color,
-  title = "SHOP NOW",
-  borderColor = "primary.600",
-}: NavLinkProps) {
-  return (
-    <Link href={url}>
-      <Small
-        fontWeight="700"
-        borderBottom={2}
-        color={color}
-        borderColor={borderColor}
-      >
-        {title}
-      </Small>
-    </Link>
-  );
-}

package/src/components/_components/nav-link/nav-link-3.tsx

@@ -1,67 +0,0 @@
-"use client";
-
-import Link from "next/link";
-// MUI ICON COMPONENT
-import ArrowForward from "@mui/icons-material/ArrowForward";
-// GLOBAL CUSTOM COMPONENTS
-import { Span } from "@/components/_components/Typography";
-
-//   ==========================================
-interface Props {
-  href: string;
-  text: string;
-  color?: string;
-  hoverColor?: string;
-}
-//   ==========================================
-
-export default function NavLink3({
-  href,
-  text,
-  color = "text.primary",
-  hoverColor = "primary.main",
-  ...props
-}: Props) {
-  return (
-    <Link href={href}>
-      <Span
-        color={color}
-        sx={{
-          color,
-          gap: 1,
-          lineHeight: 1,
-          fontWeight: 600,
-          alignItems: "center",
-          position: "relative",
-          paddingBottom: "4px",
-          display: "inline-flex",
-          ":after": {
-            left: 0,
-            bottom: 0,
-            width: "0%",
-            content: "''",
-            height: "2px",
-            transition: "0.3s",
-            position: "absolute",
-            backgroundColor: color,
-          },
-          ":hover": {
-            color: hoverColor,
-            "&::after": { width: "100%", backgroundColor: hoverColor },
-          },
-        }}
-        {...props}
-      >
-        {text}{" "}
-        <ArrowForward
-          sx={{
-            fontSize: 14,
-            flexShrink: 0,
-            transform: ({ direction }) =>
-              `rotate(${direction === "rtl" ? "180deg" : "0deg"})`,
-          }}
-        />
-      </Span>
-    </Link>
-  );
-}