Migrate to twenty-ui - navigation/breadcrumb (#7793)

### Description

- Move breadcrumb components to `twenty-ui`    \
  \
  \
  Fixes  #7534

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-ui/src/index.ts

@@ -2,6 +2,7 @@ export * from './accessibility';
 export * from './components';
 export * from './display';
 export * from './layout';
+export * from './navigation';
 export * from './testing';
 export * from './theme';
 export * from './utilities';

packages/twenty-ui/src/navigation/breadcrumb/components/Breadcrumb.tsx

@@ -0,0 +1,62 @@
+import styled from '@emotion/styled';
+import { Fragment, ReactNode } from 'react';
+import { Link } from 'react-router-dom';
+
+export type BreadcrumbProps = {
+  className?: string;
+  links: { children: string | ReactNode; href?: string }[];
+};
+
+const StyledWrapper = styled.nav`
+  align-items: center;
+  color: ${({ theme }) => theme.font.color.tertiary};
+  display: grid;
+  font-size: ${({ theme }) => theme.font.size.md};
+  grid-auto-flow: column;
+  grid-column-gap: ${({ theme }) => theme.spacing(1)};
+  max-width: 100%;
+  min-width: 0;
+  height: ${({ theme }) => theme.spacing(8)};
+`;
+
+const StyledLink = styled(Link)`
+  color: inherit;
+  text-decoration: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+const StyledText = styled.span`
+  color: ${({ theme }) => theme.font.color.primary};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+const StyledDivider = styled.span`
+  width: ${({ theme }) => theme.spacing(2)};
+`;
+
+export const Breadcrumb = ({ className, links }: BreadcrumbProps) => {
+  return (
+    <StyledWrapper className={className}>
+      {links.map((link, index) => {
+        const text = typeof link.children === 'string' ? link.children : '';
+
+        return (
+          <Fragment key={index}>
+            {link.href ? (
+              <StyledLink title={text} to={link.href}>
+                {link.children}
+              </StyledLink>
+            ) : (
+              <StyledText title={text}>{link.children}</StyledText>
+            )}
+            {index < links.length - 1 && <StyledDivider>/</StyledDivider>}
+          </Fragment>
+        );
+      })}
+    </StyledWrapper>
+  );
+};

packages/twenty-ui/src/navigation/index.ts

@@ -0,0 +1 @@
+export * from './breadcrumb/components/Breadcrumb';