@verdaccio/ui-components 3.0.0-next.1 → 4.0.0-next-8.0

package/src/components/Readme/utils.ts

@@ -1,25 +1,26 @@
 import * as DOMPurify from 'dompurify';
-import * as marked from 'marked';
+import { Marked } from 'marked';
+import { markedHighlight } from 'marked-highlight';
+
+const marked = new Marked(
+  markedHighlight({
+    async: false,
+    highlight(code, lang) {
+      const hljs = require('highlight.js');
+      const language = hljs.getLanguage(lang) ? lang : 'plaintext';
+      return hljs.highlight(code, { language }).value;
+    },
+  })
+);
 
 marked.setOptions({
   renderer: new marked.Renderer(),
-  highlight: function (code, lang) {
-    const hljs = require('highlight.js');
-    const language = hljs.getLanguage(lang) ? lang : 'plaintext';
-    return hljs.highlight(code, { language }).value;
-  },
-  langPrefix: 'hljs language-', // highlight.js css expects a top-level 'hljs' class.
   pedantic: false,
   gfm: true,
   breaks: false,
-  mangle: false,
-  xhtml: false,
 });
 
 export function parseReadme(readme: string): string | void {
-  if (typeof readme === 'string') {
-    const html = marked.parse(readme);
-    return DOMPurify.sanitize(html);
-  }
-  return '';
+  const html = marked.parse(readme);
+  return DOMPurify.sanitize(html);
 }

package/src/components/RegistryInfoDialog/styles.ts

@@ -4,10 +4,11 @@ import DialogTitle from '@mui/material/DialogTitle';
 
 import { Theme } from '../../';
 
-export const Title = styled(DialogTitle)<{ theme?: Theme }>((props) => ({
-  backgroundColor: props.theme?.palette.primary.main,
-  color: props.theme?.palette.white,
-  fontSize: props.theme?.fontSize.lg,
+export const Title = styled(DialogTitle)<{ theme?: Theme }>(({ theme }) => ({
+  backgroundColor:
+    theme?.palette.mode === 'light' ? theme?.palette.primary.main : theme?.palette.cyanBlue,
+  color: theme?.palette.white,
+  fontSize: theme?.fontSize.lg,
 }));
 
 export const Content = styled(DialogContent)<{ theme?: Theme }>(({ theme }) => ({

package/src/components/Repository/Repository.tsx

@@ -4,6 +4,7 @@ import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
 import Typography from '@mui/material/Typography';
+import { useTheme } from '@mui/styles';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -11,20 +12,13 @@ import { Theme } from '../../Theme';
 import { url as urlUtils } from '../../utils';
 import CopyClipboard from '../CopyClipboard';
 import { Git } from '../Icons';
-import { Link } from '../Link';
+import LinkExternal from '../LinkExternal';
 
 const StyledText = styled(Typography)<{ theme?: Theme }>((props) => ({
   fontWeight: props.theme?.fontWeight.bold,
   textTransform: 'capitalize',
 }));
 
-const GithubLink = styled(Link)<{ theme?: Theme }>(({ theme }) => ({
-  color: theme?.palette.mode === 'light' ? theme?.palette.primary.main : theme?.palette.white,
-  ':hover': {
-    color: theme?.palette.dodgerBlue,
-  },
-}));
-
 const RepositoryListItem = styled(ListItem)({
   padding: 0,
   ':hover': {
@@ -33,20 +27,19 @@ const RepositoryListItem = styled(ListItem)({
 });
 
 const RepositoryListItemText = styled(ListItemText)({
-  padding: '0 10px',
+  padding: '0 0 0 10px',
   margin: 0,
 });
 
 const RepositoryAvatar = styled(Avatar)({
-  borderRadius: '0px',
-  padding: '0',
-  img: {
-    backgroundColor: 'transparent',
-  },
+  padding: 0,
+  marginLeft: 0,
+  backgroundColor: 'transparent',
 });
 
 const Repository: React.FC<{ packageMeta: any }> = ({ packageMeta }) => {
   const { t } = useTranslation();
+  const theme = useTheme();
   const url = packageMeta?.latest?.repository?.url;
   if (!url || !urlUtils.isURL(url)) {
     return null;
@@ -68,15 +61,15 @@ const Repository: React.FC<{ packageMeta: any }> = ({ packageMeta }) => {
       subheader={<StyledText variant="subtitle1">{t('sidebar.repository.title')}</StyledText>}
     >
       <RepositoryListItem>
-        <RepositoryAvatar sx={{ backgroundColor: '#fff' }}>
+        <RepositoryAvatar sx={{ bgcolor: theme.palette.white }}>
           <Git />
         </RepositoryAvatar>
         <RepositoryListItemText
           primary={
             <CopyClipboard dataTestId="repositoryID" text={repositoryURL} title={repositoryURL}>
-              <GithubLink external={true} to={repositoryURL} variant="outline">
+              <LinkExternal to={repositoryURL} variant="outline">
                 {repositoryURL}
-              </GithubLink>
+              </LinkExternal>
             </CopyClipboard>
           }
         />

package/src/components/Search/AutoComplete/AutoComplete.tsx

@@ -68,7 +68,7 @@ const AutoComplete: FC<Props> = ({
         inputValue={inputValue}
         loading={suggestionsLoading}
         loadingText={t('autoComplete.loading')}
-        onChange={onSelectItem}
+        onChange={onSelectItem as any}
         onClose={handleOnClose}
         onInputChange={handleOnInputChange}
         options={suggestions}

package/src/components/Search/AutoComplete/styles.ts

@@ -0,0 +1,7 @@
+import styled from '@emotion/styled';
+
+export const Wrapper = styled('div')({
+  width: '100%',
+  position: 'relative',
+  zIndex: 1,
+});

package/src/components/Search/Search.test.tsx

@@ -4,6 +4,7 @@ import { BrowserRouter as Router } from 'react-router-dom';
 import { api, store } from '../../';
 import { fireEvent, renderWithStore, screen, waitFor } from '../../test/test-react-testing-library';
 import Search from './Search';
+import { cleanDescription } from './utils';
 
 jest.mock('lodash/debounce', () =>
   jest.fn((fn) => {
@@ -40,12 +41,12 @@ describe('<Search /> component', () => {
   });
 
   test('should load the component in default state', () => {
-    const { container } = renderWithStore(<ComponentToBeRendered />, store);
-    expect(container.firstChild).toMatchSnapshot();
+    renderWithStore(<ComponentToBeRendered />, store);
+    expect(screen.getByPlaceholderText('search.packages')).toBeInTheDocument();
   });
 
   test('handleSearch: when user type package name in search component, show suggestions', async () => {
-    const { getByPlaceholderText, getAllByText } = renderWithStore(
+    const { getByPlaceholderText, findAllByText } = renderWithStore(
       <ComponentToBeRendered />,
       store
     );
@@ -57,14 +58,14 @@ describe('<Search /> component', () => {
 
     expect(autoCompleteInput).toHaveAttribute('value', 'verdaccio');
 
-    const suggestionsElements = await waitFor(() => getAllByText('verdaccio', { exact: true }));
+    const suggestionsElements = await waitFor(() => findAllByText('verdaccio', { exact: true }));
 
     expect(suggestionsElements).toHaveLength(1);
     expect(api.request).toHaveBeenCalledTimes(1);
   });
 
   test('onBlur: should cancel all search requests', async () => {
-    const { getByPlaceholderText, getAllByText } = renderWithStore(
+    const { getByPlaceholderText, findAllByText } = renderWithStore(
       <ComponentToBeRendered />,
       store
     );
@@ -75,7 +76,7 @@ describe('<Search /> component', () => {
     fireEvent.change(autoCompleteInput, { target: { value: 'verdaccio' } });
     expect(autoCompleteInput).toHaveAttribute('value', 'verdaccio');
 
-    const suggestionsElements = await waitFor(() => getAllByText('verdaccio', { exact: true }));
+    const suggestionsElements = await waitFor(() => findAllByText('verdaccio', { exact: true }));
     expect(suggestionsElements).toHaveLength(1);
     expect(api.request).toHaveBeenCalledTimes(1);
 
@@ -110,7 +111,7 @@ describe('<Search /> component', () => {
   });
 
   test('handlePackagesClearRequested: should clear suggestions', async () => {
-    const { getByPlaceholderText, getAllByText } = renderWithStore(
+    const { getByPlaceholderText, findAllByText } = renderWithStore(
       <ComponentToBeRendered />,
       store
     );
@@ -120,18 +121,18 @@ describe('<Search /> component', () => {
     fireEvent.change(autoCompleteInput, { target: { value: 'verdaccio' } });
     expect(autoCompleteInput).toHaveAttribute('value', 'verdaccio');
 
-    const suggestionsElements = await waitFor(() => getAllByText('verdaccio', { exact: true }));
+    const suggestionsElements = await waitFor(() => findAllByText('verdaccio', { exact: true }));
     expect(suggestionsElements).toHaveLength(1);
 
     fireEvent.change(autoCompleteInput, { target: { value: ' ' } });
     const listBoxElement = screen.queryAllByRole('listbox');
-    // // when the page redirects, the list box should be empty again
+    // when the page redirects, the list box should be empty again
     expect(listBoxElement).toHaveLength(0);
     expect(api.request).toHaveBeenCalledTimes(1);
   });
 
   test('handleClickSearch: should change the window location on click or return key', async () => {
-    const { getByPlaceholderText, getAllByText } = renderWithStore(
+    const { getByPlaceholderText, findAllByText } = renderWithStore(
       <ComponentToBeRendered />,
       store
     );
@@ -141,7 +142,7 @@ describe('<Search /> component', () => {
     fireEvent.change(autoCompleteInput, { target: { value: 'verdaccio' } });
     expect(autoCompleteInput).toHaveAttribute('value', 'verdaccio');
 
-    const suggestionsElements = await waitFor(() => getAllByText('verdaccio', { exact: true }));
+    const suggestionsElements = await waitFor(() => findAllByText('verdaccio', { exact: true }));
     // console.log('suggestionsElements', suggestionsElements);
     expect(suggestionsElements).toHaveLength(1);
     // click on the second suggestion
@@ -151,3 +152,29 @@ describe('<Search /> component', () => {
     expect(listBoxElement).toHaveLength(0);
   });
 });
+
+describe('cleanDescription', () => {
+  test('should return plain text', () => {
+    const description = 'Hello, Mars!';
+    const output = cleanDescription(description);
+    expect(output).toBe(description);
+  });
+
+  test('should remove html tags from description', () => {
+    const description = '<h1>verdaccio</h1>';
+    const output = cleanDescription(description);
+    expect(output).toBe('verdaccio');
+  });
+
+  test('should remove markdown links from description', () => {
+    const description = '[verdaccio](https://verdaccio.org)';
+    const output = cleanDescription(description);
+    expect(output).toBe('verdaccio');
+  });
+
+  test('should remove markdown links', () => {
+    const description = '[![NPM version](https://img.shields.io/npm/latest.svg)]';
+    const output = cleanDescription(description);
+    expect(output).toBe('NPM version');
+  });
+});

package/src/components/Search/Search.tsx

@@ -9,6 +9,7 @@ import { RouteComponentProps, withRouter } from 'react-router';
 import { SearchResultWeb } from '@verdaccio/types';
 
 import { Dispatch, RootState, useConfig } from '../../';
+import { Route } from '../../utils';
 import AutoComplete from './AutoComplete';
 import SearchItem from './SearchItem';
 import { StyledInputAdornment, StyledTextField } from './styles';
@@ -27,6 +28,7 @@ const Search: React.FC<RouteComponentProps> = ({ history }) => {
   const { suggestions } = useSelector((state: RootState) => state.search);
   const isLoading = useSelector((state: RootState) => state?.loading?.models.search);
   const dispatch = useDispatch<Dispatch>();
+
   /**
    * Cancel all the requests which are in pending state.
    */
@@ -60,9 +62,9 @@ const Search: React.FC<RouteComponentProps> = ({ history }) => {
           if (searchRemote) {
             // TODO: check this part
             // @ts-ignore
-            history.push(`/-/web/detail/${value.package.name}`);
+            history.push(`${Route.DETAIL}${value.package.name}`);
           } else {
-            history.push(`/-/web/detail/${value.name}`);
+            history.push(`${Route.DETAIL}${value.name}`);
           }
           break;
       }

package/src/components/Search/SearchItem.tsx

@@ -9,6 +9,8 @@ import Stack from '@mui/material/Stack';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { cleanDescription } from './utils';
+
 type SearchItemProps = {
   name: string;
   version?: string;
@@ -28,15 +30,23 @@ export const Description = styled('div')<{ theme?: Theme }>(({ theme }) => ({
   display: 'none',
   color: theme?.palette?.greyLight2,
   lineHeight: '1.5rem',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+  alignItems: 'center',
+  overflow: 'hidden',
+  paddingLeft: theme.spacing(),
+  fontSize: theme?.fontSize.ssm,
+  [`@media (min-width: ${theme?.breakPoints.medium}px)`]: {
+    display: 'block',
+    width: '300px',
+  },
   [`@media (min-width: ${theme?.breakPoints.large}px)`]: {
     display: 'block',
-    whiteSpace: 'nowrap',
-    textOverflow: 'ellipsis',
-    width: '200px',
-    alignItems: 'center',
-    overflow: 'hidden',
-    paddingLeft: theme.spacing(),
-    fontSize: theme?.fontSize.ssm,
+    width: '500px',
+  },
+  [`@media (min-width: 1440px)`]: {
+    display: 'block',
+    width: '600px',
   },
 }));
 
@@ -68,11 +78,12 @@ const SearchItem: React.FC<SearchItemProps> = ({
     // no action assigned by default
   };
   return (
+    // eslint-disable-next-line verdaccio/jsx-no-style
     <li {...props} style={{ flexDirection: 'column' }}>
       <Wrapper>
         <NameGroup>
           <Name>{name}</Name>
-          {description && <Description>{description}</Description>}
+          {description && <Description>{cleanDescription(description)}</Description>}
         </NameGroup>
         {version && <Version>{version}</Version>}
       </Wrapper>

package/src/components/Search/utils.ts

@@ -0,0 +1,17 @@
+function removeHtmlTags(input: string): string {
+  let previous;
+  do {
+    previous = input;
+    input = input.replace(/<[^>]*>?/gm, '');
+  } while (input !== previous);
+  return input;
+}
+
+export function cleanDescription(description: string): string {
+  let output = description;
+  // remove html tags from description (e.g. <h1...>)
+  output = removeHtmlTags(output);
+  // remove markdown links from description (e.g. [link](url))
+  output = output.replace(/\(.*?\)/gm, '').replace(/(\[!?|\])/gm, '');
+  return output;
+}

package/src/components/SettingsMenu/SettingsMenu.test.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import { fireEvent, render, screen } from '../../test/test-react-testing-library';
+import SettingsMenu from './SettingsMenu';
+
+describe('<SettingsMenu />', () => {
+  test('should handle menu open and close', async () => {
+    render(<SettingsMenu packageName="foo" />);
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+    await screen.findByRole('menu');
+    // TODO onClose
+  });
+
+  test('should handle latest select', () => {
+    const { getByRole, getByText } = render(<SettingsMenu packageName="foo" />);
+    const button = getByRole('button');
+    fireEvent.click(button);
+    const menuItem = getByText('sidebar.installation.latest');
+    fireEvent.click(menuItem);
+    expect(getByText('sidebar.installation.latest')).toBeInTheDocument();
+  });
+
+  test('should handle global select', () => {
+    const { getByRole, getByText } = render(<SettingsMenu packageName="foo" />);
+    const button = getByRole('button');
+    fireEvent.click(button);
+    const menuItem = getByText('sidebar.installation.global');
+    fireEvent.click(menuItem);
+    expect(getByText('sidebar.installation.global')).toBeInTheDocument();
+  });
+
+  test('should handle yarn modern select', () => {
+    const { getByRole, getByText } = render(<SettingsMenu packageName="foo" />);
+    const button = getByRole('button');
+    fireEvent.click(button);
+    const menuItem = getByText('sidebar.installation.yarnModern');
+    fireEvent.click(menuItem);
+    expect(getByText('sidebar.installation.yarnModern')).toBeInTheDocument();
+  });
+});

package/src/components/SettingsMenu/SettingsMenu.tsx

@@ -7,28 +7,57 @@ import MenuItem from '@mui/material/MenuItem';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { useConfig } from '../../providers';
 import { useSettings } from '../../providers/PersistenceSettingProvider';
 
 interface Props {
   packageName: string;
 }
 
-const InstallListItem: React.FC<Props> = ({ packageName }) => {
+const SettingsMenu: React.FC<Props> = ({ packageName }) => {
   const { t } = useTranslation();
   const { localSettings, updateSettings } = useSettings();
+  const { configOptions } = useConfig();
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
   const open = Boolean(anchorEl);
   const handleOpenMenu = (event: React.MouseEvent<HTMLButtonElement>) => {
     setAnchorEl(event.currentTarget);
   };
-  const handleClick = () => {
-    const statusGlobal = !localSettings[packageName]?.global;
-    updateSettings({ [packageName]: { global: statusGlobal } });
+
+  const handleLatestSelect = () => {
+    updateSettings({
+      ...localSettings,
+      [packageName]: {
+        global: localSettings[packageName]?.global,
+        latest: !localSettings[packageName]?.latest,
+      },
+    });
     setAnchorEl(null);
   };
+
+  const handleGlobalSelect = () => {
+    updateSettings({
+      ...localSettings,
+      [packageName]: {
+        global: !localSettings[packageName]?.global,
+        latest: localSettings[packageName]?.latest,
+      },
+    });
+    setAnchorEl(null);
+  };
+
+  const handleGlobalYarnModern = () => {
+    const statusYarnModern = !localSettings?.yarnModern;
+    updateSettings({ ...localSettings, yarnModern: statusYarnModern });
+    setAnchorEl(null);
+  };
+
   const handleClose = () => {
     setAnchorEl(null);
   };
+
+  const statusLatest = localSettings[packageName]?.latest;
+  const statusGlobal = localSettings[packageName]?.global;
   return (
     <>
       <IconButton
@@ -46,22 +75,50 @@ const InstallListItem: React.FC<Props> = ({ packageName }) => {
           'aria-labelledby': 'basic-button',
         }}
         anchorEl={anchorEl}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'right',
+        }}
         id="basic-menu"
         onClose={handleClose}
         open={open}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'right',
+        }}
       >
-        <MenuItem onClick={handleClick}>
+        <MenuItem onClick={handleLatestSelect}>
+          {' '}
+          {statusLatest === true ? (
+            <ListItemIcon>
+              <Check />
+            </ListItemIcon>
+          ) : null}
+          {t('sidebar.installation.latest')}
+        </MenuItem>
+        <MenuItem onClick={handleGlobalSelect}>
           {' '}
-          {localSettings?.global ? (
+          {statusGlobal === true ? (
             <ListItemIcon>
               <Check />
             </ListItemIcon>
           ) : null}
           {t('sidebar.installation.global')}
         </MenuItem>
+        {configOptions?.pkgManagers?.includes('yarn') && (
+          <MenuItem onClick={handleGlobalYarnModern}>
+            {' '}
+            {localSettings?.yarnModern ? (
+              <ListItemIcon>
+                <Check />
+              </ListItemIcon>
+            ) : null}
+            {t('sidebar.installation.yarnModern')}
+          </MenuItem>
+        )}
       </Menu>
     </>
   );
 };
 
-export default InstallListItem;
+export default SettingsMenu;

package/src/components/{SideBarTittle/SideBarTittle.tsx → SideBarTitle/SideBarTitle.tsx}

@@ -20,11 +20,23 @@ interface Props {
   time: string;
 }
 
+const Icon = styled.div<{ theme?: Theme }>(({ theme }) => ({
+  marginLeft: theme?.spacing(1),
+}));
+
 const ModuleJS: React.FC<{ module: ModuleType | void }> = ({ module }) => {
   if (module === 'commonjs') {
-    return <CommonJS />;
+    return (
+      <Icon>
+        <CommonJS />
+      </Icon>
+    );
   } else if (module === 'module') {
-    return <ES6Modules />;
+    return (
+      <Icon>
+        <ES6Modules />
+      </Icon>
+    );
   } else {
     return null;
   }
@@ -46,7 +58,11 @@ const DetailSidebarTitle: React.FC<Props> = ({
         <TitleWrapper>
           <>
             {packageName}
-            {hasTypes && <TypeScript />}
+            {hasTypes && (
+              <Icon>
+                <TypeScript />
+              </Icon>
+            )}
             <ModuleJS module={moduleType} />
           </>
         </TitleWrapper>
@@ -78,4 +94,5 @@ const StyledHeading = styled(Heading)({
 
 const StyledBoxVersion = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
   color: theme?.palette.text.secondary,
+  fontSize: theme?.fontSize.sm,
 }));

package/src/components/SideBarTitle/index.ts

@@ -0,0 +1 @@
+export { default } from './SideBarTitle';

package/src/components/UpLinks/UpLinks.test.tsx

@@ -44,4 +44,11 @@ describe('<UpLinks /> component', () => {
 
     expect(wrapper).toMatchSnapshot();
   });
+
+  test('should not render if input is missing', () => {
+    const wrapper = render(<UpLinks packageMeta={undefined} />);
+    // expect nothing to be rendered
+    expect(wrapper.queryByTestId('no-uplinks-npm')).toBeNull();
+    expect(wrapper.queryByTestId('uplinks')).toBeNull();
+  });
 });

package/src/components/UpLinks/UpLinks.tsx

@@ -1,3 +1,6 @@
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import React from 'react';
@@ -5,6 +8,7 @@ import { useTranslation } from 'react-i18next';
 
 import { utils } from '../../utils';
 import NoItems from '../NoItems';
+import UpLinkLink from './UplinkLink';
 import { ListItemText, Spacer, StyledText } from './styles';
 
 const UpLinks: React.FC<{ packageMeta: any }> = ({ packageMeta }) => {
@@ -17,24 +21,43 @@ const UpLinks: React.FC<{ packageMeta: any }> = ({ packageMeta }) => {
   const { _uplinks: uplinks, latest } = packageMeta;
 
   if (Object.keys(uplinks).length === 0) {
-    return <NoItems data-testid="no-uplinks" text={t('uplinks.no-items', { name: latest.name })} />;
+    return (
+      <Card sx={{ mb: 2 }}>
+        <CardContent>
+          <NoItems data-testid="no-uplinks" text={t('uplinks.no-items', { name: latest.name })} />
+        </CardContent>
+      </Card>
+    );
   }
 
   return (
-    <>
-      <StyledText variant="subtitle1">{t('uplinks.title')}</StyledText>
-      <List>
-        {Object.keys(uplinks)
-          .reverse()
-          .map((name) => (
-            <ListItem key={name}>
-              <ListItemText>{name}</ListItemText>
-              <Spacer />
-              <ListItemText>{utils.formatDateDistance(uplinks[name].fetched)}</ListItemText>
-            </ListItem>
-          ))}
-      </List>
-    </>
+    <Card sx={{ mb: 2 }}>
+      <CardContent>
+        <Box data-testid="uplinks" sx={{ m: 2 }}>
+          <StyledText variant="subtitle1">{t('uplinks.title')}</StyledText>
+          <List dense={true}>
+            {Object.keys(uplinks)
+              .reverse()
+              .map((name) => (
+                <ListItem
+                  className="version-item"
+                  data-testid={`uplink-${name}`}
+                  key={name}
+                  sx={{ pr: 0 }}
+                >
+                  <ListItemText>
+                    <UpLinkLink packageName={latest.name} uplinkName={name} />
+                  </ListItemText>
+                  <Spacer />
+                  <ListItemText title={utils.formatDate(uplinks[name].fetched)}>
+                    {utils.formatDateDistance(uplinks[name].fetched)}
+                  </ListItemText>
+                </ListItem>
+              ))}
+          </List>
+        </Box>
+      </CardContent>
+    </Card>
   );
 };