feat: add Object Detail page breadcrumb (#1962)

Closes #1814

front/src/modules/ui/breadcrumb/components/Breadcrumb.tsx

@@ -0,0 +1,43 @@
+import { Fragment } from 'react';
+import { Link } from 'react-router-dom';
+import styled from '@emotion/styled';
+
+type BreadcrumbProps = {
+  className?: string;
+  links: { children: string; href?: string }[];
+};
+
+const StyledWrapper = styled.nav`
+  align-items: center;
+  color: ${({ theme }) => theme.font.color.extraLight};
+  display: flex;
+  font-size: ${({ theme }) => theme.font.size.lg};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  gap: ${({ theme }) => theme.spacing(2)};
+  height: ${({ theme }) => theme.spacing(6)};
+  line-height: ${({ theme }) => theme.text.lineHeight.md};
+`;
+
+const StyledLink = styled(Link)`
+  color: inherit;
+  text-decoration: none;
+`;
+
+const StyledText = styled.span`
+  color: ${({ theme }) => theme.font.color.tertiary};
+`;
+
+export const Breadcrumb = ({ className, links }: BreadcrumbProps) => (
+  <StyledWrapper className={className}>
+    {links.map((link, index) => (
+      <Fragment key={index}>
+        {link.href ? (
+          <StyledLink to={link.href}>{link.children}</StyledLink>
+        ) : (
+          <StyledText>{link.children}</StyledText>
+        )}
+        {index < links.length - 1 && '/'}
+      </Fragment>
+    ))}
+  </StyledWrapper>
+);

front/src/modules/ui/breadcrumb/components/__stories__/Breadcrumb.stories.tsx

@@ -0,0 +1,24 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
+
+import { Breadcrumb } from '../Breadcrumb';
+
+const meta: Meta<typeof Breadcrumb> = {
+  title: 'UI/Breadcrumb/Breadcrumb',
+  component: Breadcrumb,
+  decorators: [ComponentDecorator, ComponentWithRouterDecorator],
+  args: {
+    links: [
+      { children: 'Objects', href: '/link-1' },
+      { children: 'Companies', href: '/link-2' },
+      { children: 'New' },
+    ],
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Breadcrumb>;
+
+export const Default: Story = {};