hunk.code_window:               <span>{t('Published to Web')}</span>
               </p>
             )}
         </StyleWorkspaceInfo>
         <StyledSettingLink
           hoverBackground="#fff"
           onClick={e => {
             e.stopPropagation();
             onSettingClick(workspace);
           }}
  
hunk.labels: keep keep keep keep add keep keep keep keep keep
hunk.after_edit:         className="setting-entry"
  
hunk.file_path: apps/web/src/components/pure/workspace-card/index.tsx
hunk.type: add
file: import { displayFlex, styled, textEllipsis } from '@affine/component';
  import { IconButton } from '@affine/component';
  
  export const StyleWorkspaceInfo = styled('div')(({ theme }) => {
    return {
      marginLeft: '15px',
      width: '202px',
      p: {
        height: '20px',
        fontSize: theme.font.sm,
        ...displayFlex('flex-start', 'center'),
      },
      svg: {
        marginRight: '10px',
        fontSize: '16px',
        flexShrink: 0,
      },
      span: {
        flexGrow: 1,
        ...textEllipsis(1),
      },
    };
  });
  
  export const StyleWorkspaceTitle = styled('div')(({ theme }) => {
    return {
      fontSize: theme.font.base,
      fontWeight: 600,
      lineHeight: '24px',
      marginBottom: '10px',
      maxWidth: '200px',
      ...textEllipsis(1),
    };
  });
  
  export const StyledCard = styled('div')<{
    active?: boolean;
  }>(({ theme, active }) => {
    const borderColor = active ? theme.colors.primaryColor : 'transparent';
    return {
      width: '310px',
      height: '124px',
      cursor: 'pointer',
      padding: '16px',
      boxShadow: '0px 0px 8px rgba(0, 0, 0, 0.1)',
      borderRadius: '12px',
      border: `1px solid ${borderColor}`,
      ...displayFlex('flex-start', 'flex-start'),
      marginBottom: '24px',
      transition: 'background .2s',
      background: theme.palette.mode === 'light' ? '#FFF' : '#2C2C2C',
      position: 'relative',
      ':hover': {
        background: theme.colors.cardHoverBackground,
        '.add-icon': {
          borderColor: theme.colors.primaryColor,
          color: theme.colors.primaryColor,
        },
      },
    };
  });
  
  export const StyledModalHeader = styled('div')(() => {
    return {
      width: '100%',
      height: '72px',
      position: 'absolute',
      left: 0,
      top: 0,
      borderRadius: '24px 24px 0 0',
      padding: '0 40px',
      ...displayFlex('space-between', 'center'),
    };
  });
  
  export const StyledSettingLink = styled(IconButton)(({ theme }) => {
    return {
      position: 'absolute',
      right: '6px',
      bottom: '6px',
      ':hover': {
        background: theme.colors.pageBackground,
      },
    };
  });
  