@autobusal/common 1.1.1 → 1.2.1

package/Breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,42 @@
+import { TFunction } from 'i18next';
+import { GoHomeFill } from 'react-icons/go';
+import { RxCaretRight } from 'react-icons/rx';
+import { Container, Crumb, Current } from './styles';
+import useBreadcrumbsStore from '@autobusal/providers/stores/breadcrumbs';
+
+interface Props {
+  t: TFunction<'common'>
+}
+
+const Breadcrumbs = ({ t }: Props): JSX.Element => {
+  const { current, data } = useBreadcrumbsStore();
+
+  const final: JSX.Element[] = [];
+
+  data?.forEach((item, index) => {
+    final.push(
+      <RxCaretRight key={ `caret-${ index }` } />
+    );
+
+    final.push(
+      <Crumb key={ `crumb-${ index }` } to={ item.url }>{ item.name }</Crumb>
+    );
+  });
+
+  return (
+    <Container>
+      <Crumb to="/account"><GoHomeFill /> { t('breadcrumbs.account', { ns: 'common' }) }</Crumb>
+
+      { final }
+
+      { current && (
+        <>
+          <RxCaretRight key="last" />
+          <Current>{ current }</Current>
+        </>
+    ) }
+    </Container>
+  );
+};
+
+export default Breadcrumbs;

package/Breadcrumbs/styles.ts

@@ -0,0 +1,31 @@
+import { Link } from 'react-router-dom';
+import styled, { css } from 'styled-components';
+
+const CrumbStyles = css`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: ${ props => props.theme.size.xs };
+  color: ${ props => props.theme.submenu.font };
+`;
+
+export const Container = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  margin-bottom: 30px;
+`;
+
+export const Crumb = styled(Link)`
+  ${ CrumbStyles }
+
+  font-weight: 700;
+  transition: opacity 0.3s ease;
+`;
+
+export const Current = styled.div`
+  ${ CrumbStyles }
+
+  font-weight: 500;
+`;

package/index.ts

@@ -4,6 +4,7 @@ import Avatar from './Avatar';
 import BackTo from './Back/BackTo';
 import BackWithTitle from './Back/BackWithTitle';
 import BlogItem from './BlogItem/BlogItem';
+import Breadcrumbs from './Breadcrumbs/Breadcrumbs';
 import Button from './Button/Button';
 import Calendar from './Calendar/Calendar';
 import ChangeLanguage from './ChangeLanguage/ChangeLanguage';
@@ -39,6 +40,7 @@ export {
   BlogItem,
   Box,
   BoxMiddle,
+  Breadcrumbs,
   Button,
   Calendar,
   ChangeLanguage,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autobusal/common",
-  "version": "1.1.1",
+  "version": "1.2.1",
   "type": "module",
   "main": "index.ts"
 }