@arcblock/ux 2.13.8 → 2.13.10

package/lib/UserCard/Cards/basic-info.js

@@ -20,10 +20,8 @@ function BasicCard(props) {
     display: "flex",
     flexDirection: "column",
     width: "100%",
-    sx: {
-      flex: 1,
-      minWidth: 0
-    },
+    flex: 1,
+    height: "100%",
     children: [/*#__PURE__*/_jsx(MinimalContent, {
       user: user,
       avatarSize: avatarSize,

package/lib/UserCard/Content/basic.js

@@ -1,6 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Typography, Box, Grid } from '@mui/material';
-import { useCreation } from 'ahooks';
+import { useCreation, useMemoizedFn } from 'ahooks';
 import styled from '@emotion/styled';
 import isArray from 'lodash/isArray';
 import { Icon as IconifyIcon } from '@iconify/react';
@@ -11,7 +11,7 @@ import LocationIcon from '@arcblock/icons/lib/Location';
 import EmailIcon from '@arcblock/icons/lib/Email';
 import TimezoneIcon from '@arcblock/icons/lib/Timezone';
 import { joinURL, withoutProtocol } from 'ufo';
-import { Fragment, useState, useMemo, useCallback } from 'react';
+import { useState, useMemo, useCallback } from 'react';
 import Clock from './clock';
 const IconMap = {
   timezone: TimezoneIcon,
@@ -32,6 +32,9 @@ const iconSize = {
   width: 16,
   height: 16
 };
+
+// 定义渲染项的类型
+
 function TimeZoneField({
   value
 }) {
@@ -42,14 +45,10 @@ function TimeZoneField({
     className: "user-card__timezone-field",
     children: [/*#__PURE__*/_jsx(TimezoneIcon, {
       ...iconSize
-    }), /*#__PURE__*/_jsx(LineText, {
+    }), /*#__PURE__*/_jsx(Clock, {
+      value: value,
       variant: "body2",
-      color: "grey.800",
-      children: /*#__PURE__*/_jsx(Clock, {
-        value: value,
-        variant: "body2",
-        color: "grey.800"
-      })
+      color: "grey.800"
     })]
   });
 }
@@ -72,23 +71,28 @@ function LinkField({
     display: "flex",
     alignItems: "center",
     gap: 1,
+    className: "user-card__link-field",
     children: [faviconUrl && !useFallback ? /*#__PURE__*/_jsx("img", {
       src: faviconUrl,
       alt: "site icon",
       style: {
-        width: 14,
-        height: 14,
+        width: 16,
+        height: 16,
         objectFit: 'contain'
       },
       onError: handleImageError
     }) : /*#__PURE__*/_jsx(LinkIcon, {
       ...iconSize
     }), /*#__PURE__*/_jsx(LineText, {
+      variant: "body2",
+      color: "grey.800",
       children: /*#__PURE__*/_jsx(Typography, {
         component: "a",
         href: value,
         style: {
-          textDecoration: 'none'
+          textDecoration: 'none',
+          color: 'inherit',
+          fontSize: 'inherit'
         },
         target: "_blank",
         variant: "body2",
@@ -101,7 +105,8 @@ function LinkField({
 }
 function BasicField({
   field,
-  value
+  value,
+  children
 }) {
   const Icon = IconMap[field];
   return /*#__PURE__*/_jsxs(Box, {
@@ -117,7 +122,7 @@ function BasicField({
     }), /*#__PURE__*/_jsx(LineText, {
       variant: "body2",
       color: "grey.800",
-      children: value
+      children: children ?? value
     })]
   }, field);
 }
@@ -165,9 +170,11 @@ function BasicContent({
     }
   }, [user, metadata, address]);
 
-  // 计算实际可见的字段数量
-  const visibleFields = useMemo(() => {
-    return fields.filter(field => {
+  // 计算实际可见的字段数量和渲染元素数量
+  const {
+    effectiveRenderCount
+  } = useMemo(() => {
+    const visible = fields.filter(field => {
       if (field === 'bio') return false; // bio field is handled separately
       const value = getFieldValue(field);
       if (value === undefined || value === null || value === '') return false;
@@ -176,41 +183,96 @@ function BasicContent({
       }
       return String(value).trim().length > 0;
     });
+
+    // 计算实际渲染数量
+    const renderCount = visible.reduce((count, field) => {
+      const value = getFieldValue(field);
+      return count + (Array.isArray(value) ? value.filter(item => item && String(item).trim()).length : 1);
+    }, 0);
+    return {
+      visibleFields: visible,
+      effectiveRenderCount: renderCount
+    };
   }, [fields, getFieldValue]);
 
   // 判断是否需要使用两列布局
-  const useDoubleColumn = visibleFields.length > 4;
+  const useDoubleColumn = effectiveRenderCount > 4;
+  const isValidValue = useMemoizedFn(value => value !== undefined && value !== null && String(value).trim().length > 0);
+
+  // 准备要渲染的所有元素项
+  const renderItems = useMemo(() => {
+    const items = [];
+
+    // 遍历有效字段，展开数组字段为单独的渲染项
+    fields.forEach(field => {
+      if (field === 'bio') return; // bio field is handled separately
+      const value = getFieldValue(field);
+      if (!value) return;
+      if (isArray(value)) {
+        // 数组类型字段，每个有效项生成一个渲染元素
+        value.forEach((item, index) => {
+          if (isValidValue(item)) {
+            items.push({
+              field,
+              value: item,
+              key: `${field}-${index}`
+            });
+          }
+        });
+      } else if (isValidValue(value)) {
+        // 非数组类型字段，生成一个渲染元素
+        items.push({
+          field,
+          value,
+          key: field
+        });
+      }
+    });
+    return items;
+  }, [fields, getFieldValue, isValidValue]);
   if (fields.length === 0) {
     return null;
   }
-  const renderField = field => {
-    const value = getFieldValue(field);
-    if (!value || field === 'bio') {
-      return null;
-    }
-    if (isArray(value)) {
-      return /*#__PURE__*/_jsx(Fragment, {
-        children: field === 'link' ? /*#__PURE__*/_jsx(_Fragment, {
-          children: value.map(link => /*#__PURE__*/_jsx(LinkField, {
-            value: link
-          }, link))
-        }) : /*#__PURE__*/_jsx(_Fragment, {
-          children: value.map(item => /*#__PURE__*/_jsx(BasicField, {
-            field: field,
-            value: item
-          }, item))
-        })
-      }, field);
-    }
-    if (field === 'timezone') {
-      return /*#__PURE__*/_jsx(TimeZoneField, {
-        value: value
-      }, field);
+  const renderItem = item => {
+    const {
+      field,
+      value,
+      key
+    } = item;
+    switch (field) {
+      case 'link':
+        return /*#__PURE__*/_jsx(LinkField, {
+          value: value
+        }, key);
+      case 'timezone':
+        return /*#__PURE__*/_jsx(TimeZoneField, {
+          value: value
+        }, key);
+      case 'email':
+        return /*#__PURE__*/_jsx(BasicField, {
+          field: field,
+          value: value
+          // eslint-disable-next-line react/no-children-prop
+          ,
+          children: /*#__PURE__*/_jsx(Typography, {
+            component: "a",
+            href: `mailto:${value}`,
+            rel: "noopener noreferrer",
+            referrerPolicy: "no-referrer",
+            style: {
+              color: 'inherit',
+              textDecoration: 'none',
+              fontSize: 'inherit'
+            },
+            children: value
+          })
+        });
+      default:
+        return /*#__PURE__*/_jsx(BasicField, {
+          field: field,
+          value: value
+        }, key);
     }
-    return /*#__PURE__*/_jsx(BasicField, {
-      field: field,
-      value: value
-    }, field);
   };
   return /*#__PURE__*/_jsxs(Box, {
     mt: 1,
@@ -226,19 +288,16 @@ function BasicContent({
     }), useDoubleColumn ? /*#__PURE__*/_jsx(Grid, {
       container: true,
       spacing: 0.5,
-      children: fields.map(field => {
-        if (field === 'bio' || !getFieldValue(field)) return null;
-        return /*#__PURE__*/_jsx(Grid, {
-          item: true,
-          xs: 6,
-          children: renderField(field)
-        }, field);
-      })
+      children: renderItems.map(item => /*#__PURE__*/_jsx(Grid, {
+        item: true,
+        xs: 6,
+        children: renderItem(item)
+      }, item.key))
     }) : /*#__PURE__*/_jsx(Box, {
       display: "flex",
       flexDirection: "column",
       gap: 0.5,
-      children: fields.map(field => renderField(field))
+      children: renderItems.map(item => renderItem(item))
     })]
   });
 }

package/lib/UserCard/Content/clock.js

@@ -40,16 +40,21 @@ export default function Clock({
   });
   const timeInfo = useClock(value, locale);
   return /*#__PURE__*/_jsxs(Box, {
-    sx: {
-      whiteSpace: 'nowrap',
-      overflow: 'hidden',
-      textOverflow: 'ellipsis'
-    },
     display: "flex",
     alignItems: "center",
     gap: 1,
+    flex: 1,
+    justifyContent: "flex-start",
+    overflow: "hidden",
+    width: "100%",
     children: [/*#__PURE__*/_jsx(Typography, {
       ...props,
+      noWrap: true,
+      sx: {
+        flex: '0 1 auto',
+        minWidth: 0,
+        ...props.sx
+      },
       children: value
     }), /*#__PURE__*/_jsx(Tooltip, {
       enterDelay: 200,
@@ -61,6 +66,14 @@ export default function Clock({
       children: /*#__PURE__*/_jsxs(Typography, {
         component: "span",
         fontSize: 14,
+        noWrap: true,
+        sx: {
+          whiteSpace: 'nowrap',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          flex: '0 0 auto',
+          maxWidth: '100%'
+        },
         children: ["(", locale === 'zh' ? `${t(`timezonePhase.${timeInfo.phase}`)} ` : '', timeInfo.formattedTime, ")"]
       })
     })]

package/lib/UserCard/Content/minimal.js

@@ -16,7 +16,8 @@ function MinimalContent(props) {
     renderTopRightContent,
     topRightMaxWidth,
     avatarProps,
-    shortenLabelProps
+    shortenLabelProps,
+    ...rest
   } = props;
   return /*#__PURE__*/_jsxs(Box, {
     display: "flex",
@@ -35,7 +36,8 @@ function MinimalContent(props) {
         avatarSize: avatarSize,
         shouldShowHoverCard: shouldShowHoverCard,
         renderCardContent: renderCardContent,
-        avatarProps: avatarProps
+        avatarProps: avatarProps,
+        ...rest
       }), /*#__PURE__*/_jsxs(Box, {
         children: [/*#__PURE__*/_jsx(Typography, {
           variant: "subtitle1",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "2.13.8",
+  "version": "2.13.10",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -70,14 +70,14 @@
     "react": ">=18.2.0",
     "react-router-dom": ">=6.22.3"
   },
-  "gitHead": "86ba86fce59551ceb09ee3cbdfd4646de2a69900",
+  "gitHead": "164845889eb29a84f9da191b79f66c43554f9fa1",
   "dependencies": {
     "@arcblock/did-motif": "^1.1.13",
-    "@arcblock/icons": "^2.13.8",
-    "@arcblock/nft-display": "^2.13.8",
-    "@arcblock/react-hooks": "^2.13.8",
+    "@arcblock/icons": "^2.13.10",
+    "@arcblock/nft-display": "^2.13.10",
+    "@arcblock/react-hooks": "^2.13.10",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@blocklet/theme": "^2.13.8",
+    "@blocklet/theme": "^2.13.10",
     "@fontsource/roboto": "~5.1.1",
     "@fontsource/ubuntu-mono": "^5.0.18",
     "@iconify-icons/logos": "^1.2.36",

package/src/UserCard/Cards/basic-info.tsx

@@ -25,7 +25,7 @@ function BasicCard(props: BasicCardProps) {
   } = props;
 
   return (
-    <Box display="flex" flexDirection="column" width="100%" sx={{ flex: 1, minWidth: 0 }}>
+    <Box display="flex" flexDirection="column" width="100%" flex={1} height="100%">
       <MinimalContent user={user} avatarSize={avatarSize} {...rest} />
 
       {infoType === InfoType.Basic && <BasicContent user={user} isFull={isFull} renderFields={renderFields} />}

package/src/UserCard/Content/basic.tsx

@@ -1,5 +1,5 @@
 import { Typography, Box, Grid } from '@mui/material';
-import { useCreation } from 'ahooks';
+import { useCreation, useMemoizedFn } from 'ahooks';
 import styled from '@emotion/styled';
 import isArray from 'lodash/isArray';
 import { Icon as IconifyIcon } from '@iconify/react';
@@ -41,13 +41,18 @@ interface BasicContentProps {
   renderFields?: string[];
 }
 
+// 定义渲染项的类型
+interface RenderItem {
+  field: string;
+  value: string | any;
+  key: string;
+}
+
 function TimeZoneField({ value }: { value: string }) {
   return (
     <Box display="flex" alignItems="center" gap={1} className="user-card__timezone-field">
       <TimezoneIcon {...iconSize} />
-      <LineText variant="body2" color="grey.800">
-        <Clock value={value} variant="body2" color="grey.800" />
-      </LineText>
+      <Clock value={value} variant="body2" color="grey.800" />
     </Box>
   );
 }
@@ -68,22 +73,22 @@ function LinkField({ value }: { value: string }) {
   };
 
   return (
-    <Box display="flex" alignItems="center" gap={1}>
+    <Box display="flex" alignItems="center" gap={1} className="user-card__link-field">
       {faviconUrl && !useFallback ? (
         <img
           src={faviconUrl}
           alt="site icon"
-          style={{ width: 14, height: 14, objectFit: 'contain' }}
+          style={{ width: 16, height: 16, objectFit: 'contain' }}
           onError={handleImageError}
         />
       ) : (
         <LinkIcon {...iconSize} />
       )}
-      <LineText>
+      <LineText variant="body2" color="grey.800">
         <Typography
           component="a"
           href={value}
-          style={{ textDecoration: 'none' }}
+          style={{ textDecoration: 'none', color: 'inherit', fontSize: 'inherit' }}
           target="_blank"
           variant="body2"
           color="grey.800"
@@ -95,13 +100,13 @@ function LinkField({ value }: { value: string }) {
   );
 }
 
-function BasicField({ field, value }: { field: string; value: string }) {
+function BasicField({ field, value, children }: { field: string; value: string; children?: React.ReactNode }) {
   const Icon = IconMap[field as keyof typeof IconMap];
   return (
     <Box key={field} display="flex" alignItems="center" gap={1} className={`user-card__${field}-field`}>
       {Icon ? <Icon {...iconSize} /> : <IconifyIcon icon={infoCircleIcon} {...iconSize} />}
       <LineText variant="body2" color="grey.800">
-        {value}
+        {children ?? value}
       </LineText>
     </Box>
   );
@@ -156,9 +161,9 @@ function BasicContent({ user, isFull = false, renderFields }: BasicContentProps)
     [user, metadata, address]
   );
 
-  // 计算实际可见的字段数量
-  const visibleFields = useMemo(() => {
-    return fields.filter((field) => {
+  // 计算实际可见的字段数量和渲染元素数量
+  const { effectiveRenderCount } = useMemo(() => {
+    const visible = fields.filter((field) => {
       if (field === 'bio') return false; // bio field is handled separately
       const value = getFieldValue(field);
 
@@ -170,46 +175,95 @@ function BasicContent({ user, isFull = false, renderFields }: BasicContentProps)
 
       return String(value).trim().length > 0;
     });
+
+    // 计算实际渲染数量
+    const renderCount = visible.reduce((count, field) => {
+      const value = getFieldValue(field);
+      return count + (Array.isArray(value) ? value.filter((item) => item && String(item).trim()).length : 1);
+    }, 0);
+
+    return { visibleFields: visible, effectiveRenderCount: renderCount };
   }, [fields, getFieldValue]);
 
   // 判断是否需要使用两列布局
-  const useDoubleColumn = visibleFields.length > 4;
+  const useDoubleColumn = effectiveRenderCount > 4;
+
+  const isValidValue = useMemoizedFn(
+    (value: any) => value !== undefined && value !== null && String(value).trim().length > 0
+  );
+
+  // 准备要渲染的所有元素项
+  const renderItems = useMemo(() => {
+    const items: RenderItem[] = [];
+
+    // 遍历有效字段，展开数组字段为单独的渲染项
+    fields.forEach((field) => {
+      if (field === 'bio') return; // bio field is handled separately
+      const value = getFieldValue(field);
+
+      if (!value) return;
+
+      if (isArray(value)) {
+        // 数组类型字段，每个有效项生成一个渲染元素
+        value.forEach((item, index) => {
+          if (isValidValue(item)) {
+            items.push({
+              field,
+              value: item,
+              key: `${field}-${index}`,
+            });
+          }
+        });
+      } else if (isValidValue(value)) {
+        // 非数组类型字段，生成一个渲染元素
+        items.push({
+          field,
+          value,
+          key: field,
+        });
+      }
+    });
+
+    return items;
+  }, [fields, getFieldValue, isValidValue]);
 
   if (fields.length === 0) {
     return null;
   }
 
-  const renderField = (field: string) => {
-    const value = getFieldValue(field);
-    if (!value || field === 'bio') {
-      return null;
-    }
+  const renderItem = (item: RenderItem) => {
+    const { field, value, key } = item;
 
-    if (isArray(value)) {
-      return (
-        <Fragment key={field}>
-          {field === 'link' ? (
-            <>
-              {value.map((link) => (
-                <LinkField key={link} value={link} />
-              ))}
-            </>
-          ) : (
-            <>
-              {value.map((item) => (
-                <BasicField key={item} field={field} value={item} />
-              ))}
-            </>
-          )}
-        </Fragment>
-      );
+    switch (field) {
+      case 'link':
+        return <LinkField key={key} value={value as string} />;
+      case 'timezone':
+        return <TimeZoneField key={key} value={value as string} />;
+      case 'email':
+        return (
+          <BasicField
+            field={field}
+            value={value as string}
+            // eslint-disable-next-line react/no-children-prop
+            children={
+              <Typography
+                component="a"
+                href={`mailto:${value}`}
+                rel="noopener noreferrer"
+                referrerPolicy="no-referrer"
+                style={{
+                  color: 'inherit',
+                  textDecoration: 'none',
+                  fontSize: 'inherit',
+                }}>
+                {value}
+              </Typography>
+            }
+          />
+        );
+      default:
+        return <BasicField key={key} field={field} value={value as string} />;
     }
-
-    if (field === 'timezone') {
-      return <TimeZoneField key={field} value={value as string} />;
-    }
-
-    return <BasicField key={field} field={field} value={value as string} />;
   };
 
   return (
@@ -222,18 +276,15 @@ function BasicContent({ user, isFull = false, renderFields }: BasicContentProps)
       {/* 其他字段 */}
       {useDoubleColumn ? (
         <Grid container spacing={0.5}>
-          {fields.map((field) => {
-            if (field === 'bio' || !getFieldValue(field)) return null;
-            return (
-              <Grid item xs={6} key={field}>
-                {renderField(field)}
-              </Grid>
-            );
-          })}
+          {renderItems.map((item) => (
+            <Grid item xs={6} key={item.key}>
+              {renderItem(item)}
+            </Grid>
+          ))}
         </Grid>
       ) : (
         <Box display="flex" flexDirection="column" gap={0.5}>
-          {fields.map((field) => renderField(field))}
+          {renderItems.map((item) => renderItem(item))}
         </Box>
       )}
     </Box>

package/src/UserCard/Content/clock.tsx

@@ -34,16 +34,17 @@ export default function Clock({ value, ...props }: { value: string; [key: string
   const timeInfo = useClock(value, locale);
 
   return (
-    <Box
-      sx={{
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-      }}
-      display="flex"
-      alignItems="center"
-      gap={1}>
-      <Typography {...props}>{value}</Typography>
+    <Box display="flex" alignItems="center" gap={1} flex={1} justifyContent="flex-start" overflow="hidden" width="100%">
+      <Typography
+        {...props}
+        noWrap
+        sx={{
+          flex: '0 1 auto',
+          minWidth: 0,
+          ...props.sx,
+        }}>
+        {value}
+      </Typography>
       <Tooltip
         enterDelay={200}
         title={
@@ -53,7 +54,17 @@ export default function Clock({ value, ...props }: { value: string; [key: string
         }
         placement="top"
         arrow>
-        <Typography component="span" fontSize={14}>
+        <Typography
+          component="span"
+          fontSize={14}
+          noWrap
+          sx={{
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            flex: '0 0 auto',
+            maxWidth: '100%',
+          }}>
           ({locale === 'zh' ? `${t(`timezonePhase.${timeInfo.phase}`)} ` : ''}
           {timeInfo.formattedTime})
         </Typography>

package/src/UserCard/Content/minimal.tsx

@@ -27,6 +27,7 @@ function MinimalContent(props: MinimalContentProps) {
     topRightMaxWidth,
     avatarProps,
     shortenLabelProps,
+    ...rest
   } = props;
 
   return (
@@ -38,6 +39,7 @@ function MinimalContent(props: MinimalContentProps) {
           shouldShowHoverCard={shouldShowHoverCard}
           renderCardContent={renderCardContent}
           avatarProps={avatarProps}
+          {...rest}
         />
         <Box>
           <Typography

package/lib/UserCard/Content/left-layout.d.ts

@@ -1,16 +0,0 @@
-import React from 'react';
-import { User } from '../types';
-interface LeftColumnLayoutProps {
-    user: User;
-    avatarSize: number;
-    shouldShowHoverCard: boolean;
-    renderCardContent: () => React.ReactNode;
-    followButtonStyle: string;
-    isFollowed: boolean;
-    followLoading: boolean;
-}
-/**
- * 统一左侧列布局组件，包含头像和关注按钮
- */
-declare function LeftColumnLayout({ user, avatarSize, shouldShowHoverCard, renderCardContent, followButtonStyle, isFollowed, followLoading, }: LeftColumnLayoutProps): import("react/jsx-runtime").JSX.Element;
-export default LeftColumnLayout;

package/lib/UserCard/Content/left-layout.js

@@ -1,33 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import { Box } from '@mui/material';
-import TooltipAvatar from './tooltip-avatar';
-/**
- * 统一左侧列布局组件，包含头像和关注按钮
- */
-function LeftColumnLayout({
-  user,
-  avatarSize,
-  shouldShowHoverCard,
-  renderCardContent,
-  followButtonStyle,
-  isFollowed,
-  followLoading
-}) {
-  return /*#__PURE__*/_jsx(Box, {
-    sx: {
-      mr: 2,
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      gap: 1
-    },
-    children: /*#__PURE__*/_jsx(TooltipAvatar, {
-      user: user,
-      avatarSize: avatarSize,
-      shouldShowHoverCard: shouldShowHoverCard,
-      renderCardContent: renderCardContent
-    })
-  });
-}
-export default LeftColumnLayout;

package/src/UserCard/Content/left-layout.tsx

@@ -1,40 +0,0 @@
-import React from 'react';
-import { Box } from '@mui/material';
-import { User } from '../types';
-import TooltipAvatar from './tooltip-avatar';
-
-interface LeftColumnLayoutProps {
-  user: User;
-  avatarSize: number;
-  shouldShowHoverCard: boolean;
-  renderCardContent: () => React.ReactNode;
-  followButtonStyle: string;
-  isFollowed: boolean;
-  followLoading: boolean;
-}
-
-/**
- * 统一左侧列布局组件，包含头像和关注按钮
- */
-function LeftColumnLayout({
-  user,
-  avatarSize,
-  shouldShowHoverCard,
-  renderCardContent,
-  followButtonStyle,
-  isFollowed,
-  followLoading,
-}: LeftColumnLayoutProps) {
-  return (
-    <Box sx={{ mr: 2, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 1 }}>
-      <TooltipAvatar
-        user={user}
-        avatarSize={avatarSize}
-        shouldShowHoverCard={shouldShowHoverCard}
-        renderCardContent={renderCardContent}
-      />
-    </Box>
-  );
-}
-
-export default LeftColumnLayout;