added files

Sasank123k · Jul 10, 2024 · e7c14ac · e7c14ac
1 parent 7476ce3
commit e7c14ac
Show file tree

Hide file tree

Showing 8 changed files with 1,192 additions and 1,024 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -47,6 +47,7 @@ import ProgressBar from './components/ProgressBar/ProgressBar';
 import Dropdown from './components/Dropdown/Dropdown';
 import Template1 from './pages/Examples/Template1/Template1';
 import Tab from './components/Tab/Tab';
+import Breadcrumb from './components/Breadcrumb/Breadcrumb';
 import { AuthProvider } from './context/AuthContext';
 
 const App: React.FC = () => {
@@ -95,6 +96,7 @@ const App: React.FC = () => {
           <Route path="/progressbar" element={<ProgressBar />} />
           <Route path="dropdown" element={<Dropdown />} />
           <Route path="/tab" element={<Tab />} />
+          <Route path="/breadcrumb" element={<Breadcrumb />} />
         </Routes>
         <Footer></Footer>
       </Router>

diff --git a/src/components/Breadcrumb/Breadcrumb.module.css b/src/components/Breadcrumb/Breadcrumb.module.css
@@ -0,0 +1,145 @@
+.pageContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 40px;
+    width: 100%;
+  }
+
+  /* Common Styles */
+  .breadcrumbSection {
+    width: 100%;
+    max-width: 800px;
+    margin: 20px auto;
+    padding: 20px;
+    font-family: Arial, sans-serif;
+    background-color: #f8f9fa;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    color: #333;
+  }
+
+  .breadcrumbSection a {
+    text-decoration: none;
+    color: #007bff;
+  }
+
+  .breadcrumbSection a:hover {
+    text-decoration: underline;
+  }
+
+  /* Simple Breadcrumb */
+  .simpleBreadcrumb {
+    display: flex;
+    gap: 5px;
+  }
+
+  /* Icon Breadcrumb */
+  .iconBreadcrumb {
+    display: flex;
+    align-items: center;
+  }
+
+  .breadcrumbIcon {
+    margin-right: 5px;
+  }
+
+  .breadcrumbSeparator {
+    margin: 0 5px;
+    color: #6c757d;
+  }
+
+  /* Vertical Breadcrumb */
+  .verticalBreadcrumb {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    align-items: flex-start;
+  }
+
+  .verticalBreadcrumb .breadcrumbSeparator {
+    margin: 5px 0;
+  }
+
+  /* Step Breadcrumb */
+  .stepBreadcrumb {
+    display: flex;
+    align-items: center;
+  }
+
+  .stepItem {
+    display: flex;
+    align-items: center;
+  }
+
+  .stepNumber {
+    margin-right: 5px;
+    background-color: #007bff;
+    color: white;
+    border-radius: 50%;
+    padding: 5px 10px;
+  }
+
+  /* Animated Breadcrumb */
+  .animatedBreadcrumb {
+    display: flex;
+    align-items: center;
+    animation: fadeIn 0.5s ease-in-out;
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  /* Code Box */
+  .codeBox {
+    margin-top: 20px;
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    background-color: #2d2d2d;
+    color: #fff;
+    max-height: 300px;
+    overflow-y: scroll;
+    position: relative;
+    width: 75%;
+  }
+
+  .toggleButtons {
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+    margin-bottom: 10px;
+  }
+
+  .toggleButton {
+    padding: 5px 10px;
+    cursor: pointer;
+    border: 1px solid #ddd;
+    background-color: #444;
+    color: #fff;
+    border-radius: 3px;
+  }
+
+  .toggleButton.active {
+    background-color: #3b82f6;
+    border-color: #3b82f6;
+  }
+
+  .copyButton {
+    padding: 5px 10px;
+    cursor: pointer;
+    border: 1px solid #ddd;
+    background-color: #444;
+    color: #fff;
+    border-radius: 3px;
+    position: absolute;
+    top: 10px;
+    right: 10px;
+  }
+
diff --git a/src/components/Breadcrumb/Breadcrumb.tsx b/src/components/Breadcrumb/Breadcrumb.tsx
@@ -0,0 +1,193 @@
+import React, { useState } from 'react';
+import styles from './Breadcrumb.module.css';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { FaHome, FaChevronRight, FaChevronDown, FaAngleDoubleRight } from 'react-icons/fa';
+
+const Breadcrumb: React.FC = () => {
+  const [codeType1, setCodeType1] = useState('tsx');
+  const [codeType2, setCodeType2] = useState('tsx');
+  const [codeType3, setCodeType3] = useState('tsx');
+  const [codeType4, setCodeType4] = useState('tsx');
+  const [codeType5, setCodeType5] = useState('tsx');
+
+  const tsxCode1 = `// TSX code for Simple Breadcrumb`;
+  const cssCode1 = `.simpleBreadcrumb { /* CSS for Simple Breadcrumb */ }`;
+
+  const tsxCode2 = `// TSX code for Icon Breadcrumb`;
+  const cssCode2 = `.iconBreadcrumb { /* CSS for Icon Breadcrumb */ }`;
+
+  const tsxCode3 = `// TSX code for Vertical Breadcrumb`;
+  const cssCode3 = `.verticalBreadcrumb { /* CSS for Vertical Breadcrumb */ }`;
+
+  const tsxCode4 = `// TSX code for Step Breadcrumb`;
+  const cssCode4 = `.stepBreadcrumb { /* CSS for Step Breadcrumb */ }`;
+
+  const tsxCode5 = `// TSX code for Animated Breadcrumb`;
+  const cssCode5 = `.animatedBreadcrumb { /* CSS for Animated Breadcrumb */ }`;
+
+  return (
+    <div className={styles.pageContainer}>
+      {/* Simple Breadcrumb */}
+      <div className={styles.breadcrumbSection}>
+        <div className={styles.simpleBreadcrumb}>
+          <a href="#">Home</a> / <a href="#">Library</a> / <a href="#">Data</a>
+        </div>
+        <div className={styles.codeBox}>
+          <div className={styles.toggleButtons}>
+            <button
+              className={`${styles.toggleButton} ${codeType1 === 'tsx' ? styles.active : ''}`}
+              onClick={() => setCodeType1('tsx')}
+            >
+              TSX
+            </button>
+            <button
+              className={`${styles.toggleButton} ${codeType1 === 'css' ? styles.active : ''}`}
+              onClick={() => setCodeType1('css')}
+            >
+              CSS
+            </button>
+          </div>
+          <CopyToClipboard text={codeType1 === 'tsx' ? tsxCode1 : cssCode1}>
+            <button className={styles.copyButton}>Copy</button>
+          </CopyToClipboard>
+          <pre>{codeType1 === 'tsx' ? tsxCode1 : cssCode1}</pre>
+        </div>
+      </div>
+
+      {/* Icon Breadcrumb */}
+      <div className={styles.breadcrumbSection}>
+        <div className={styles.iconBreadcrumb}>
+          <a href="#"><FaHome className={styles.breadcrumbIcon} /> Home</a>
+          <FaChevronRight className={styles.breadcrumbSeparator} />
+          <a href="#">Library</a>
+          <FaChevronRight className={styles.breadcrumbSeparator} />
+          <a href="#">Data</a>
+        </div>
+        <div className={styles.codeBox}>
+          <div className={styles.toggleButtons}>
+            <button
+              className={`${styles.toggleButton} ${codeType2 === 'tsx' ? styles.active : ''}`}
+              onClick={() => setCodeType2('tsx')}
+            >
+              TSX
+            </button>
+            <button
+              className={`${styles.toggleButton} ${codeType2 === 'css' ? styles.active : ''}`}
+              onClick={() => setCodeType2('css')}
+            >
+              CSS
+            </button>
+          </div>
+          <CopyToClipboard text={codeType2 === 'tsx' ? tsxCode2 : cssCode2}>
+            <button className={styles.copyButton}>Copy</button>
+          </CopyToClipboard>
+          <pre>{codeType2 === 'tsx' ? tsxCode2 : cssCode2}</pre>
+        </div>
+      </div>
+
+      {/* Vertical Breadcrumb */}
+      <div className={styles.breadcrumbSection}>
+        <div className={styles.verticalBreadcrumb}>
+          <a href="#">Home</a>
+          <FaChevronDown className={styles.breadcrumbSeparator} />
+          <a href="#">Library</a>
+          <FaChevronDown className={styles.breadcrumbSeparator} />
+          <a href="#">Data</a>
+        </div>
+        <div className={styles.codeBox}>
+          <div className={styles.toggleButtons}>
+            <button
+              className={`${styles.toggleButton} ${codeType3 === 'tsx' ? styles.active : ''}`}
+              onClick={() => setCodeType3('tsx')}
+            >
+              TSX
+            </button>
+            <button
+              className={`${styles.toggleButton} ${codeType3 === 'css' ? styles.active : ''}`}
+              onClick={() => setCodeType3('css')}
+            >
+              CSS
+            </button>
+          </div>
+          <CopyToClipboard text={codeType3 === 'tsx' ? tsxCode3 : cssCode3}>
+            <button className={styles.copyButton}>Copy</button>
+          </CopyToClipboard>
+          <pre>{codeType3 === 'tsx' ? tsxCode3 : cssCode3}</pre>
+        </div>
+      </div>
+
+      {/* Step Breadcrumb */}
+      <div className={styles.breadcrumbSection}>
+        <div className={styles.stepBreadcrumb}>
+          <div className={styles.stepItem}>
+            <span className={styles.stepNumber}>1</span>
+            <a href="#">Home</a>
+          </div>
+          <FaAngleDoubleRight className={styles.breadcrumbSeparator} />
+          <div className={styles.stepItem}>
+            <span className={styles.stepNumber}>2</span>
+            <a href="#">Library</a>
+          </div>
+          <FaAngleDoubleRight className={styles.breadcrumbSeparator} />
+          <div className={styles.stepItem}>
+            <span className={styles.stepNumber}>3</span>
+            <a href="#">Data</a>
+          </div>
+        </div>
+        <div className={styles.codeBox}>
+          <div className={styles.toggleButtons}>
+            <button
+              className={`${styles.toggleButton} ${codeType4 === 'tsx' ? styles.active : ''}`}
+              onClick={() => setCodeType4('tsx')}
+            >
+              TSX
+            </button>
+            <button
+              className={`${styles.toggleButton} ${codeType4 === 'css' ? styles.active : ''}`}
+              onClick={() => setCodeType4('css')}
+            >
+              CSS
+            </button>
+          </div>
+          <CopyToClipboard text={codeType4 === 'tsx' ? tsxCode4 : cssCode4}>
+            <button className={styles.copyButton}>Copy</button>
+          </CopyToClipboard>
+          <pre>{codeType4 === 'tsx' ? tsxCode4 : cssCode4}</pre>
+        </div>
+      </div>
+
+      {/* Animated Breadcrumb */}
+      <div className={styles.breadcrumbSection}>
+        <div className={styles.animatedBreadcrumb}>
+          <a href="#">Home</a>
+          <FaChevronRight className={styles.breadcrumbSeparator} />
+          <a href="#">Library</a>
+          <FaChevronRight className={styles.breadcrumbSeparator} />
+          <a href="#">Data</a>
+        </div>
+        <div className={styles.codeBox}>
+          <div className={styles.toggleButtons}>
+            <button
+              className={`${styles.toggleButton} ${codeType5 === 'tsx' ? styles.active : ''}`}
+              onClick={() => setCodeType5('tsx')}
+            >
+              TSX
+            </button>
+            <button
+              className={`${styles.toggleButton} ${codeType5 === 'css' ? styles.active : ''}`}
+              onClick={() => setCodeType5('css')}
+            >
+              CSS
+            </button>
+          </div>
+          <CopyToClipboard text={codeType5 === 'tsx' ? tsxCode5 : cssCode5}>
+            <button className={styles.copyButton}>Copy</button>
+          </CopyToClipboard>
+          <pre>{codeType5 === 'tsx' ? tsxCode5 : cssCode5}</pre>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Breadcrumb;