Enforce front project structure through ESLINT (#7863)

Fixes: https://github.com/twentyhq/twenty/issues/7329

packages/twenty-front/src/modules/ui/layout/top-bar/components/TopBar.tsx

@@ -0,0 +1,58 @@
+import styled from '@emotion/styled';
+import { ReactNode } from 'react';
+
+type TopBarProps = {
+  className?: string;
+  leftComponent?: ReactNode;
+  rightComponent?: ReactNode;
+  bottomComponent?: ReactNode;
+  displayBottomBorder?: boolean;
+};
+
+const StyledContainer = styled.div`
+  border-bottom: ${({ theme }) => `1px solid ${theme.border.color.light}`};
+  display: flex;
+
+  flex-direction: column;
+`;
+
+const StyledTopBar = styled.div`
+  align-items: center;
+
+  box-sizing: border-box;
+  color: ${({ theme }) => theme.font.color.secondary};
+  display: flex;
+  flex-direction: row;
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+  height: 39px;
+  justify-content: space-between;
+  padding-right: ${({ theme }) => theme.spacing(2)};
+  padding-left: ${({ theme }) => theme.spacing(2)};
+
+  z-index: 7;
+`;
+
+const StyledLeftSection = styled.div`
+  display: flex;
+`;
+
+const StyledRightSection = styled.div`
+  display: flex;
+  font-weight: ${({ theme }) => theme.font.weight.regular};
+  gap: ${({ theme }) => theme.betweenSiblingsGap};
+`;
+
+export const TopBar = ({
+  className,
+  leftComponent,
+  rightComponent,
+  bottomComponent,
+}: TopBarProps) => (
+  <StyledContainer className={className}>
+    <StyledTopBar>
+      <StyledLeftSection>{leftComponent}</StyledLeftSection>
+      <StyledRightSection>{rightComponent}</StyledRightSection>
+    </StyledTopBar>
+    {bottomComponent}
+  </StyledContainer>
+);