@lmnto/h-mall-shared 1.0.1

package/shared/components/SubscriptionPurchaseDialogComponent.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import {
+  Dialog,
+  DialogBody,
+  DialogFooter,
+  DialogHeader,
+} from "@material-tailwind/react";
+import React, { useCallback, useEffect } from "react";
+
+import subscriptionIcon from "../../public/img/subscriptionIcon.png";
+import { ROUTES } from "../constants/routes";
+import useCustomRouter from "../hooks/useCustomRouter";
+import { _useScopedI18n } from "../i18n/client";
+import ButtonCustom from "./Button";
+import CustomNextImage from "./CustomNextImage";
+
+type SubscriptionPurchaseDialogComponentProps = {
+  showSubscriptionDialog: boolean;
+  onClose: () => void;
+  description?: string;
+};
+
+export default function SubscriptionPurchaseDialogComponent({
+  showSubscriptionDialog,
+  onClose,
+  description,
+}: SubscriptionPurchaseDialogComponentProps) {
+  //
+  const scopeT = _useScopedI18n("sharedComponents.buySubscriptionComponent");
+
+  const [open, setOpen] = React.useState(showSubscriptionDialog);
+  const { push } = useCustomRouter();
+
+  useEffect(() => {
+    setOpen(showSubscriptionDialog);
+  }, [showSubscriptionDialog]);
+
+  const handleClose = () => {
+    setOpen(false);
+    onClose();
+  };
+
+  const handleBuySubscription = useCallback(() => {
+    // redirect to subscription page
+    return push(`${ROUTES.dashboard.products}?category=subscription`);
+  }, [push]);
+
+  return (
+    <>
+      <Dialog
+        open={open}
+        handler={handleClose}
+        size="xs"
+        className="md:!max-w-[500px] md:!min-w-[500px] py-4 px-0 md:p-7  flex flex-col items-center justify-center"
+      >
+        <CustomNextImage
+          src={subscriptionIcon.src}
+          alt="SessionIcon"
+          width={80}
+          height={80}
+        />
+        <div className="text-center">
+          <DialogHeader className="text-lg md:text-xl font-semibold text-black-500 pb-2">
+            {scopeT("header")}
+          </DialogHeader>
+          <div className="w-24 h-1 mx-auto rounded-full header-underline"></div>
+        </div>
+
+        <DialogBody className="text-sm  md:text-base text-slate-400 font-medium text-center">
+          {description ?? scopeT("description")}
+        </DialogBody>
+        <DialogFooter className="pb-0">
+          <ButtonCustom icon={undefined} onClick={handleBuySubscription}>
+            {scopeT(`redirectBtn`)}
+          </ButtonCustom>
+        </DialogFooter>
+      </Dialog>
+    </>
+  );
+}

package/shared/components/TableComponent.tsx

@@ -0,0 +1,144 @@
+import {
+  IconButton,
+  List,
+  ListItem,
+  ListItemPrefix,
+  Popover,
+  PopoverContent,
+  PopoverHandler,
+  Typography,
+} from "@material-tailwind/react";
+import React, { useCallback } from "react";
+import { BsChevronExpand } from "react-icons/bs";
+import { HiDotsHorizontal } from "react-icons/hi";
+
+import {
+  ITableComponentHeadersType,
+  ITableComponentItemsType,
+  ResultPaginate,
+} from "../types";
+
+// import { TablePaginationComponent } from './TablePaginationComponent';
+
+export type TableComponentProps = {
+  children?: React.ReactNode;
+  headers: Array<ITableComponentHeadersType>;
+  items?: Array<ITableComponentItemsType>;
+  pagination?: ResultPaginate<any>;
+  onSort: (key: string) => void;
+};
+
+export default function TableComponent({
+  children,
+  headers,
+  items,
+  // pagination,
+  onSort,
+}: TableComponentProps) {
+  //
+  const classes = useCallback((isLast: boolean) => {
+    return isLast ? "p-4" : "p-4 border-b border-blue-gray-50";
+  }, []);
+
+  return (
+    <>
+      <table className="mt-4 w-full min-w-max table-auto text-left">
+        <thead>
+          <tr>
+            {headers.map(({ name, key, canSort }, _index) => (
+              <th
+                key={_index}
+                className="cursor-pointer border-y border-blue-gray-100 bg-blue-gray-50/50 p-4 transition-colors hover:bg-blue-gray-50"
+              >
+                <Typography
+                  variant="small"
+                  color="blue-gray"
+                  className="flex items-center gap-2 font-normal leading-none opacity-70"
+                  onClick={() => (canSort ? onSort(key) : {})}
+                >
+                  {name}{" "}
+                  {canSort && (
+                    <BsChevronExpand strokeWidth={0.1} className="size-3" />
+                  )}
+                </Typography>
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {items && items?.length > 0
+            ? items.map((item, index) => (
+                <tr key={index}>
+                  {item.lineItems.map((lineItem, lineIndex) => (
+                    <td key={lineIndex} className={classes(item.isLast)}>
+                      {lineItem.key == "actions" ? (
+                        <>
+                          <Popover placement="bottom-end">
+                            <PopoverHandler>
+                              <IconButton
+                                variant="outlined"
+                                className="p-0 ml-2 rounded-full bg-gray-100/40 border-none mt-[-8px]"
+                              >
+                                <HiDotsHorizontal className="size-4" />
+                              </IconButton>
+                            </PopoverHandler>
+                            <PopoverContent className="p-1 py-2">
+                              <List className="py-0">
+                                {lineItem.value?.map(
+                                  (
+                                    {
+                                      name: actionName,
+                                      icon,
+                                      isActive: actionActive,
+                                      callback,
+                                    },
+                                    i,
+                                  ) =>
+                                    actionActive && (
+                                      <ListItem
+                                        key={i}
+                                        onClick={callback}
+                                        className="group rounded-lg py-1.5 text-sm font-normal text-blue-gray-700 hover:bg-purple-100 hover:text-purple-700 focus:bg-purple-100 focus:text-purple-700"
+                                      >
+                                        <ListItemPrefix>{icon}</ListItemPrefix>
+                                        {actionName}
+                                      </ListItem>
+                                    ),
+                                )}
+                              </List>
+                            </PopoverContent>
+                          </Popover>
+                        </>
+                      ) : (
+                        <>
+                          {typeof lineItem.value == "string" ? (
+                            <Typography
+                              variant="small"
+                              color="blue-gray"
+                              className="font-normal"
+                            >
+                              {lineItem.value}
+                            </Typography>
+                          ) : (
+                            lineItem.value
+                          )}
+                        </>
+                      )}
+                    </td>
+                  ))}
+                </tr>
+              ))
+            : children}
+        </tbody>
+      </table>
+
+      {/* {pagination && (
+                <TablePaginationComponent
+                    totalPage={pagination.total}
+                    currentPage={pagination.page}
+                    limit={pagination.limit}
+                />
+            )} */}
+    </>
+  );
+}

package/shared/components/TablePaginationComponent.tsx

@@ -0,0 +1,151 @@
+import { ArrowLeftIcon, ArrowRightIcon } from "@heroicons/react/24/outline";
+import { Button, IconButton } from "@material-tailwind/react";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import React, { useCallback, useEffect, useMemo } from "react";
+
+export type TablePaginationComponentProps = {
+  totalPage: number;
+  total?: number;
+  currentPage: number;
+  limit: number;
+  fetchOrders: ({
+    page,
+    limit,
+    keyword,
+  }: {
+    page: number;
+    limit: number;
+    keyword?: string;
+  }) => Promise<any>;
+};
+
+const MAX_VISIBLE_PAGES = 6;
+
+export function TablePaginationComponent({
+  totalPage,
+  total,
+  limit,
+  fetchOrders,
+}: TablePaginationComponentProps) {
+  const searchParams = useSearchParams();
+  const [active, setActive] = React.useState(1);
+  const { push } = useRouter();
+  const pathname = usePathname();
+
+  useEffect(() => {
+    const page = parseInt(`${searchParams.get("page") ?? 1}`);
+    (async () => await setActive(page))();
+  }, [searchParams, setActive]);
+
+  // Remove the separate useEffect for fetching and handle it in the pagination actions
+  const handlePaginate = useCallback(
+    async (page: number) => {
+      push(`${pathname}?page=${page}`);
+      await fetchOrders({ page, limit });
+    },
+    [pathname, push, fetchOrders, limit],
+  );
+
+  const getItemProps = useCallback(
+    (index: number) =>
+      ({
+        variant: active === index ? "filled" : "text",
+        color: "gray",
+        onClick: () => handlePaginate(index),
+      }) as any,
+    [active, handlePaginate],
+  );
+
+  const next = useCallback(async () => {
+    if (active === totalPage) return;
+    const nextPage = active + 1;
+    setActive(nextPage);
+    await handlePaginate(nextPage);
+  }, [active, totalPage, handlePaginate]);
+
+  const prev = useCallback(async () => {
+    if (active === 1) return;
+    const prevPage = active - 1;
+    setActive(prevPage);
+    await handlePaginate(prevPage);
+  }, [active, handlePaginate]);
+
+  const renderBtn = useMemo(() => {
+    const totalPages = total ? Math.ceil(total / limit) : totalPage;
+    const startPage = Math.max(
+      1,
+      (active == totalPages ? active - 1 : active) -
+        Math.floor(MAX_VISIBLE_PAGES / 2),
+    );
+    const endPage = Math.min(totalPages, startPage - 1 + MAX_VISIBLE_PAGES - 1);
+
+    const items = [];
+
+    // Always show the first page
+    items.push(
+      <IconButton key={1} {...getItemProps(1)}>
+        1
+      </IconButton>,
+    );
+
+    if (active != 1) {
+      // Show ellipsis if necessary
+      if (startPage > 2) {
+        items.push(<span key="ellipsis">...</span>);
+      }
+    }
+
+    // Render the visible page numbers
+    for (let i = startPage + 1; i <= endPage; i++) {
+      if (i == totalPages) continue;
+      items.push(
+        <IconButton key={i} {...getItemProps(i)}>
+          {i}
+        </IconButton>,
+      );
+    }
+
+    if (active != totalPages) {
+      // Show ellipsis if necessary
+      if (endPage < totalPages - 1) {
+        items.push(<span key="ellipsis">...</span>);
+      }
+    }
+
+    if (totalPages > 1) {
+      // Always show the last page
+      items.push(
+        <IconButton key={totalPages} {...getItemProps(totalPages)}>
+          {totalPages}
+        </IconButton>,
+      );
+    }
+
+    return items;
+  }, [total, totalPage, limit, active, getItemProps]);
+
+  return (
+    <div className="w-full overflow-x-auto overflow-y-hidden py-2">
+      <div className="flex items-center gap-4 my-5">
+        <Button
+          variant="text"
+          className="flex items-center gap-2"
+          onClick={prev}
+          disabled={active === 1}
+        >
+          <ArrowLeftIcon strokeWidth={2} className="h-4 w-4" /> Previous
+        </Button>
+        <div className="flex items-center gap-2">{renderBtn}</div>
+        <Button
+          variant="text"
+          className="flex items-center gap-2"
+          onClick={next}
+          disabled={active === totalPage}
+        >
+          Next
+          <ArrowRightIcon strokeWidth={2} className="h-4 w-4" />
+        </Button>
+      </div>
+    </div>
+  );
+}

package/shared/components/aleta/AletaManagerComponent.tsx

@@ -0,0 +1,52 @@
+"use client";
+import React, { useEffect, useMemo, useState } from "react";
+
+import { KYC_STATUS } from "../../constants/app";
+import { useUserStore } from "../../stores/userStore";
+import { KycStatus } from "../../types/user";
+import { KycPendingStatus } from "./KycPendingStatus";
+import { KycRejectedStatus } from "./KycRejectedStatus";
+import { KycRequiredStatus } from "./KycRequiredStatus";
+import { SubscriptionRequiredStatus } from "./SubscriptionRequiredStatus";
+
+type AletaManagerComponentProps = {
+  children: any;
+};
+
+export function AletaManagerComponent({
+  children,
+}: AletaManagerComponentProps) {
+  const [kycStatus, setKycStatus] = useState<KycStatus | null>(null);
+
+  const { user } = useUserStore();
+
+  // Mock API call to get KYC status
+  useEffect(() => {
+    if (user && user?.pgUser?.aletaState) {
+      (async () => await setKycStatus(user?.pgUser?.aletaState))();
+    }
+  }, [user]);
+
+  // Use a mapping object instead of switch statement for cleaner code
+  const statusComponentMap = useMemo(
+    () => ({
+      [KYC_STATUS.SUBSCRIPTION_REQUIRED]: <SubscriptionRequiredStatus />,
+      [KYC_STATUS.KYC_REQUIRED]: <KycRequiredStatus />,
+      [KYC_STATUS.KYC_PENDING]: <KycPendingStatus />,
+      [KYC_STATUS.KYC_REJECTED]: <KycRejectedStatus />,
+      [KYC_STATUS.ACTIVE]: children,
+    }),
+    [children],
+  );
+
+  // Determine what content to render based on loading, error, and status
+  const content = useMemo(() => {
+    return kycStatus ? (
+      statusComponentMap[kycStatus]
+    ) : (
+      <div>Unknown status</div>
+    );
+  }, [kycStatus, statusComponentMap]);
+
+  return <div>{content}</div>;
+}

package/shared/components/aleta/KycPendingStatus.tsx

@@ -0,0 +1,33 @@
+import { Typography } from "@material-tailwind/react";
+import React from "react";
+
+import pendingIcon from "../../../public/img/aleta-payment-pending.png";
+import CustomNextImage from "../CustomNextImage";
+
+export function KycPendingStatus() {
+  return (
+    <>
+      <div className="flex justify-center md:px-5 py-10  rounded-[12px] bg-[#F5F5F3] text-center">
+        <div>
+          <div className="flex justify-center">
+            <CustomNextImage
+              className="mb-[40px]"
+              width={72}
+              height={57}
+              src={pendingIcon.src}
+              alt={"kyc require"}
+            />
+          </div>
+          <Typography
+            variant="paragraph"
+            className="max-w-[400px] mb-[70px] font-semibold"
+          >
+            {`Yay! We already have your KYC details.
+                        Please wait while we create your wallet once the
+                        verification is complete.`}
+          </Typography>
+        </div>
+      </div>
+    </>
+  );
+}

package/shared/components/aleta/KycRejectedStatus.tsx

@@ -0,0 +1,53 @@
+import { Typography } from "@material-tailwind/react";
+import React from "react";
+
+import kycRequire from "../../../public/img/aleta-payment-kyc-require.png";
+import rejectedIcon from "../../../public/img/aleta-payment-rejected.png";
+import { ROUTES } from "../../constants/routes";
+import useCustomRouter from "../../hooks/useCustomRouter";
+import ButtonCustom from "../Button";
+import CustomNextImage from "../CustomNextImage";
+
+export function KycRejectedStatus() {
+  const { push } = useCustomRouter();
+  return (
+    <>
+      <div className="flex justify-center md:px-5 py-10  rounded-[12px] bg-[#F5F5F3] text-center">
+        <div>
+          <div className="flex justify-center">
+            <CustomNextImage
+              className="mb-[40px]"
+              width={72}
+              height={57}
+              src={rejectedIcon.src}
+              alt={"kyc require"}
+            />
+            <CustomNextImage
+              className="mb-[40px]"
+              width={46}
+              height={55}
+              src={kycRequire.src}
+              alt={"kyc Require"}
+            />
+          </div>
+          <Typography
+            variant="paragraph"
+            className="max-w-[400px] mb-[70px] font-semibold text-[#FF2727]"
+          >
+            {`Sorry, your KYC was rejected.`}
+          </Typography>
+          <div className="flex justify-center">
+            <ButtonCustom
+              icon={undefined}
+              onClick={() => {
+                push(ROUTES.aleta.aletaStatus);
+              }}
+            >
+              Visit KYC page
+            </ButtonCustom>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

package/shared/components/aleta/KycRequiredStatus.tsx

@@ -0,0 +1,53 @@
+import { Typography } from "@material-tailwind/react";
+import React from "react";
+
+import kycRequire from "../../../public/img/aleta-payment-kyc-require.png";
+import rejectedIcon from "../../../public/img/aleta-payment-rejected.png";
+import { ROUTES } from "../../constants/routes";
+import useCustomRouter from "../../hooks/useCustomRouter";
+import ButtonCustom from "../Button";
+import CustomNextImage from "../CustomNextImage";
+
+export function KycRequiredStatus() {
+  const { push } = useCustomRouter();
+  return (
+    <>
+      <div className="flex justify-center md:px-5 py-10  rounded-[12px] bg-[#F5F5F3] text-center">
+        <div>
+          <div className="flex justify-center">
+            <CustomNextImage
+              className="mb-[40px]"
+              width={72}
+              height={57}
+              src={rejectedIcon.src}
+              alt={"kyc require"}
+            />
+            <CustomNextImage
+              className="mb-[40px]"
+              width={46}
+              height={55}
+              src={kycRequire.src}
+              alt={"kyc Require"}
+            />
+          </div>
+          <Typography
+            variant="paragraph"
+            className="max-w-[400px] mb-[70px] font-semibold text-[#FF2727]"
+          >
+            {`Please visit the Aleta KYC page to initiate the KYC application.`}
+          </Typography>
+          <div className="flex justify-center">
+            <ButtonCustom
+              icon={undefined}
+              onClick={() => {
+                push(ROUTES.aleta.aletaStatus);
+              }}
+            >
+              Go to Aleta Pay
+            </ButtonCustom>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

package/shared/components/aleta/SubscriptionRequiredStatus.tsx

@@ -0,0 +1,45 @@
+import { Typography } from "@material-tailwind/react";
+import React from "react";
+
+import subscriptionRequired from "../../../public/img/aleta-payment-subscription-required.png";
+import { ROUTES } from "../../constants/routes";
+import useCustomRouter from "../../hooks/useCustomRouter";
+import ButtonCustom from "../Button";
+import CustomNextImage from "../CustomNextImage";
+
+export function SubscriptionRequiredStatus() {
+  const { push } = useCustomRouter();
+  return (
+    <>
+      <div className="flex justify-center md:px-5 py-10  rounded-[12px] bg-[#F5F5F3] text-center">
+        <div>
+          <div className="flex justify-center">
+            <CustomNextImage
+              className="mb-[40px]"
+              width={72}
+              height={57}
+              src={subscriptionRequired.src}
+              alt={"subscription require"}
+            />
+          </div>
+          <Typography
+            variant="paragraph"
+            className="max-w-[400px] mb-[70px] font-semibold"
+          >
+            {`We’re excited to get your Aleta wallet ready. Let's first quickly setup your wallet.`}
+          </Typography>
+          <div className="flex justify-center">
+            <ButtonCustom
+              icon={undefined}
+              onClick={() => {
+                push(ROUTES.aleta.aletaFee);
+              }}
+            >
+              Go to Setup
+            </ButtonCustom>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

package/shared/components/icons/AletaWalletIcon.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+export function AletaWalletIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="22"
+      height="18"
+      viewBox="0 0 22 18"
+      fill="none"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.16146 1.0032e-06H15.8385C16.3657 -1.89968e-05 16.8205 -2.8966e-05 17.195 0.030571C17.5904 0.062871 17.9836 0.134191 18.362 0.326981C18.9265 0.614601 19.3854 1.07354 19.673 1.63803C19.8658 2.01641 19.9371 2.40963 19.9694 2.80497C20 3.17954 20 3.6343 20 4.16144V6.00821C20.0476 6.01046 20.0938 6.01331 20.1382 6.01695C20.3668 6.03562 20.6366 6.07969 20.908 6.21799C21.2843 6.40974 21.5903 6.7157 21.782 7.092C21.9203 7.3634 21.9644 7.6332 21.9831 7.8618C22.0001 8.0699 22 8.3157 22 8.5681V9.4319C22 9.6843 22.0001 9.9301 21.9831 10.1382C21.9644 10.3668 21.9203 10.6366 21.782 10.908C21.5903 11.2843 21.2843 11.5903 20.908 11.782C20.6366 11.9203 20.3668 11.9644 20.1382 11.9831C20.0938 11.9867 20.0476 11.9895 20 11.9918V13.8386C20 14.3657 20 14.8205 19.9694 15.195C19.9371 15.5904 19.8658 15.9836 19.673 16.362C19.3854 16.9265 18.9265 17.3854 18.362 17.673C17.9836 17.8658 17.5904 17.9371 17.195 17.9694C16.8205 18 16.3657 18 15.8386 18H4.16144C3.6343 18 3.17954 18 2.80497 17.9694C2.40963 17.9371 2.01641 17.8658 1.63803 17.673C1.07354 17.3854 0.614601 16.9265 0.326981 16.362C0.134191 15.9836 0.0628708 15.5904 0.0305708 15.195C-3.21716e-05 14.8205 -1.62006e-05 14.3657 7.99441e-07 13.8385V4.16146C-1.62006e-05 3.63431 -3.21716e-05 3.17955 0.0305708 2.80497C0.0628708 2.40963 0.134191 2.01641 0.326981 1.63803C0.614601 1.07354 1.07354 0.614601 1.63803 0.326981C2.01641 0.134191 2.40963 0.062871 2.80497 0.030571C3.17955 -2.8966e-05 3.63431 -1.89968e-05 4.16146 1.0032e-06ZM18 12H14.5681C14.3157 12 14.0699 12.0001 13.8618 11.9831C13.6332 11.9644 13.3634 11.9203 13.092 11.782C12.7157 11.5903 12.4097 11.2843 12.218 10.908C12.0797 10.6366 12.0356 10.3668 12.0169 10.1382C11.9999 9.9301 12 9.6843 12 9.4319V8.5681C12 8.3157 11.9999 8.0699 12.0169 7.8618C12.0356 7.6332 12.0797 7.3634 12.218 7.092C12.4097 6.7157 12.7157 6.40974 13.092 6.21799C13.3634 6.07969 13.6332 6.03562 13.8618 6.01695C14.0699 5.99994 14.3157 5.99997 14.5681 6H18V4.2C18 3.62345 17.9992 3.25118 17.9761 2.96784C17.9539 2.69617 17.9162 2.59546 17.891 2.54601C17.7951 2.35785 17.6422 2.20487 17.454 2.109C17.4045 2.0838 17.3038 2.04612 17.0322 2.02393C16.7488 2.00078 16.3766 2 15.8 2H4.2C3.62345 2 3.25117 2.00078 2.96784 2.02393C2.69617 2.04612 2.59546 2.0838 2.54601 2.109C2.35785 2.20487 2.20487 2.35785 2.109 2.54601C2.0838 2.59546 2.04612 2.69617 2.02393 2.96784C2.00078 3.25117 2 3.62345 2 4.2V13.8C2 14.3766 2.00078 14.7488 2.02393 15.0322C2.04612 15.3038 2.0838 15.4045 2.109 15.454C2.20487 15.6422 2.35785 15.7951 2.54601 15.891C2.59546 15.9162 2.69617 15.9539 2.96784 15.9761C3.25117 15.9992 3.62345 16 4.2 16H15.8C16.3766 16 16.7488 15.9992 17.0322 15.9761C17.3038 15.9539 17.4045 15.9162 17.454 15.891C17.6422 15.7951 17.7951 15.6422 17.891 15.454C17.9162 15.4046 17.9539 15.3038 17.9761 15.0322C17.9992 14.7488 18 14.3766 18 13.8V12ZM14.0115 8.0114C14.0111 8.0156 14.0107 8.02 14.0103 8.0246C14.0008 8.1412 14 8.3035 14 8.6V9.4C14 9.6965 14.0008 9.8588 14.0103 9.9754C14.0107 9.98 14.0111 9.9844 14.0115 9.9886C14.0156 9.9889 14.02 9.9893 14.0246 9.9897C14.1412 9.9992 14.3035 10 14.6 10H19.4C19.6965 10 19.8588 9.9992 19.9754 9.9897C19.98 9.9893 19.9844 9.9889 19.9886 9.9885C19.9889 9.9844 19.9893 9.98 19.9897 9.9754C19.9992 9.8588 20 9.6965 20 9.4V8.6C20 8.3035 19.9992 8.1412 19.9897 8.0246C19.9893 8.02 19.9889 8.0156 19.9885 8.0114C19.9844 8.0111 19.98 8.0107 19.9754 8.0103C19.8588 8.0008 19.6965 8 19.4 8H14.6C14.3035 8 14.1412 8.0008 14.0246 8.0103C14.02 8.0107 14.0156 8.0111 14.0115 8.0114Z"
+        fill="black"
+      />
+    </svg>
+  );
+}