How to use the @codesandbox/common/lib/utils/get-sandbox-name.getSandboxName function in @codesandbox/common

{sandboxes.map((s, i) => {
        // TODO: investigate type mismatch between SmallSandbox and getIcon
        // @ts-ignore
        const Icon = getIcon(s.template);

        return (
          
            
              {/* We should probably use the Sandbox interface instead
                 * of SmallSandbox
                // @ts-ignore */}
              {getSandboxName(s)}
              
            
            {format(new Date(s.insertedAt), 'MMM dd, yyyy')}
            {format(new Date(s.updatedAt), 'MMM dd, yyyy')}
            
              
            
            {s.likeCount}
            {s.viewCount}
            {s.forkCount}
            {isCurrentUser && onDelete ? (
              
                
              
            ) : null}

const dir =
        basename(item.collection.path) ||
        (item.collection.teamId ? 'Team Sandboxes' : 'My Sandboxes');

      if (dir) {
        editedSince += ` in ${dir}`;
      }
    }

    const itemInSelection = this.selectedSandboxesObject[item.id];

    return (

function Header({
  sandbox,
  showEditor,
  showPreview,
  setEditorView,
  setPreviewView,
  setMixedView,
  toggleSidebar,
  toggleLike,
  liked,
}: Props) {
  const sandboxTitle = getSandboxName(sandbox);

  return (
    
      
        
        <title title="{sandboxTitle}">{sandboxTitle}</title>

{(sandbox.forkedFromSandbox || sandbox.forkedTemplateSandbox) && (
          
            
              {sandbox.forkedTemplateSandbox ? 'Based On' : 'Forked From'}
            
            
              
                {getSandboxName(
                  sandbox.forkedFromSandbox || sandbox.forkedTemplateSandbox
                )}
              
            
          
        )}
      
    
  );
};

hitComponent={({ hit }) => (
           selectSandbox(hit)}
            noHeight
            sandbox={{
              ...hit,
              title: getSandboxName({
                id: hit.objectID,
                alias: hit.alias,
                git: hit.git,
                title: hit.title,
              }),
              id: hit.objectID,
            }}
          />
        )}
      />

  const sandboxName = useCallback(() => getSandboxName(sandbox) || 'Untitled', [
    sandbox,

onKeyUp={event => {
                  if (event.keyCode === 13) {
                    this.updateSandboxInfo();
                  }
                }}
                ref={el => {
                  if (el) {
                    el.focus();
                  }
                }}
                placeholder="Title"
              />
            
          ) : (
            <title>
              {workspace.project.title || getSandboxName(sandbox)}
              {editable &amp;&amp; &lt;EditPen onClick={this.setTitleEditing} /&gt;}
            </title>
          )}
          {this.state.editingDescription ? (
            
              <textarea value="{workspace.project.description}"> {
                  signals.workspace.valueChanged({
                    field: 'description',
                    value: event.target.value,
                  });
                }}
                type="text"
                onBlur={this.updateSandboxInfo}
                onKeyDown={event =&gt; {</textarea>

export const getIframeScript = (sandbox, mainModule, state) =>
  ``;

const orderedTemplates = sortBy(sortedTemplates, template =>
    getSandboxName(template.sandbox).toLowerCase()
  );

export const SandboxInfo = ({ sandbox }: ISandboxInfoProps) => {
  const environment = getTemplateDefinition(sandbox.template);
  const customTemplate = sandbox.customTemplate;

  return (
    
      
        {customTemplate && (
          
        )}
        <div>
          <title>
            {getSandboxName(sandbox)}{' '}
            &lt;PrivacyStatus
              style={{ marginLeft: '0.25rem' }}
              asIcon
              privacy={sandbox.privacy}
            /&gt;
          </title>
          
                The environment determines how a sandbox is executed, you can
                find more info{' '}
                <a href="/docs/environment">
                  here
                </a></div>