Breadcrumbs

src/components/BreadCrumbs/BreadCrumbs.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import BreadCrumbsItem from './components/BreadCrumbsItem';
+import { BreadCrumbsProps } from './interfaces/IBreadCrumbs';
+import styles from './sass/Breadcrumb.module.scss';
+import ClipboardCopy from '../ClipboardCopy/ClipboardCopy';
+
+const BreadCrumbs: React.FC<BreadCrumbsProps> = ({
+  breadcrumbItems,
+  separator = '/',
+  lastIsCopyable = false,
+}) => (
+  <nav className={styles.wrapper}>
+    <ol className={styles.list}>
+      {breadcrumbItems.map((item, index, array) => (
+        array.length - 1 === index && lastIsCopyable ? (
+          <ClipboardCopy key={item.name} copyText={`${window.location.origin}${item.url}`}>
+            <BreadCrumbsItem
+              key={item.name}
+              isLast={array.length - 1 === index}
+              separator={separator}
+              {...item}
+            />
+          </ClipboardCopy>
+        ) : (
+          <BreadCrumbsItem
+            key={item.name}
+            isLast={array.length - 1 === index}
+            separator={separator}
+            {...item}
+          />
+        )
+      ))}
+    </ol>
+  </nav>
+);
+
+export default BreadCrumbs;

src/components/BreadCrumbs/components/BreadCrumbsItem.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import styles from '../sass/BreadcrumbItem.module.scss';
+import { BreadcrumbItemProps } from '../interfaces/IBreadCrumbs';
+
+const BreadCrumbsItem: React.FC<BreadcrumbItemProps> = ({
+  separator = '/',
+  url = null,
+  name,
+  isLast,
+}) => (
+  <li key={name} className={styles.item}>
+    {url && !isLast ? (
+      <a href={url} className={styles.link}>
+        {name}
+      </a>
+    ) : (
+      <span className={styles.name}>{name}</span>
+    )}
+    {!isLast && <span className={styles.separator}>{separator}</span>}
+  </li>
+);
+
+export default BreadCrumbsItem;

src/components/BreadCrumbs/interfaces/IBreadCrumbs.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+
+export interface BreadCrumbsProps {
+  breadcrumbItems: Array<Omit<BreadcrumbItemProps, 'isLast' | 'separator'>>,
+  separator?: string | React.ReactNode,
+  lastIsCopyable?: boolean,
+}
+
+export interface BreadcrumbItemProps {
+  url: string,
+  name: string,
+  isLast: boolean,
+  separator: string | React.ReactNode,
+}

src/components/BreadCrumbs/sass/Breadcrumb.module.scss

@@ -0,0 +1,16 @@
+.wrapper {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-size: 14px;
+
+  .list {
+    min-height: 20px;
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+}

src/components/BreadCrumbs/sass/BreadcrumbItem.module.scss

@@ -0,0 +1,31 @@
+$gray: #8891A3;
+$primary-text: #363A42;
+
+.item {
+  display: inline-flex;
+  align-items: center;
+
+  .link {
+    transition: all 0.15s ease-out 0s;
+    cursor: pointer;
+    text-decoration: none;
+    outline: none;
+    color: $gray;
+    font-size: 12px;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  .name {
+    color: $primary-text;
+    font-weight: 600;
+  }
+
+  .separator {
+    margin: 0 8px;
+    color: $gray;
+    font-size: 12px;
+  }
+}

src/components/ClipboardCopy/ClipboardCopy.tsx

@@ -0,0 +1,38 @@
+import React, { FC } from 'react';
+import useCopyToClipboard from '../../hooks/useCopyToClipboard';
+import { ClipboardCopyProps } from './interfaces/IClipboardCopy';
+import AttachmentIcon from '../Icons/ClipboardIcon';
+import CheckIcon from '../Icons/Check';
+import styles from './sass/ClipboardCopy.module.scss';
+
+const ClipboardCopy: FC<ClipboardCopyProps> = ({
+  icon = <AttachmentIcon />,
+  className = '',
+  children,
+  copyText,
+}) => {
+  const [value, copy, setCopiedText] = useCopyToClipboard();
+
+  const handleCopy = (event: React.MouseEvent<HTMLDivElement>) => {
+    const target = event.target as HTMLDivElement;
+    if (target.nodeName !== 'A') copy(copyText);
+  };
+
+  const handleMouseLeave = () => setCopiedText(null);
+
+  return (
+    <div
+      role="presentation"
+      onClick={handleCopy}
+      onMouseLeave={handleMouseLeave}
+      className={`${styles.wrapper} ${className}`}
+    >
+      {children}
+      <span className={styles.icon}>
+        {value ? <CheckIcon /> : (icon || <AttachmentIcon />)}
+      </span>
+    </div>
+  );
+};
+
+export default ClipboardCopy;

src/components/ClipboardCopy/interfaces/IClipboardCopy.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+
+export interface ClipboardCopyProps {
+  children: ReactNode,
+  copyText: string,
+  className?: string,
+  icon?: ReactNode,
+}

src/components/ClipboardCopy/sass/ClipboardCopy.module.scss

@@ -0,0 +1,20 @@
+@import "../../../sass/colors";
+
+.wrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+
+  .icon {
+    display: none;
+  }
+
+  &:hover {
+    color: $gray;
+
+    .icon {
+      display: inline-flex;
+    }
+  }
+}

src/components/Icons/Check.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+const Check = () => (
+  <svg width={16} height={16} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g>
+      <path
+        d={'M7.99992 1.83331C4.31992 1.83331 1.33325 4.81998 1.33325 8.49998C1.33325 12.18 4.31992 15.1666 7.99992'
+          + ' 15.1666C11.6799 15.1666 14.6666 12.18 14.6666 8.49998C14.6666 4.81998 11.6799 1.83331 7.99992'
+          + ' 1.83331ZM7.99992 13.8333C5.05992 13.8333 2.66659 11.44 2.66659 8.49998C2.66659 5.55998 5.05992'
+          + ' 3.16665 7.99992 3.16665C10.9399 3.16665 13.3333 5.55998 13.3333 8.49998C13.3333 11.44 10.9399 '
+          + '13.8333 7.99992 13.8333ZM11.0599 5.55331L6.66658 9.94665L4.93992 8.22665L3.99992 9.16665L6.66658'
+          + ' 11.8333L11.9999 6.49998L11.0599 5.55331Z'}
+        fill="#FFA90B"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_20171_14345">
+        <rect width={16} height={16} fill="white" transform="translate(0 0.5)" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export default Check;

src/components/Icons/ClipboardIcon.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+const AttachmentIcon = () => (
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M7.34766 12.651L12.651 7.34766"
+      stroke="#8891A3"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d={'M11.3257 13.9771L9.11604 16.1868C8.41274 16.8899 7.45897 17.2848 6.46452 17.2847C5.47007'
+        + ' 17.2846 4.51638 16.8896 3.81319 16.1864C3.11001 15.4832 2.71493 14.5295 2.71484 13.5351C2.71476'
+        + ' 12.5406 3.10968 11.5868 3.81274 10.8835L6.02245 8.67383'}
+      stroke="#8891A3"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d={'M13.9771 11.3257L16.1868 9.11604C16.8899 8.41274 17.2848 7.45897 17.2847 6.46452C17.2847 5.47007 '
+        + '16.8896 4.51638 16.1864 3.81319C15.4832 3.11001 14.5295 2.71493 13.5351 2.71484C12.5406 2.71476 '
+        + '11.5868 3.10968 10.8835 3.81274L8.67383 6.02245'}
+      stroke="#8891A3"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+
+);
+
+export default AttachmentIcon;

src/components/index.ts

@@ -1,3 +1,4 @@
 export { default as Button } from './Button/Button';
 export { default as Bell } from './Bell/Bell';
+export { default as BreadCrumbs } from './BreadCrumbs/BreadCrumbs';
 export { default as Checkbox } from './Checkbox/Checkbox';

src/hooks/useCopyToClipboard.ts

@@ -0,0 +1,24 @@
+import { useState } from 'react';
+
+const useCopyToClipboard = () => {
+  const [copiedText, setCopiedText] = useState<string | null>('');
+
+  const copy = async (text: string) => {
+    if (!navigator?.clipboard) {
+      return false;
+    }
+
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopiedText(text);
+      return true;
+    } catch (error) {
+      setCopiedText(null);
+      return false;
+    }
+  };
+
+  return [copiedText, copy, setCopiedText] as const;
+};
+
+export default useCopyToClipboard;

src/stories/BreadCrumbs.stories.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { BreadCrumbs } from '../components';
+
+export default {
+  title: 'Test/BreadCrumbs',
+  component: BreadCrumbs,
+} as ComponentMeta<typeof BreadCrumbs>;
+
+const Template: ComponentStory<typeof BreadCrumbs> = (args) => <BreadCrumbs {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  breadcrumbItems: [
+    {
+      name: 'Home',
+      url: '/',
+    },
+    {
+      name: 'About',
+      url: '/about',
+    },
+    {
+      name: 'Contact',
+      url: '/about11',
+    },
+  ],
+};