Slash fix

dist/components/breadcrumb/Breadcrumb.d.ts

@@ -1,10 +1,9 @@
 import React from 'react';
-import { BreadcrumbItemProps } from './components/BreadcrumbItem';
 interface BreadcrumbProps extends React.HTMLProps<HTMLHeadingElement> {
 }
 declare const Breadcrumb: {
     ({ children, ...rest }: BreadcrumbProps): React.JSX.Element;
-    Item: ({ text, active, route, className, ...rest }: BreadcrumbItemProps) => React.JSX.Element;
+    Item: ({ text, active, route, showSlash, className, ...rest }: import("./components/BreadcrumbItem").BreadcrumbItemProps) => React.JSX.Element;
 };
 export default Breadcrumb;
 //# sourceMappingURL=Breadcrumb.d.ts.map

dist/components/breadcrumb/components/BreadcrumbItem.d.ts

@@ -2,8 +2,9 @@ import React from 'react';
 export interface BreadcrumbItemProps extends React.HTMLProps<HTMLSpanElement> {
     text: string;
     active: boolean;
-    route: string;
+    route?: string;
+    showSlash: boolean;
 }
-declare const BreadcrumbItem: ({ text, active, route, className, ...rest }: BreadcrumbItemProps) => React.JSX.Element;
+declare const BreadcrumbItem: ({ text, active, route, showSlash, className, ...rest }: BreadcrumbItemProps) => React.JSX.Element;
 export default BreadcrumbItem;
 //# sourceMappingURL=BreadcrumbItem.d.ts.map

dist/index.js

@@ -22850,7 +22850,7 @@ Form$1.DateTime = FormDateTime;
 
 var Title = function (_a) {
     var text = _a.text, rest = __rest(_a, ["text"]);
-    return (React.createElement("h1", __assign$1({ className: "fw-bold" }, rest), text));
+    return React.createElement("h1", __assign$1({}, rest), text);
 };
 
 var Card = function (_a) {
@@ -24391,12 +24391,15 @@ SearchBar.Input = SearchBarInput;
 SearchBar.Button = SearchBarButton;
 
 var BreadcrumbItem = function (_a) {
-    var text = _a.text, active = _a.active, route = _a.route, className = _a.className, rest = __rest(_a, ["text", "active", "route", "className"]);
+    var text = _a.text, active = _a.active, route = _a.route, showSlash = _a.showSlash, className = _a.className, rest = __rest(_a, ["text", "active", "route", "showSlash", "className"]);
     if (active) {
-        return (React.createElement("span", __assign$1({ className: "gray-text ".concat(className) }, rest), text));
+        return (React.createElement("span", __assign$1({ className: "gray-text ".concat(className) }, rest),
+            showSlash ? ' / ' : null,
+            text));
     }
     var baseUrl = window.location.origin;
     return (React.createElement("span", __assign$1({ className: className }, rest),
+        showSlash ? ' / ' : null,
         React.createElement("a", { className: "breadcrumb-item", href: "".concat(baseUrl).concat(route) }, text)));
 };
 
@@ -24405,14 +24408,9 @@ var Breadcrumb = function (_a) {
     var childrenArray = React.Children.toArray(children);
     return (React.createElement("h5", __assign$1({}, rest), childrenArray.map(function (child, index) {
         var childElement = child;
-        var childProps = childElement.props;
-        var text = childProps.text;
-        if (index > 0) {
-            text = " / ".concat(text);
-        }
         return React.cloneElement(childElement, {
-            text: text,
             key: index,
+            showSlash: index !== 0,
         });
     })));
 };

example/pages/ListPage.tsx

@@ -10,7 +10,7 @@ const ListPage = () => {
         <Breadcrumb>
           <Breadcrumb.Item
             text='Home' 
-            href='http://localhost:5173/' 
+            route='/' 
           />
           <Breadcrumb.Item 
             text='List'

src/components/breadcrumb/Breadcrumb.tsx

@@ -1,7 +1,5 @@
 import React from 'react';
-import BreadcrumbItem, {
-  BreadcrumbItemProps,
-} from './components/BreadcrumbItem';
+import BreadcrumbItem from './components/BreadcrumbItem';
 
 interface BreadcrumbProps extends React.HTMLProps<HTMLHeadingElement> {}
 
@@ -12,16 +10,10 @@ const Breadcrumb = ({ children, ...rest }: BreadcrumbProps) => {
     <h5 {...rest}>
       {childrenArray.map((child, index) => {
         const childElement = child as React.ReactElement;
-        const childProps = childElement.props as BreadcrumbItemProps;
-
-        let text = childProps.text;
-        if (index > 0) {
-          text = ` / ${text}`;
-        }
 
         return React.cloneElement(childElement, {
-          text,
           key: index,
+          showSlash: index !== 0,
         });
       })}
     </h5>

src/components/breadcrumb/components/BreadcrumbItem.tsx

@@ -3,19 +3,22 @@ import React from 'react';
 export interface BreadcrumbItemProps extends React.HTMLProps<HTMLSpanElement> {
   text: string;
   active: boolean;
-  route: string;
+  route?: string;
+  showSlash: boolean;
 }
 
 const BreadcrumbItem = ({
   text,
   active,
   route,
+  showSlash,
   className,
   ...rest
 }: BreadcrumbItemProps) => {
   if (active) {
     return (
       <span className={`gray-text ${className}`} {...rest}>
+        {showSlash ? ' / ' : null}
         {text}
       </span>
     );
@@ -25,6 +28,7 @@ const BreadcrumbItem = ({
 
   return (
     <span className={className} {...rest}>
+      {showSlash ? ' / ' : null}
       <a className="breadcrumb-item" href={`${baseUrl}${route}`}>
         {text}
       </a>

src/components/title/Title.tsx

@@ -5,11 +5,7 @@ export interface TitleProps extends React.HTMLProps<HTMLHeadingElement> {
 }
 
 const Title = ({ text, ...rest }: TitleProps) => {
-  return (
-    <h1 className="fw-bold" {...rest}>
-      {text}
-    </h1>
-  );
+  return <h1 {...rest}>{text}</h1>;
 };
 
 export default Title;