chore: fix code style issues (#4857)

2026-08-04 02:49:57 +08:00 · 2023-11-08 13:51:08 +08:00
parent 83472cc682
commit b7edaab387
30 changed files with 423 additions and 471 deletions
@@ -48,14 +48,12 @@ export const UI = {
    );

    return (
-      <>
-        <PageDetailEditor
-          pageId={currentPageId}
-          onInit={useCallback(async page => initEmptyPage(page), [])}
-          onLoad={onLoad}
-          workspace={workspace.blockSuiteWorkspace}
-        />
-      </>
+      <PageDetailEditor
+        pageId={currentPageId}
+        onInit={useCallback(async page => initEmptyPage(page), [])}
+        onLoad={onLoad}
+        workspace={workspace.blockSuiteWorkspace}
+      />
    );
  },
  NewSettingsDetail: ({
@@ -92,14 +92,12 @@ export const LocalAdapter: WorkspaceAdapter<WorkspaceFlavour.LOCAL> = {
        throw new PageNotFoundError(workspace, currentPageId);
      }
      return (
-        <>
-          <PageDetailEditor
-            pageId={currentPageId}
-            onInit={useCallback(async page => initEmptyPage(page), [])}
-            onLoad={onLoadEditor}
-            workspace={workspace}
-          />
-        </>
+        <PageDetailEditor
+          pageId={currentPageId}
+          onInit={useCallback(async page => initEmptyPage(page), [])}
+          onLoad={onLoadEditor}
+          workspace={workspace}
+        />
      );
    },
    NewSettingsDetail: ({
@@ -16,14 +16,12 @@ export const UI = {
      throw new PageNotFoundError(workspace.blockSuiteWorkspace, currentPageId);
    }
    return (
-      <>
-        <PageDetailEditor
-          pageId={currentPageId}
-          onInit={useCallback(async page => initEmptyPage(page), [])}
-          onLoad={onLoadEditor}
-          workspace={workspace.blockSuiteWorkspace}
-        />
-      </>
+      <PageDetailEditor
+        pageId={currentPageId}
+        onInit={useCallback(async page => initEmptyPage(page), [])}
+        onLoad={onLoadEditor}
+        workspace={workspace.blockSuiteWorkspace}
+      />
    );
  },
  NewSettingsDetail: () => {
@@ -43,7 +43,7 @@ export const Captcha = () => {
  const [response] = useAtom(responseAtom);

  if (!runtimeConfig.enableCaptcha) {
-    return <></>;
+    return null;
  }

  if (environment.isDesktop) {
@@ -2,7 +2,7 @@ import { SubscriptionPlan } from '@affine/graphql';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import Tooltip from '@toeverything/components/tooltip';
 import { useSetAtom } from 'jotai';
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import { withErrorBoundary } from 'react-error-boundary';

 import { openSettingModalAtom } from '../../../atoms';
@@ -39,5 +39,5 @@ const UserPlanButtonWithData = () => {

 // If fetch user data failed, just render empty.
 export const UserPlanButton = withErrorBoundary(UserPlanButtonWithData, {
-  fallbackRender: () => <React.Fragment />,
+  fallbackRender: () => null,
 });
@@ -86,16 +86,14 @@ export const ExportPanel = ({ workspace }: ExportPanelProps) => {
  }, [pushNotification, syncing, t, workspace, workspaceId]);

  return (
-    <>
-      <SettingRow name={t['Export']()} desc={t['Export Description']()}>
-        <Button
-          data-testid="export-affine-backup"
-          onClick={onExport}
-          disabled={syncing}
-        >
-          {t['Export']()}
-        </Button>
-      </SettingRow>
-    </>
+    <SettingRow name={t['Export']()} desc={t['Export Description']()}>
+      <Button
+        data-testid="export-affine-backup"
+        onClick={onExport}
+        disabled={syncing}
+      >
+        {t['Export']()}
+      </Button>
+    </SettingRow>
  );
 };
@@ -121,48 +121,46 @@ export const AvatarAndName = () => {
  }, [allowUpdate, input, user]);

  return (
-    <>
-      <SettingRow
-        name={t['com.affine.settings.profile']()}
-        desc={t['com.affine.settings.profile.message']()}
-        spreadCol={false}
-      >
-        <FlexWrapper style={{ margin: '12px 0 24px 0' }} alignItems="center">
-          <Suspense>
-            <UserAvatar />
-          </Suspense>
+    <SettingRow
+      name={t['com.affine.settings.profile']()}
+      desc={t['com.affine.settings.profile.message']()}
+      spreadCol={false}
+    >
+      <FlexWrapper style={{ margin: '12px 0 24px 0' }} alignItems="center">
+        <Suspense>
+          <UserAvatar />
+        </Suspense>

-          <div className={style.profileInputWrapper}>
-            <label>{t['com.affine.settings.profile.name']()}</label>
-            <FlexWrapper alignItems="center">
-              <Input
-                defaultValue={input}
-                data-testid="user-name-input"
-                placeholder={t['com.affine.settings.profile.placeholder']()}
-                maxLength={64}
-                minLength={0}
-                width={280}
-                height={28}
-                onChange={setInput}
-                onEnter={handleUpdateUserName}
-              />
-              {allowUpdate ? (
-                <Button
-                  data-testid="save-user-name"
-                  onClick={handleUpdateUserName}
-                  className={style.button}
-                  style={{
-                    marginLeft: '12px',
-                  }}
-                >
-                  {t['com.affine.editCollection.save']()}
-                </Button>
-              ) : null}
-            </FlexWrapper>
-          </div>
-        </FlexWrapper>
-      </SettingRow>
-    </>
+        <div className={style.profileInputWrapper}>
+          <label>{t['com.affine.settings.profile.name']()}</label>
+          <FlexWrapper alignItems="center">
+            <Input
+              defaultValue={input}
+              data-testid="user-name-input"
+              placeholder={t['com.affine.settings.profile.placeholder']()}
+              maxLength={64}
+              minLength={0}
+              width={280}
+              height={28}
+              onChange={setInput}
+              onEnter={handleUpdateUserName}
+            />
+            {allowUpdate ? (
+              <Button
+                data-testid="save-user-name"
+                onClick={handleUpdateUserName}
+                className={style.button}
+                style={{
+                  marginLeft: '12px',
+                }}
+              >
+                {t['com.affine.editCollection.save']()}
+              </Button>
+            ) : null}
+          </FlexWrapper>
+        </div>
+      </FlexWrapper>
+    </SettingRow>
  );
 };

@@ -9,7 +9,7 @@ import { Trans } from '@affine/i18n';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { useQuery } from '@affine/workspace/affine/gql';
 import { useSetAtom } from 'jotai';
-import React, { Suspense, useEffect, useRef, useState } from 'react';
+import { Suspense, useEffect, useRef, useState } from 'react';
 import type { FallbackProps } from 'react-error-boundary';

 import { SWRErrorBoundary } from '../../../../../components/pure/swr-error-bundary';
@@ -205,9 +205,9 @@ const PlansErrorBoundary = ({ resetErrorBoundary }: FallbackProps) => {
  const t = useAFFiNEI18N();

  const title = t['com.affine.payment.title']();
-  const subtitle = <React.Fragment />;
-  const tabs = <React.Fragment />;
-  const footer = <React.Fragment />;
+  const subtitle = '';
+  const tabs = '';
+  const footer = '';

  const scroll = (
    <div className={styles.errorTip}>
@@ -406,17 +406,15 @@ const Upgrade = ({
  }, [onClose]);

  return (
-    <>
-      <Button
-        className={styles.planAction}
-        type="primary"
-        onClick={upgrade}
-        disabled={isMutating}
-        loading={isMutating}
-      >
-        {t['com.affine.payment.upgrade']()}
-      </Button>
-    </>
+    <Button
+      className={styles.planAction}
+      type="primary"
+      onClick={upgrade}
+      disabled={isMutating}
+      loading={isMutating}
+    >
+      {t['com.affine.payment.upgrade']()}
+    </Button>
  );
 };

@@ -218,17 +218,15 @@ export const PageMenu = ({ rename, pageId }: PageMenuProps) => {
    return null;
  }
  return (
-    <>
-      <FlexWrapper alignItems="center" justifyContent="center" ref={ref}>
-        <Menu
-          items={EditMenu}
-          contentOptions={{
-            align: 'center',
-          }}
-        >
-          <HeaderDropDownButton />
-        </Menu>
-      </FlexWrapper>
-    </>
+    <FlexWrapper alignItems="center" justifyContent="center" ref={ref}>
+      <Menu
+        items={EditMenu}
+        contentOptions={{
+          align: 'center',
+        }}
+      >
+        <HeaderDropDownButton />
+      </Menu>
+    </FlexWrapper>
  );
 };
@@ -2,7 +2,7 @@ import { pushNotificationAtom } from '@affine/component/notification-center';
 import { assertExists } from '@blocksuite/global/utils';
 import { GraphQLError } from 'graphql';
 import { useSetAtom } from 'jotai';
-import type { PropsWithChildren, ReactElement } from 'react';
+import type { PropsWithChildren, ReactNode } from 'react';
 import { useCallback } from 'react';
 import type { SWRConfiguration } from 'swr';
 import { SWRConfig } from 'swr';
@@ -49,9 +49,9 @@ const cloudConfig: SWRConfiguration = {
  ],
 };

-export const Provider = (props: PropsWithChildren): ReactElement => {
+export const Provider = (props: PropsWithChildren): ReactNode => {
  if (!runtimeConfig.enableCloud) {
-    return <>{props.children}</>;
+    return props.children;
  }

  return <SWRConfig value={cloudConfig}>{props.children}</SWRConfig>;
@@ -328,10 +328,8 @@ export const PageDetailEditor = (props: PageDetailEditorProps) => {
  }

  return (
-    <>
-      <Suspense>
-        <LayoutPanel node={layout} editorProps={props} depth={0} />
-      </Suspense>
-    </>
+    <Suspense>
+      <LayoutPanel node={layout} editorProps={props} depth={0} />
+    </Suspense>
  );
 };
@@ -49,53 +49,49 @@ export const WorkspaceAvatar = forwardRef<HTMLDivElement, WorkspaceAvatarProps>(
    const size = props.size || 20;
    const sizeStr = size + 'px';

-    return (
-      <>
-        {props.avatar ? (
-          <div
-            style={{
-              ...props.style,
-              width: sizeStr,
-              height: sizeStr,
-              color: '#fff',
-              borderRadius: '50%',
-              overflow: 'hidden',
-              display: 'inline-block',
-              verticalAlign: 'middle',
-            }}
-            ref={ref}
-          >
-            <picture>
-              <img
-                style={{ width: sizeStr, height: sizeStr }}
-                src={props.avatar}
-                alt=""
-                referrerPolicy="no-referrer"
-              />
-            </picture>
-          </div>
-        ) : (
-          <div
-            style={{
-              ...props.style,
-              width: sizeStr,
-              height: sizeStr,
-              border: '1px solid #fff',
-              color: '#fff',
-              fontSize: Math.ceil(0.5 * size) + 'px',
-              background: stringToColour(props.name || 'AFFiNE'),
-              borderRadius: '50%',
-              textAlign: 'center',
-              lineHeight: size + 'px',
-              display: 'inline-block',
-              verticalAlign: 'middle',
-            }}
-            ref={ref}
-          >
-            {(props.name || 'AFFiNE').substring(0, 1)}
-          </div>
-        )}
-      </>
+    return props.avatar ? (
+      <div
+        style={{
+          ...props.style,
+          width: sizeStr,
+          height: sizeStr,
+          color: '#fff',
+          borderRadius: '50%',
+          overflow: 'hidden',
+          display: 'inline-block',
+          verticalAlign: 'middle',
+        }}
+        ref={ref}
+      >
+        <picture>
+          <img
+            style={{ width: sizeStr, height: sizeStr }}
+            src={props.avatar}
+            alt=""
+            referrerPolicy="no-referrer"
+          />
+        </picture>
+      </div>
+    ) : (
+      <div
+        style={{
+          ...props.style,
+          width: sizeStr,
+          height: sizeStr,
+          border: '1px solid #fff',
+          color: '#fff',
+          fontSize: Math.ceil(0.5 * size) + 'px',
+          background: stringToColour(props.name || 'AFFiNE'),
+          borderRadius: '50%',
+          textAlign: 'center',
+          lineHeight: size + 'px',
+          display: 'inline-block',
+          verticalAlign: 'middle',
+        }}
+        ref={ref}
+      >
+        {(props.name || 'AFFiNE').substring(0, 1)}
+      </div>
    );
  }
 );
@@ -170,109 +170,105 @@ export const RootAppSidebar = ({
  useRegisterBlocksuiteEditorCommands(router.back, router.forward);
  const userInfo = useDeleteCollectionInfo();
  return (
-    <>
-      <AppSidebar
-        router={router}
-        hasBackground={
-          !(
-            appSettings.enableBlurBackground &&
-            environment.isDesktop &&
-            environment.isMacOs
-          )
-        }
-        generalShortcutsInfo={generalShortcutsInfo}
-      >
-        <MoveToTrash.ConfirmModal
-          open={trashConfirmOpen}
-          onConfirm={handleOnConfirm}
-          onOpenChange={onTrashConfirmOpenChange}
-          titles={deletePageTitles}
-        />
-        <SidebarContainer>
-          <Menu
-            rootOptions={{
-              open: openUserWorkspaceList,
-            }}
-            items={
-              <UserWithWorkspaceList onEventEnd={closeUserWorkspaceList} />
-            }
-            contentOptions={{
-              // hide trigger
-              sideOffset: -58,
-              onInteractOutside: closeUserWorkspaceList,
-              onEscapeKeyDown: closeUserWorkspaceList,
-              style: {
-                width: '300px',
-              },
-            }}
-          >
-            <WorkspaceCard
-              currentWorkspace={currentWorkspace}
-              onClick={useCallback(() => {
-                setOpenUserWorkspaceList(true);
-              }, [setOpenUserWorkspaceList])}
-            />
-          </Menu>
-          <QuickSearchInput
-            data-testid="slider-bar-quick-search-button"
-            onClick={onOpenQuickSearchModal}
+    <AppSidebar
+      router={router}
+      hasBackground={
+        !(
+          appSettings.enableBlurBackground &&
+          environment.isDesktop &&
+          environment.isMacOs
+        )
+      }
+      generalShortcutsInfo={generalShortcutsInfo}
+    >
+      <MoveToTrash.ConfirmModal
+        open={trashConfirmOpen}
+        onConfirm={handleOnConfirm}
+        onOpenChange={onTrashConfirmOpenChange}
+        titles={deletePageTitles}
+      />
+      <SidebarContainer>
+        <Menu
+          rootOptions={{
+            open: openUserWorkspaceList,
+          }}
+          items={<UserWithWorkspaceList onEventEnd={closeUserWorkspaceList} />}
+          contentOptions={{
+            // hide trigger
+            sideOffset: -58,
+            onInteractOutside: closeUserWorkspaceList,
+            onEscapeKeyDown: closeUserWorkspaceList,
+            style: {
+              width: '300px',
+            },
+          }}
+        >
+          <WorkspaceCard
+            currentWorkspace={currentWorkspace}
+            onClick={useCallback(() => {
+              setOpenUserWorkspaceList(true);
+            }, [setOpenUserWorkspaceList])}
          />
-          <RouteMenuLinkItem
-            icon={<FolderIcon />}
-            currentPath={currentPath}
-            path={paths.all(currentWorkspaceId)}
-            onClick={backToAll}
+        </Menu>
+        <QuickSearchInput
+          data-testid="slider-bar-quick-search-button"
+          onClick={onOpenQuickSearchModal}
+        />
+        <RouteMenuLinkItem
+          icon={<FolderIcon />}
+          currentPath={currentPath}
+          path={paths.all(currentWorkspaceId)}
+          onClick={backToAll}
+        >
+          <span data-testid="all-pages">
+            {t['com.affine.workspaceSubPath.all']()}
+          </span>
+        </RouteMenuLinkItem>
+        {runtimeConfig.enableNewSettingModal ? (
+          <MenuItem
+            data-testid="slider-bar-workspace-setting-button"
+            icon={<SettingsIcon />}
+            onClick={onOpenSettingModal}
          >
-            <span data-testid="all-pages">
-              {t['com.affine.workspaceSubPath.all']()}
+            <span data-testid="settings-modal-trigger">
+              {t['com.affine.settingSidebar.title']()}
            </span>
-          </RouteMenuLinkItem>
-          {runtimeConfig.enableNewSettingModal ? (
-            <MenuItem
-              data-testid="slider-bar-workspace-setting-button"
-              icon={<SettingsIcon />}
-              onClick={onOpenSettingModal}
-            >
-              <span data-testid="settings-modal-trigger">
-                {t['com.affine.settingSidebar.title']()}
-              </span>
-            </MenuItem>
-          ) : null}
-        </SidebarContainer>
+          </MenuItem>
+        ) : null}
+      </SidebarContainer>

-        <SidebarScrollableContainer>
-          <CategoryDivider label={t['com.affine.rootAppSidebar.favorites']()}>
-            <AddFavouriteButton workspace={blockSuiteWorkspace} />
-          </CategoryDivider>
-          <FavoriteList workspace={blockSuiteWorkspace} />
-          <CategoryDivider label={t['com.affine.rootAppSidebar.collections']()}>
-            <AddCollectionButton />
-          </CategoryDivider>
-          <CollectionsList workspace={blockSuiteWorkspace} info={userInfo} />
-          <CategoryDivider label={t['com.affine.rootAppSidebar.others']()} />
-          {/* fixme: remove the following spacer */}
-          <div style={{ height: '4px' }} />
-          <RouteMenuLinkItem
-            ref={trashDroppable.setNodeRef}
-            isDraggedOver={trashDroppable.isOver}
-            icon={<AnimatedDeleteIcon closed={trashDroppable.isOver} />}
-            currentPath={currentPath}
-            path={paths.trash(currentWorkspaceId)}
-          >
-            <span data-testid="trash-page">
-              {t['com.affine.workspaceSubPath.trash']()}
-            </span>
-          </RouteMenuLinkItem>
-          {blockSuiteWorkspace && (
-            <ImportPage blocksuiteWorkspace={blockSuiteWorkspace} />
-          )}
-        </SidebarScrollableContainer>
-        <SidebarContainer>
-          {environment.isDesktop && <AppUpdaterButton />}
-          <div style={{ height: '4px' }} />
-          <AddPageButton onClick={onClickNewPage} />
-        </SidebarContainer>
-      </AppSidebar>
-    </>
+      <SidebarScrollableContainer>
+        <CategoryDivider label={t['com.affine.rootAppSidebar.favorites']()}>
+          <AddFavouriteButton workspace={blockSuiteWorkspace} />
+        </CategoryDivider>
+        <FavoriteList workspace={blockSuiteWorkspace} />
+        <CategoryDivider label={t['com.affine.rootAppSidebar.collections']()}>
+          <AddCollectionButton />
+        </CategoryDivider>
+        <CollectionsList workspace={blockSuiteWorkspace} info={userInfo} />
+        <CategoryDivider label={t['com.affine.rootAppSidebar.others']()} />
+        {/* fixme: remove the following spacer */}
+        <div style={{ height: '4px' }} />
+        <RouteMenuLinkItem
+          ref={trashDroppable.setNodeRef}
+          isDraggedOver={trashDroppable.isOver}
+          icon={<AnimatedDeleteIcon closed={trashDroppable.isOver} />}
+          currentPath={currentPath}
+          path={paths.trash(currentWorkspaceId)}
+        >
+          <span data-testid="trash-page">
+            {t['com.affine.workspaceSubPath.trash']()}
+          </span>
+        </RouteMenuLinkItem>
+        {blockSuiteWorkspace && (
+          <ImportPage blocksuiteWorkspace={blockSuiteWorkspace} />
+        )}
+      </SidebarScrollableContainer>
+      <SidebarContainer>
+        {environment.isDesktop && <AppUpdaterButton />}
+        <div style={{ height: '4px' }} />
+        <AddPageButton onClick={onClickNewPage} />
+      </SidebarContainer>
+    </AppSidebar>
  );
 };
@@ -34,7 +34,7 @@ import { loadPage } from '@toeverything/hooks/use-block-suite-workspace-page';
 import { currentWorkspaceIdAtom } from '@toeverything/infra/atom';
 import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 import { nanoid } from 'nanoid';
-import type { PropsWithChildren, ReactElement } from 'react';
+import type { PropsWithChildren, ReactNode } from 'react';
 import { lazy, Suspense, useCallback, useEffect } from 'react';
 import { useLocation, useParams } from 'react-router-dom';
 import { Map as YMap } from 'yjs';
@@ -101,7 +101,7 @@ const showList: IslandItemNames[] = environment.isDesktop

 export const CurrentWorkspaceContext = ({
  children,
-}: PropsWithChildren): ReactElement => {
+}: PropsWithChildren): ReactNode => {
  const workspaceId = useAtomValue(currentWorkspaceIdAtom);
  const metadata = useAtomValue(rootWorkspacesMetadataAtom);
  const exist = metadata.find(m => m.id === workspaceId);
@@ -114,7 +114,7 @@ export const CurrentWorkspaceContext = ({
  if (!exist) {
    return <WorkspaceFallback key="workspace-not-found" />;
  }
-  return <>{children}</>;
+  return children;
 };

 type WorkspaceLayoutProps = {
@@ -108,30 +108,28 @@ const usePageOperationsRenderer = () => {
        });
      };
      return (
-        <>
-          <OperationCell
-            favorite={!!page.favorite}
-            isPublic={!!page.isPublic}
-            onDisablePublicSharing={onDisablePublicSharing}
-            link={`/workspace/${currentWorkspace.id}/${page.id}`}
-            onRemoveToTrash={() =>
-              setTrashModal({
-                open: true,
-                pageIds: [page.id],
-                pageTitles: [page.title],
-              })
-            }
-            onToggleFavoritePage={() => {
-              const status = page.favorite;
-              toggleFavorite(page.id);
-              toast(
-                status
-                  ? t['com.affine.toastMessage.removedFavorites']()
-                  : t['com.affine.toastMessage.addedFavorites']()
-              );
-            }}
-          />
-        </>
+        <OperationCell
+          favorite={!!page.favorite}
+          isPublic={!!page.isPublic}
+          onDisablePublicSharing={onDisablePublicSharing}
+          link={`/workspace/${currentWorkspace.id}/${page.id}`}
+          onRemoveToTrash={() =>
+            setTrashModal({
+              open: true,
+              pageIds: [page.id],
+              pageTitles: [page.title],
+            })
+          }
+          onToggleFavoritePage={() => {
+            const status = page.favorite;
+            toggleFavorite(page.id);
+            toast(
+              status
+                ? t['com.affine.toastMessage.removedFavorites']()
+                : t['com.affine.toastMessage.addedFavorites']()
+            );
+          }}
+        />
      );
    },
    [currentWorkspace.id, setTrashModal, t, toggleFavorite]
@@ -59,31 +59,29 @@ export const TrashPage = () => {
    [permanentlyDeletePage, restoreFromTrash, t]
  );
  return (
-    <>
-      <div className={styles.root}>
-        <WorkspaceHeader
-          currentWorkspaceId={currentWorkspace.id}
-          currentEntry={{
-            subPath: WorkspaceSubPath.TRASH,
-          }}
+    <div className={styles.root}>
+      <WorkspaceHeader
+        currentWorkspaceId={currentWorkspace.id}
+        currentEntry={{
+          subPath: WorkspaceSubPath.TRASH,
+        }}
+      />
+      {filteredPageMetas.length > 0 ? (
+        <VirtualizedPageList
+          pages={filteredPageMetas}
+          rowAsLink
+          groupBy={false}
+          isPreferredEdgeless={isPreferredEdgeless}
+          blockSuiteWorkspace={currentWorkspace.blockSuiteWorkspace}
+          pageOperationsRenderer={pageOperationsRenderer}
        />
-        {filteredPageMetas.length > 0 ? (
-          <VirtualizedPageList
-            pages={filteredPageMetas}
-            rowAsLink
-            groupBy={false}
-            isPreferredEdgeless={isPreferredEdgeless}
-            blockSuiteWorkspace={currentWorkspace.blockSuiteWorkspace}
-            pageOperationsRenderer={pageOperationsRenderer}
-          />
-        ) : (
-          <EmptyPageList
-            type="trash"
-            blockSuiteWorkspace={currentWorkspace.blockSuiteWorkspace}
-          />
-        )}
-      </div>
-    </>
+      ) : (
+        <EmptyPageList
+          type="trash"
+          blockSuiteWorkspace={currentWorkspace.blockSuiteWorkspace}
+        />
+      )}
+    </div>
  );
 };