Added breadcrumbs component

example/pages/ListPage.tsx

@@ -1,34 +1,37 @@
-import { Chip, List, ProgressBar, InfoTile, SearchBar } from '@the-curve-consulting/texmo-react-components';
-import { Row, Col } from 'react-bootstrap';
+import { Chip, List, ProgressBar, SearchBar, Title, Breadcrumb } from '@the-curve-consulting/texmo-react-components';
+import { Col, Row } from 'react-bootstrap';
 
 const ListPage = () => {
   return (
     <div className="mt-5">
 
-    <Row className="g-4">
-      <Col xl={6}>
-        <InfoTile icon={'house'}>
-          <InfoTile.Title title='Title 1'/>
-          <InfoTile.Item text={'Text'} value={5}/>
-        </InfoTile>
+    <Row className="mt-4">
+      <Col>
+        <Breadcrumb>
+          <Breadcrumb.Item
+            text='Home' 
+            href='http://localhost:5173/' 
+          />
+          <Breadcrumb.Item 
+            text='List'
+            active
+          />
+        </Breadcrumb>
+
+        <Title text='Dashboard'/>
+        <div>This is a list</div>
       </Col>
 
-      <Col xl={6}>
-        <InfoTile icon={'house'}>
-          <InfoTile.Title title='Title 1'/> 
-          <InfoTile.Item text={'Text'} value={5}/>
-          <InfoTile.Item text={'Text'} value={3} theme={'secondary'}/>
-        </InfoTile>
+      <Col className='d-flex align-items-end'>
+        <div className='d-flex mt-3 justify-content-end w-100'>
+          <SearchBar>
+            <SearchBar.Input />
+            <SearchBar.Button />
+          </SearchBar>
+        </div>
       </Col>
     </Row>
 
-    <div className='d-flex mt-3 justify-content-end w-100'>
-      <SearchBar>
-        <SearchBar.Input />
-        <SearchBar.Button />
-      </SearchBar>
-    </div>
-
     <List>
       <List.Head>
         <List.Cell>Head 1</List.Cell>

scss/App.scss

@@ -1,6 +1,6 @@
 body {
   color: var(--texmo-text-color);
-  font-family: var(--texmo-font);
+  font-family: var(--texmo-font) !important;
   font-weight: 400;
   font-style: normal;
 }
@@ -51,13 +51,13 @@ h1 {
   padding: 15px;
 
   &:focus {
-      background-color: var(--texmo-bg-primary);
+    background-color: var(--texmo-bg-primary);
   }
 }
 
 .input-group {
   .search-input {
-      border-right: 0;
+    border-right: 0;
   }
 }
 
@@ -66,4 +66,56 @@ h1 {
   color: #9c9b9b;
   @extend .border;
   border-left: 0 !important;
+}
+
+.form-control.is-valid,
+.was-validated .form-control:valid {
+  background-image: none;
+}
+
+
+.form-control.is-invalid,
+.was-validated .form-control:invalid {
+  background-image: none;
+}
+
+
+a.card-link {
+  color: inherit;
+  text-decoration: none;
+}
+
+.card.card-hover-effect {
+  transition: transform 0.3s ease-in-out;
+  text-decoration: none;
+}
+
+.card-hover-effect:hover {
+  transform: translateY(5px);
+}
+
+.gray-text {
+  color: #9fa8b3;
+}
+
+.page-header {
+  width: 100%;
+}
+
+.page-header-column {
+  flex: 1;
+}
+
+.right-page-header-column {
+  justify-content: flex-end;
+}
+
+a.breadcrumb-item {
+  text-decoration: none;
+  color: var(--texmo-text-color);
+}
+
+a.breadcrumb-item:hover {
+  text-decoration: underline;
+  color: var(--texmo-text-color);
 }

src/components/breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import BreadcrumbItem, {
+  BreadcrumbItemProps,
+} from './components/BreadcrumbItem';
+
+interface BreadcrumbProps extends React.HTMLProps<HTMLHeadingElement> {}
+
+const Breadcrumb = ({ children, ...rest }: BreadcrumbProps) => {
+  const childrenArray = React.Children.toArray(children);
+
+  return (
+    <h5 {...rest}>
+      {childrenArray.map((child, index) => {
+        const childElement = child as React.ReactElement;
+        const childProps = childElement.props as BreadcrumbItemProps;
+
+        const isActive = childProps.active;
+
+        let className = childProps.className;
+        if (isActive) {
+          className = `${className} gray-text`;
+        }
+
+        let text = childProps.text;
+        if (index > 0) {
+          text = ` / ${text}`;
+        }
+
+        return React.cloneElement(childElement, {
+          text,
+          className,
+          key: index,
+        });
+      })}
+    </h5>
+  );
+};
+
+Breadcrumb.Item = BreadcrumbItem;
+
+export default Breadcrumb;

src/components/breadcrumb/components/BreadcrumbItem.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+export interface BreadcrumbItemProps extends React.HTMLProps<HTMLSpanElement> {
+  text: string;
+  active: boolean;
+  href: string;
+}
+
+const BreadcrumbItem = ({
+  text,
+  active,
+  href,
+  className,
+  ...rest
+}: BreadcrumbItemProps) => {
+  if (active) {
+    return (
+      <span className={className} {...rest}>
+        {text}
+      </span>
+    );
+  }
+
+  return (
+    <span className={className} {...rest}>
+      <a className="breadcrumb-item" href={href}>
+        {text}
+      </a>
+    </span>
+  );
+};
+
+export default BreadcrumbItem;

src/index.ts

@@ -13,6 +13,7 @@ import UserProfile from 'components/userProfile/UserProfile';
 import Nav from 'components/nav/Nav';
 import Footer from 'components/footer/Footer';
 import SearchBar from 'components/searchBar/SearchBar';
+import Breadcrumb from 'components/breadcrumb/Breadcrumb';
 import '../scss/texmo-react-components.scss';
 
 export {
@@ -31,4 +32,5 @@ export {
   Nav,
   Footer,
   SearchBar,
+  Breadcrumb,
 };