Feat: API Playground (#10376)

/claim #10283

---------

Co-authored-by: Félix Malfait <felix@twenty.com>
Co-authored-by: Félix Malfait <felix.malfait@gmail.com>

packages/twenty-front/src/modules/ui/layout/fullscreen/components/FullScreenContainer.tsx

@@ -0,0 +1,59 @@
+import { PageHeader } from '@/ui/layout/page/components/PageHeader';
+import {
+  Breadcrumb,
+  BreadcrumbProps,
+} from '@/ui/navigation/bread-crumb/components/Breadcrumb';
+import styled from '@emotion/styled';
+import { useLingui } from '@lingui/react/macro';
+import '@scalar/api-reference-react/style.css';
+import { IconButton, IconX, useIsMobile } from 'twenty-ui';
+
+type FullScreenContainerProps = {
+  children: JSX.Element | JSX.Element[];
+  links: BreadcrumbProps['links'];
+  exitFullScreen(): void;
+};
+
+const StyledFullScreen = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100dvw;
+  height: 100dvh;
+  background: ${({ theme }) => theme.background.noisy};
+`;
+
+const StyledMainContainer = styled.div`
+  border-top: 1px solid ${({ theme }) => theme.border.color.medium};
+  height: 100%;
+  width: 100%;
+`;
+
+export const FullScreenContainer = ({
+  children,
+  links,
+  exitFullScreen,
+}: FullScreenContainerProps) => {
+  const isMobile = useIsMobile();
+  const { t } = useLingui();
+
+  const handleExitFullScreen = () => {
+    exitFullScreen();
+  };
+
+  return (
+    <StyledFullScreen>
+      <PageHeader title={<Breadcrumb links={links} />}>
+        <IconButton
+          Icon={IconX}
+          dataTestId="close-button"
+          size={isMobile ? 'medium' : 'small'}
+          variant="secondary"
+          accent="default"
+          onClick={handleExitFullScreen}
+          ariaLabel={t`Exit Full Screen`}
+        />
+      </PageHeader>
+      <StyledMainContainer>{children}</StyledMainContainer>
+    </StyledFullScreen>
+  );
+};