Migrate to a monorepo structure (#2909)

packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageLeftContainer.tsx

@@ -0,0 +1,61 @@
+import { ReactElement } from 'react';
+import styled from '@emotion/styled';
+
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
+import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
+
+const StyledOuterContainer = styled.div`
+  background: ${({ theme }) => theme.background.secondary};
+  border-bottom-left-radius: 8px;
+  border-right: ${({ theme }) => {
+    const isMobile = useIsMobile();
+    return !isMobile ? `1px solid ${theme.border.color.medium}` : 'none';
+  }};
+  border-top-left-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(3)};
+
+  z-index: 10;
+`;
+
+const StyledInnerContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 0px ${({ theme }) => theme.spacing(2)} 0px
+    ${({ theme }) => theme.spacing(3)};
+  width: ${({ theme }) => {
+    const isMobile = useIsMobile();
+
+    return isMobile ? `calc(100% - ${theme.spacing(5)})` : '320px';
+  }};
+`;
+
+const StyledIntermediateContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding-bottom: ${({ theme }) => theme.spacing(3)};
+`;
+
+export type ShowPageLeftContainerProps = {
+  children: ReactElement[];
+};
+
+export const ShowPageLeftContainer = ({
+  children,
+}: ShowPageLeftContainerProps) => {
+  const isMobile = useIsMobile();
+  return isMobile ? (
+    <StyledOuterContainer>
+      <StyledInnerContainer>{children}</StyledInnerContainer>
+    </StyledOuterContainer>
+  ) : (
+    <StyledOuterContainer>
+      <ScrollWrapper>
+        <StyledIntermediateContainer>
+          <StyledInnerContainer>{children}</StyledInnerContainer>
+        </StyledIntermediateContainer>
+      </ScrollWrapper>
+    </StyledOuterContainer>
+  );
+};