Get correct SandboxInfo title (codesandbox#2970)

Author: MichaelDeBoey

…mponents/Sidebar/SandboxInfo/elements.js …mponents/Sidebar/SandboxInfo/elements.tspackages/app/src/embed/components/Sidebar/SandboxInfo/elements.js renamed to packages/app/src/embed/components/Sidebar/SandboxInfo/elements.ts packages/app/src/embed/components/Sidebar/SandboxInfo/elements.js renamed to packages/app/src/embed/components/Sidebar/SandboxInfo/elements.ts

@@ -1,7 +1,7 @@
-import styled from 'styled-components';
-import css from '@styled-system/css';
 import CommonStats from '@codesandbox/common/lib/components/Stats';
 import { CenteredText } from '@codesandbox/common/lib/components/Stats/Stat/elements';
+import css from '@styled-system/css';
+import styled from 'styled-components';
 
 export const Container = styled.div(
   css({

packages/app/src/embed/components/Sidebar/SandboxInfo/index.js

@@ -0,0 +1,31 @@
+import { Sandbox } from '@codesandbox/common/lib/types';
+import { getSandboxName } from '@codesandbox/common/lib/utils/get-sandbox-name';
+import React, { FunctionComponent } from 'react';
+
+import AvatarBlock from '../AvatarBlock';
+
+import { Container, Description, Stats, Title } from './elements';
+
+type Props = {
+  sandbox: Sandbox;
+};
+export const SandboxInfo: FunctionComponent<Props> = ({ sandbox }) => {
+  const title = getSandboxName(sandbox);
+
+  return (
+    <Container>
+      <Title title={title}>{title}</Title>
+
+      {sandbox.description && <Description>{sandbox.description}</Description>}
+
+      {sandbox.author && (
+        <AvatarBlock
+          url={sandbox.author.avatarUrl}
+          name={sandbox.author.username}
+        />
+      )}
+
+      <Stats {...sandbox} />
+    </Container>
+  );
+};

packages/app/src/embed/components/Sidebar/SandboxInfo/index.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import type { Sandbox } from '@codesandbox/common/lib/types';
 
 import Section from './Section';
-import SandboxInfo from './SandboxInfo';
+import { SandboxInfo } from './SandboxInfo';
 import FileTree from './FileTree';
 import Dependencies from './Dependencies';
 import ExternalResources from './ExternalResources';