From e7c14acabe81051605ae50d337f1399843b4d370 Mon Sep 17 00:00:00 2001 From: Sasank123k Date: Thu, 11 Jul 2024 00:27:40 +0530 Subject: [PATCH] added files --- src/App.tsx | 2 + .../Breadcrumb/Breadcrumb.module.css | 145 ++++ src/components/Breadcrumb/Breadcrumb.tsx | 193 ++++ src/components/Dropdown/Dropdown.module.css | 169 ++-- src/components/Dropdown/Dropdown.tsx | 821 ++++++------------ src/components/Tab/Tab.module.css | 306 ++++--- src/components/Tab/Tab.tsx | 577 ++++++------ src/pages/Components/Components.tsx | 3 +- 8 files changed, 1192 insertions(+), 1024 deletions(-) create mode 100644 src/components/Breadcrumb/Breadcrumb.module.css create mode 100644 src/components/Breadcrumb/Breadcrumb.tsx diff --git a/src/App.tsx b/src/App.tsx index b29918e..2f0aae9 100644 --- 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 = () => { } /> } /> } /> + } />
diff --git a/src/components/Breadcrumb/Breadcrumb.module.css b/src/components/Breadcrumb/Breadcrumb.module.css new file mode 100644 index 0000000..b5b146c --- /dev/null +++ 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; + } + \ No newline at end of file diff --git a/src/components/Breadcrumb/Breadcrumb.tsx b/src/components/Breadcrumb/Breadcrumb.tsx new file mode 100644 index 0000000..f752be8 --- /dev/null +++ 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 ( +
+ {/* Simple Breadcrumb */} +
+
+ Home / Library / Data +
+
+
+ + +
+ + + + 
{codeType1 === 'tsx' ? tsxCode1 : cssCode1}
+
+
+ + {/* Icon Breadcrumb */} +
+
+ Home + + Library + + Data +
+
+
+ + +
+ + + + 
{codeType2 === 'tsx' ? tsxCode2 : cssCode2}
+
+
+ + {/* Vertical Breadcrumb */} +
+
+ Home + + Library + + Data +
+
+
+ + +
+ + + + 
{codeType3 === 'tsx' ? tsxCode3 : cssCode3}
+
+
+ + {/* Step Breadcrumb */} +
+
+
+ 1 + Home +
+ +
+ 2 + Library +
+ +
+ 3 + Data +
+
+
+
+ + +
+ + + + 
{codeType4 === 'tsx' ? tsxCode4 : cssCode4}
+
+
+ + {/* Animated Breadcrumb */} +
+
+ Home + + Library + + Data +
+
+
+ + +
+ + + + 
{codeType5 === 'tsx' ? tsxCode5 : cssCode5}
+
+
+
+ ); +}; + +export default Breadcrumb; diff --git a/src/components/Dropdown/Dropdown.module.css b/src/components/Dropdown/Dropdown.module.css index 5885b90..38a90df 100644 --- a/src/components/Dropdown/Dropdown.module.css +++ b/src/components/Dropdown/Dropdown.module.css @@ -1,101 +1,139 @@ -.dropdownContainer { +.pageContainer { display: flex; - justify-content: center; - margin: 20px 0; flex-direction: column; align-items: center; + gap: 40px; + width: 100%; } -.dropdown, .dropdown2, .dropdown3, .dropdown4 { - position: relative; - display: inline-block; - margin-bottom: 20px; +/* Common Dropdown Styles */ +.dropdownSection { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; } -.dropdownButton, .dropdownButton2, .dropdownButton3, .dropdownButton4 { - background-color: #f8f8f8; - color: #333; - padding: 10px 20px; - font-size: 16px; - border: 1px solid #ddd; +.dropdownButton { + padding: 10px; + background-color: #007bff; + color: white; + border: none; border-radius: 4px; cursor: pointer; - transition: background-color 0.3s ease; } -.dropdownButton:hover, .dropdownButton2:hover, .dropdownButton3:hover, .dropdownButton4:hover { - background-color: #e0e0e0; +.dropdownMenu { + border: 1px solid #ddd; + background-color: white; + padding: 10px; + position: absolute; + z-index: 1000; + display: flex; + flex-direction: column; } -.dropdownButton::after, .dropdownButton2::after, .dropdownButton3::after, .dropdownButton4::after { - content: ' ▼'; - font-size: 12px; - margin-left: 8px; +.dropdownItem { + padding: 5px 10px; + cursor: pointer; + white-space: nowrap; } -.dropdownMenu, .dropdownMenu2, .dropdownMenu3, .dropdownMenu4 { - display: block; - position: absolute; - background-color: white; - min-width: 200px; - box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); - border-radius: 4px; - z-index: 1; - margin-top: 8px; - padding: 10px 0; +.dropdownItem:hover { + background-color: #f1f1f1; } -.dropdownItem, .dropdownItem2, .dropdownItem3, .dropdownItem4 { - color: #333; - padding: 12px 20px; - text-decoration: none; - display: block; - transition: background-color 0.3s ease; - position: relative; +.dropdownIcon { + margin-right: 10px; } -.dropdownItem:hover, .dropdownItem2:hover, .dropdownItem3:hover, .dropdownItem4:hover { - background-color: #f1f1f1; +/* Specific Dropdown Styles */ + +/* Dropdown 2 */ + +.dropdownButton2 .dropdownMenu { + padding: 10px; } -.icon { - margin-right: 10px; +/* Dropdown 3 */ + +.dropdownMenu3 { + display: flex; + flex-direction: column; + align-items: center; } -.dropdownHeader { - padding: 12px 20px; - font-size: 14px; - color: #555; - border-bottom: 1px solid #ddd; - margin-bottom: 10px; +.dropdownItem3 { + padding: 5px 10px; + display: flex; + align-items: center; + cursor: pointer; +} + +.userInfo { + margin-left: 10px; +} + +.userName { + font-weight: bold; +} + +.userEmail { + font-size: 0.9em; + color: #666; +} + +/* Dropdown 4 */ +.dropdownItem4 { + position: relative; +} + +.nestedDropdownIndicator { + float: right; } .nestedDropdownMenu { - display: block; + display: none; position: absolute; left: 100%; top: 0; + border: 1px solid #ddd; background-color: white; - min-width: 200px; - box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); - border-radius: 4px; - z-index: 1; - margin-top: 0; - padding: 10px 0; + padding: 10px; + z-index: 1001; } -.nestedDropdownItem { - color: #333; - padding: 12px 20px; - text-decoration: none; +.dropdownItem:hover .nestedDropdownMenu { display: block; - transition: background-color 0.3s ease; } -.nestedDropdownItem:hover { - background-color: #f1f1f1; +.dropdownItem .nestedDropdownMenu .dropdownItem { + display: block; } +/* Dropdown 5 */ +.dropdownItem5 { + display: flex; + align-items: center; + justify-content: space-between; + +} + +.dropdownCheckbox { + margin-right: 10px; +} + +.selectButton { + margin-top: 10px; + padding: 5px 10px; + background-color: #28a745; + color: white; + border: none; + border-radius: 4px; + cursor: pointer; +} + +/* Code Box */ .codeBox { margin-top: 20px; padding: 10px; @@ -106,6 +144,7 @@ max-height: 300px; overflow-y: scroll; position: relative; + width: 75%; } .toggleButtons { @@ -140,11 +179,3 @@ top: 10px; right: 10px; } - -.heading { - margin-top: 40px; - text-align: center; - font-size: 24px; - color: #333; - margin-bottom: 20px; -} diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx index 1340f34..9fdf0d7 100644 --- a/src/components/Dropdown/Dropdown.tsx +++ b/src/components/Dropdown/Dropdown.tsx @@ -1,595 +1,326 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect, useRef } from 'react'; import styles from './Dropdown.module.css'; +import { CopyToClipboard } from 'react-copy-to-clipboard'; +import { FaUser, FaCog, FaSignOutAlt, FaCheck, FaCheckCircle, FaBell } from 'react-icons/fa'; const Dropdown: React.FC = () => { - const [isOpen1, setIsOpen1] = useState(false); - const [isOpen2, setIsOpen2] = useState(false); - const [isOpen3, setIsOpen3] = useState(false); - const [isOpen4, setIsOpen4] = useState(false); - const [nestedOpen, setNestedOpen] = useState(false); - const [codeType, setCodeType] = useState('tsx'); - - const toggleDropdown1 = () => setIsOpen1(!isOpen1); - const toggleDropdown2 = () => setIsOpen2(!isOpen2); - const toggleDropdown3 = () => setIsOpen3(!isOpen3); - const toggleDropdown4 = () => setIsOpen4(!isOpen4); - const toggleNestedDropdown = () => setNestedOpen(!nestedOpen); - - const dropdown1TsxCode = `import React, { useState } from 'react'; -import styles from './Dropdown.module.css'; - -const Dropdown1: React.FC = () => { - const [isOpen, setIsOpen] = useState(false); - - const toggleDropdown = () => { - setIsOpen(!isOpen); + const [isDropdownOpen1, setIsDropdownOpen1] = useState(false); + const [isDropdownOpen2, setIsDropdownOpen2] = useState(false); + const [isDropdownOpen3, setIsDropdownOpen3] = useState(false); + const [isDropdownOpen4, setIsDropdownOpen4] = useState(false); + const [isDropdownOpen5, setIsDropdownOpen5] = useState(false); + const [selectedItems, setSelectedItems] = useState([]); + + 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 handleCheckboxChange = (item: string) => { + setSelectedItems((prevSelectedItems) => + prevSelectedItems.includes(item) + ? prevSelectedItems.filter((i) => i !== item) + : [...prevSelectedItems, item] + ); }; - return ( -
- - {isOpen && ( -
    -
  • Account settings
    • -
  • Support
    • -
  • License
    • -
  • Sign out
    • -
- )} -
- ); -}; - -export default Dropdown1;`; - - const dropdown1CssCode = `.dropdown { - position: relative; - display: inline-block; -} - -.dropdownButton { - background-color: #f8f8f8; - color: #333; - padding: 10px 20px; - font-size: 16px; - border: 1px solid #ddd; - border-radius: 4px; - cursor: pointer; - transition: background-color 0.3s ease; -} - -.dropdownButton:hover { - background-color: #e0e0e0; -} - -.dropdownButton::after { - content: ' ▼'; - font-size: 12px; - margin-left: 8px; -} - -.dropdownMenu { - display: block; - position: absolute; - background-color: white; - min-width: 200px; - box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); - border-radius: 4px; - z-index: 1; - margin-top: 8px; - padding: 10px 0; -} - -.dropdownItem { - color: #333; - padding: 12px 20px; - text-decoration: none; - display: block; - transition: background-color 0.3s ease; -} - -.dropdownItem:hover { - background-color: #f1f1f1; -}`; - - const dropdown2TsxCode = `import React, { useState } from 'react'; -import styles from './Dropdown.module.css'; - -const Dropdown2: React.FC = () => { - const [isOpen, setIsOpen] = useState(false); - - const toggleDropdown = () => { - setIsOpen(!isOpen); + const handleSelectClick = () => { + alert(`Selected items: ${selectedItems.join(', ')}`); }; - return ( -
- - {isOpen && ( -
    -
  • - ✏️ Edit -
    • -
  • - 📄 Duplicate -
    • -
  • - 🗃️ Archive -
    • -
  • - ➡️ Move -
    • -
  • - 👥 Share -
    • -
  • - ❤️ Add to favorites -
    • -
  • - 🗑️ Delete -
    • -
- )} -
- ); -}; - -export default Dropdown2;`; - - const dropdown2CssCode = `.dropdown2 { - position: relative; - display: inline-block; -} - -.dropdownButton2 { - background-color: #f8f8f8; - color: #333; - padding: 10px 20px; - font-size: 16px; - border: 1px solid #ddd; - border-radius: 4px; - cursor: pointer; - transition: background-color 0.3s ease; -} - -.dropdownButton2:hover { - background-color: #e0e0e0; -} - -.dropdownButton2::after { - content: ' ▼'; - font-size: 12px; - margin-left: 8px; -} - -.dropdownMenu2 { - display: block; - position: absolute; - background-color: white; - min-width: 200px; - box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); - border-radius: 4px; - z-index: 1; - margin-top: 8px; - padding: 10px 0; -} - -.dropdownItem2 { - color: #333; - padding: 12px 20px; - text-decoration: none; - display: flex; - align-items: center; - transition: background-color 0.3s ease; -} - -.dropdownItem2:hover { - background-color: #f1f1f1; -} - -.icon { - margin-right: 10px; -}`; - - const dropdown3TsxCode = `import React, { useState } from 'react'; -import styles from './Dropdown.module.css'; - -const Dropdown3: React.FC = () => { - const [isOpen, setIsOpen] = useState(false); - - const toggleDropdown = () => { - setIsOpen(!isOpen); + const handleClickOutside = (event: MouseEvent) => { + if (!dropdownRef1.current?.contains(event.target as Node)) { + setIsDropdownOpen1(false); + } + if (!dropdownRef2.current?.contains(event.target as Node)) { + setIsDropdownOpen2(false); + } + if (!dropdownRef3.current?.contains(event.target as Node)) { + setIsDropdownOpen3(false); + } + if (!dropdownRef4.current?.contains(event.target as Node)) { + setIsDropdownOpen4(false); + } + if (!dropdownRef5.current?.contains(event.target as Node)) { + setIsDropdownOpen5(false); + } }; - return ( -
- - {isOpen && ( -
    -
  • Signed in as tom@example.com
    • -
  • Account settings
    • -
  • Support
    • -
  • License
    • -
  • Sign out
    • -
- )} -
- ); -}; - -export default Dropdown3;`; - - const dropdown3CssCode = `.dropdown3 { - position: relative; - display: inline-block; -} - -.dropdownButton3 { - background-color: #f8f8f8; - color: #333; - padding: 10px 20px; - font-size: 16px; - border: 1px solid #ddd; - border-radius: 4px; - cursor: pointer; - transition: background-color 0.3s ease; -} - -.dropdownButton3:hover { - background-color: #e0e0e0; -} + useEffect(() => { + document.addEventListener('mousedown', handleClickOutside); + return () => { + document.removeEventListener('mousedown', handleClickOutside); + }; + }, []); -.dropdownButton3::after { - content: ' ▼'; - font-size: 12px; - margin-left: 8px; -} + const dropdownRef1 = useRef(null); + const dropdownRef2 = useRef(null); + const dropdownRef3 = useRef(null); + const dropdownRef4 = useRef(null); + const dropdownRef5 = useRef(null); -.dropdownMenu3 { - display: block; - position: absolute; - background-color: white; - min-width: 200px; - box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); - border-radius: 4px; - z-index: 1; - margin-top: 8px; - padding: 10px 0; -} + const tsxCode1 = `// TSX code for Dropdown 1`; + const cssCode1 = `.dropdown { /* CSS for Dropdown 1 */ }`; -.dropdownHeader { - padding: 12px 20px; - font-size: 14px; - color: #555; - border-bottom: 1px solid #ddd; - margin-bottom: 10px; -} + const tsxCode2 = `// TSX code for Dropdown 2`; + const cssCode2 = `.dropdown2 { /* CSS for Dropdown 2 */ }`; -.dropdownItem3 { - color: #333; - padding: 12px 20px; - text-decoration: none; - display: block; - transition: background-color 0.3s ease; -} + const tsxCode3 = `// TSX code for Dropdown 3`; + const cssCode3 = `.dropdown3 { /* CSS for Dropdown 3 */ }`; -.dropdownItem3:hover { - background-color: #f1f1f1; -}`; + const tsxCode4 = `// TSX code for Dropdown 4`; + const cssCode4 = `.dropdown4 { /* CSS for Dropdown 4 */ }`; - const dropdown4TsxCode = `import React, { useState } from 'react'; -import styles from './Dropdown.module.css'; - -const Dropdown4: React.FC = () => { - const [isOpen, setIsOpen] = useState(false); - const [nestedOpen, setNestedOpen] = useState(false); - - const toggleDropdown = () => { - setIsOpen(!isOpen); - }; - - const toggleNestedDropdown = () => { - setNestedOpen(!nestedOpen); - }; + const tsxCode5 = `// TSX code for Dropdown 5`; + const cssCode5 = `.dropdown5 { /* CSS for Dropdown 5 */ }`; return ( -
- - {isOpen && ( -
    -
  • + {/* Dropdown 1 */} +
    +
    +
    • -
  • Another Option
    • -
  • More Options
    • -
- )} -
- ); -}; - -export default Dropdown4;`; - - const dropdown4CssCode = `.dropdown4 { - position: relative; - display: inline-block; -} - -.dropdownButton4 { - background-color: #f8f8f8; - color: #333; - padding: 10px 20px; - font-size: 16px; - border: 1px solid #ddd; - border-radius: 4px; - cursor: pointer; - transition: background-color 0.3s ease; -} - -.dropdownButton4:hover { - background-color: #e0e0e0; -} - -.dropdownButton4::after { - content: ' ▼'; - font-size: 12px; - margin-left: 8px; -} - -.dropdownMenu4 { - display: block; - position: absolute; - background-color: white; - min-width: 200px; - box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); - border-radius: 4px; - z-index: 1; - margin-top: 8px; - padding: 10px 0; -} - -.dropdownItem4 { - color: #333; - padding: 12px 20px; - text-decoration: none; - display: block; - transition: background-color 0.3s ease; - position: relative; -} - -.dropdownItem4:hover { - background-color: #f1f1f1; -} - -.nestedDropdownMenu { - display: block; - position: absolute; - left: 100%; - top: 0; - background-color: white; - min-width: 200px; - box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); - border-radius: 4px; - z-index: 1; - margin-top: 0; - padding: 10px 0; -} - -.nestedDropdownItem { - color: #333; - padding: 12px 20px; - text-decoration: none; - display: block; - transition: background-color 0.3s ease; -} - -.nestedDropdownItem:hover { - background-color: #f1f1f1; -}`; - - const handleCopyCode = (code: string) => { - navigator.clipboard.writeText(code).then(() => { - alert('Code copied to clipboard!'); - }); - }; - - return ( -
-

Account Options

-
-
- - {isOpen1 && ( -
    -
  • Account settings
    • -
  • Support
    • -
  • License
    • -
  • Sign out
    • -
+ {isDropdownOpen1 && ( +
+
Item 1
+
Item 2
+
Item 3
+
Item 4
+
)}
+ + {/* Code Box 1 */} +
+
+ + +
+ + + + 
{codeType1 === 'tsx' ? tsxCode1 : cssCode1}
+
-
-
- + + {/* Dropdown 2 */} +
+
+ {isDropdownOpen2 && ( +
+
+ Item 1 +
+
+ Item 2 +
+
+ Item 3 +
+
+ Item 4 +
+
+ Item 5 +
+
+ )}
- - 
{codeType === 'tsx' ? dropdown1TsxCode : dropdown1CssCode}
-
-

Edit Options

-
-
- - {isOpen2 && ( -
    -
  • - ✏️ Edit -
    • -
  • - 📄 Duplicate -
    • -
  • - 🗃️ Archive -
    • -
  • - ➡️ Move -
    • -
  • - 👥 Share -
    • -
  • - ❤️ Add to favorites -
    • -
  • - 🗑️ Delete -
    • -
- )} + {/* Code Box 2 */} +
+
+ + +
+ + + + 
{codeType2 === 'tsx' ? tsxCode2 : cssCode2}
-
-
- + + {/* Dropdown 3 */} +
+
+ {isDropdownOpen3 && ( +
+
+ +
+ John Doe + john.doe@gmail.com +
+
+
My Profile
+
Settings
+
Logout
+
+ )}
- - 
{codeType === 'tsx' ? dropdown2TsxCode : dropdown2CssCode}
-
-

User Account

-
-
- - {isOpen3 && ( -
    -
  • Signed in as tom@example.com
    • -
  • Account settings
    • -
  • Support
    • -
  • License
    • -
  • Sign out
    • -
- )} + {/* Code Box 3 */} +
+
+ + +
+ + + + 
{codeType3 === 'tsx' ? tsxCode3 : cssCode3}
-
-
- + + {/* Dropdown 4 */} +
+
+ {isDropdownOpen4 && ( +
+
+ Item 1 + + +
+
Nested Item 1
+
Nested Item 2
+
+
+
Item 2
+
Item 3
+
Item 4
+
+ )}
- - 
{codeType === 'tsx' ? dropdown3TsxCode : dropdown3CssCode}
-
-

Nested Dropdown

-
-
- - {isOpen4 && ( -
    -
  • - Nested Options - {nestedOpen && ( -
      -
    • Option 1
      • -
    • Option 2
      • -
    • Option 3
      • -
    - )} -
    • -
  • Another Option
    • -
  • More Options
    • -
- )} + {/* Code Box 4 */} +
+
+ + +
+ + + + 
{codeType4 === 'tsx' ? tsxCode4 : cssCode4}
-
-
- + + {/* Dropdown 5 */} +
+
+ {isDropdownOpen5 && ( +
+ + + + + + +
+ )} +
+ + {/* Code Box 5 */} +
+
+ + +
+ + + + 
{codeType5 === 'tsx' ? tsxCode5 : cssCode5}
- - 
{codeType === 'tsx' ? dropdown4TsxCode : dropdown4CssCode}
); diff --git a/src/components/Tab/Tab.module.css b/src/components/Tab/Tab.module.css index 1f4df51..9b91912 100644 --- a/src/components/Tab/Tab.module.css +++ b/src/components/Tab/Tab.module.css @@ -1,111 +1,201 @@ +.pageContainer { + display: flex; + flex-direction: column; + align-items: center; + gap: 40px; + width: 100%; +} + +/* Common Tab Styles */ +.tabSection { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + .tabsContainer { - 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; + 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; +} + +.tabsList { + display: flex; + justify-content: space-around; + margin-bottom: 20px; + border-bottom: 2px solid #e0e0e0; +} + +.tabItem { + padding: 10px 20px; + cursor: pointer; + font-size: 16px; + color: #cbd5e0; + transition: all 0.3s ease; +} + +.tabItem:hover { + color: #63b3ed; +} + +.tabItem.active { + border-bottom: 2px solid #63b3ed; + color: #63b3ed; +} + +/* Horizontal Scrollable Tabs */ +.scrollableTabs { + overflow-x: auto; + white-space: nowrap; +} + +/* Vertical Tabs */ +.tabsContainerVertical { + display: flex; +} + +.tabsListVertical { + display: flex; + flex-direction: column; + margin-right: 20px; + border-right: 2px solid #e0e0e0; +} + +.tabItemVertical { + padding: 10px 20px; + cursor: pointer; + font-size: 16px; + color: #cbd5e0; + transition: all 0.3s ease; +} + +.tabItemVertical:hover { + color: #63b3ed; +} + +.tabItemVertical.active { + border-right: 2px solid #63b3ed; + color: #63b3ed; +} + +.tabContentVertical { + padding: 20px; + background-color: #fff; + border-radius: 8px; + flex: 1; +} + +/* Accordion Tabs */ +.accordionContainer { + 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; +} + +.accordionTab { + padding: 15px; + cursor: pointer; + font-size: 18px; + background-color: #007bff; + color: white; + margin-bottom: 10px; + border-radius: 4px; + transition: all 0.3s ease; +} + +.accordionTab.active { + background-color: #0056b3; +} + +.accordionContent { + padding: 20px; + background-color: #fff; + border-radius: 8px; + margin-bottom: 10px; +} + +/* Icon Tabs */ +.tabIcon { + margin-right: 10px; +} + +/* Animated Tabs */ +.animatedContent { + animation: fadeIn 0.5s ease-in-out; +} + +@keyframes fadeIn { + from { + opacity: 0; } - - .tabsList { - display: flex; - justify-content: space-around; - margin-bottom: 20px; - border-bottom: 2px solid #e0e0e0; + to { + opacity: 1; } - - .tabsList2 { - display: flex; - justify-content: space-around; - margin-bottom: 20px; - border-bottom: 2px solid #e0e0e0; - } - - .tabItem { - padding: 10px 20px; - cursor: pointer; - font-size: 16px; - color: #cbd5e0; - transition: all 0.3s ease; - } - - .tabItem2 { - padding: 10px 20px; - cursor: pointer; - font-size: 16px; - color: #6c757d; - transition: all 0.3s ease; - } - - .tabItem:hover { - color: #63b3ed; - } - - .tabItem2:hover { - color: #495057; - } - - .tabItem.active { - border-bottom: 2px solid #63b3ed; - color: #63b3ed; - } - - .tabItem2.active { - border-bottom: 2px solid #007bff; - color: #007bff; - } - - .tabContent { - padding: 20px; - background-color: #fff; - border-radius: 8px; - } - - .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; - } - - .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; - } - \ No newline at end of file +} + +/* Common Content Styles */ +.tabContent { + padding: 20px; + background-color: #fff; + border-radius: 8px; +} + +/* 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/Tab/Tab.tsx b/src/components/Tab/Tab.tsx index 477129f..3651fa4 100644 --- a/src/components/Tab/Tab.tsx +++ b/src/components/Tab/Tab.tsx @@ -1,334 +1,309 @@ import React, { useState } from 'react'; import styles from './Tab.module.css'; import { CopyToClipboard } from 'react-copy-to-clipboard'; +import { FaHome, FaUser, FaCog, FaBell, FaInfoCircle } from 'react-icons/fa'; const Tab: React.FC = () => { const [activeTab1, setActiveTab1] = useState('overview'); const [activeTab2, setActiveTab2] = useState('account'); - const [codeType, setCodeType] = useState('tsx'); + const [activeTab3, setActiveTab3] = useState('profile'); + const [activeTab4, setActiveTab4] = useState('home'); + const [activeTab5, setActiveTab5] = useState('info'); - const handleTabClick1 = (tab: string) => { - setActiveTab1(tab); - }; + 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 handleTabClick2 = (tab: string) => { - setActiveTab2(tab); - }; + const tsxCode1 = `// TSX code for Tab 1`; + const cssCode1 = `.tabItem1 { /* CSS for Tab 1 */ }`; - const tsxCode1 = `import React, { useState } from 'react'; -import styles from './Tab.module.css'; -import { CopyToClipboard } from 'react-copy-to-clipboard'; - -const Tab1: React.FC = () => { - const [activeTab, setActiveTab] = useState('overview'); - - const handleTabClick = (tab: string) => { - setActiveTab(tab); - }; - - return ( -
-
    -
  • handleTabClick('overview')} - > - Overview -
    • -
  • handleTabClick('activity')} - > - Activity -
    • -
  • handleTabClick('settings')} - > - Settings -
    • -
  • handleTabClick('collaborators')} - > - Collaborators -
    • -
  • handleTabClick('notifications')} - > - Notifications -
    • -
-
- {activeTab === 'overview' &&
Content for Overview
} - {activeTab === 'activity' &&
Content for Activity
} - {activeTab === 'settings' &&
Content for Settings
} - {activeTab === 'collaborators' &&
Content for Collaborators
} - {activeTab === 'notifications' &&
Content for Notifications
} -
-
- ); -}; - -export default Tab1;`; - - const cssCode1 = `.tabsContainer { - width: 100%; - max-width: 800px; - margin: 0 auto; - padding: 20px; - font-family: Arial, sans-serif; - background-color: #1a202c; - border-radius: 8px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - color: white; -} + const tsxCode2 = `// TSX code for Tab 2`; + const cssCode2 = `.tabItem2 { /* CSS for Tab 2 */ }`; -.tabsList { - display: flex; - justify-content: space-around; - margin-bottom: 20px; - border-bottom: 2px solid #e0e0e0; -} + const tsxCode3 = `// TSX code for Tab 3`; + const cssCode3 = `.tabItem3 { /* CSS for Tab 3 */ }`; -.tabItem { - padding: 10px 20px; - cursor: pointer; - font-size: 16px; - color: #cbd5e0; - transition: all 0.3s ease; -} + const tsxCode4 = `// TSX code for Tab 4`; + const cssCode4 = `.tabItem4 { /* CSS for Tab 4 */ }`; -.tabItem:hover { - color: #63b3ed; -} - -.tabItem.active { - border-bottom: 2px solid #63b3ed; - color: #63b3ed; -} - -.tabContent { - padding: 20px; - background-color: #2d3748; - border-radius: 8px; -}`; - - const tsxCode2 = `import React, { useState } from 'react'; -import styles from './Tab.module.css'; -import { CopyToClipboard } from 'react-copy-to-clipboard'; - -const Tab2: React.FC = () => { - const [activeTab, setActiveTab] = useState('account'); - - const handleTabClick = (tab: string) => { - setActiveTab(tab); - }; + const tsxCode5 = `// TSX code for Tab 5`; + const cssCode5 = `.tabItem5 { /* CSS for Tab 5 */ }`; return ( -
-
    -
  • handleTabClick('account')} - > - My Account -
    • -
  • handleTabClick('company')} - > - Company -
    • -
  • handleTabClick('team')} - > - Team Members -
    • -
  • handleTabClick('billing')} - > - Billing -
    • -
-
- {activeTab === 'account' &&
Content for My Account
} - {activeTab === 'company' &&
Content for Company
} - {activeTab === 'team' &&
Content for Team Members
} - {activeTab === 'billing' &&
Content for Billing
} +
+ {/* Horizontal Scrollable Tabs */} +
+
+
+
    +
  • setActiveTab1('overview')} + > + Overview +
    • +
  • setActiveTab1('activity')} + > + Activity +
    • +
  • setActiveTab1('settings')} + > + Settings +
    • +
  • setActiveTab1('more')} + > + More +
    • +
  • setActiveTab1('extra')} + > + Extra +
    • +
+
+
+ {activeTab1 === 'overview' &&
Content for Overview
} + {activeTab1 === 'activity' &&
Content for Activity
} + {activeTab1 === 'settings' &&
Content for Settings
} + {activeTab1 === 'more' &&
Content for More
} + {activeTab1 === 'extra' &&
Content for Extra
} +
+
+
+
+ + +
+ + + + 
{codeType1 === 'tsx' ? tsxCode1 : cssCode1}
+
-
- ); -}; -export default Tab2;`; - - const cssCode2 = `.tabsContainer { - width: 100%; - max-width: 800px; - margin: 0 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; -} - -.tabsList2 { - display: flex; - justify-content: space-around; - margin-bottom: 20px; - border-bottom: 2px solid #e0e0e0; -} - -.tabItem2 { - padding: 10px 20px; - cursor: pointer; - font-size: 16px; - color: #6c757d; - transition: all 0.3s ease; -} - -.tabItem2:hover { - color: #495057; -} - -.tabItem2.active { - border-bottom: 2px solid #007bff; - color: #007bff; -} - -.tabContent { - padding: 20px; - background-color: #fff; - border-radius: 8px; -}`; + {/* Vertical Tabs */} +
+
+
    +
  • setActiveTab2('account')} + > + Account +
    • +
  • setActiveTab2('billing')} + > + Billing +
    • +
  • setActiveTab2('users')} + > + Users +
    • +
+
+ {activeTab2 === 'account' &&
Content for Account
} + {activeTab2 === 'billing' &&
Content for Billing
} + {activeTab2 === 'users' &&
Content for Users
} +
+
+
+
+ + +
+ + + + 
{codeType2 === 'tsx' ? tsxCode2 : cssCode2}
+
+
- return ( -
- {/* First Tab Component */} -
-
    -
  • handleTabClick1('overview')} - > - Overview -
    • -
  • handleTabClick1('activity')} - > - Activity -
    • -
  • handleTabClick1('settings')} + {/* Accordion Tabs */} +
    +
    +
    setActiveTab3(activeTab3 === 'profile' ? '' : 'profile')} > - Settings -
    • -
  • handleTabClick1('collaborators')} + Profile +
+ {activeTab3 === 'profile' && ( +
Content for Profile
+ )} +
setActiveTab3(activeTab3 === 'messages' ? '' : 'messages')} > - Collaborators - -
  • handleTabClick1('notifications')} + Messages +
    • + {activeTab3 === 'messages' && ( +
    Content for Messages
    + )} +
    setActiveTab3(activeTab3 === 'notifications' ? '' : 'notifications')} > Notifications - - -
    - {activeTab1 === 'overview' &&
    Content for Overview
    } - {activeTab1 === 'activity' &&
    Content for Activity
    } - {activeTab1 === 'settings' &&
    Content for Settings
    } - {activeTab1 === 'collaborators' &&
    Content for Collaborators
    } - {activeTab1 === 'notifications' &&
    Content for Notifications
    } +
    + {activeTab3 === 'notifications' && ( +
    Content for Notifications
    + )}
    -
    - -
    -
    - - +
    +
    + + +
    + + + + 
    {codeType3 === 'tsx' ? tsxCode3 : cssCode3}
    - - - - 
    {codeType === 'tsx' ? tsxCode1 : cssCode1}
    - {/* Second Tab Component */} -
    -
      -
    • handleTabClick2('account')} - > - My Account -
      • -
    • handleTabClick2('company')} - > - Company -
      • -
    • handleTabClick2('team')} - > - Team Members -
      • -
    • handleTabClick2('billing')} - > - Billing -
      • -
    -
    - {activeTab2 === 'account' &&
    Content for My Account
    } - {activeTab2 === 'company' &&
    Content for Company
    } - {activeTab2 === 'team' &&
    Content for Team Members
    } - {activeTab2 === 'billing' &&
    Content for Billing
    } + {/* Icon Tabs */} +
    +
    +
      +
    • setActiveTab4('home')} + > + Home +
      • +
    • setActiveTab4('services')} + > + Services +
      • +
    • setActiveTab4('contact')} + > + Contact +
      • +
    +
    + {activeTab4 === 'home' &&
    Content for Home
    } + {activeTab4 === 'services' &&
    Content for Services
    } + {activeTab4 === 'contact' &&
    Content for Contact
    } +
    +
    +
    +
    + + +
    + + + + 
    {codeType4 === 'tsx' ? tsxCode4 : cssCode4}
    -
    -
    - - + {/* Animated Tabs */} +
    +
    +
      +
    • setActiveTab5('info')} + > + Info +
      • +
    • setActiveTab5('stats')} + > + Stats +
      • +
    • setActiveTab5('help')} + > + Help +
      • +
    +
    + {activeTab5 === 'info' &&
    Content for Info
    } + {activeTab5 === 'stats' &&
    Content for Stats
    } + {activeTab5 === 'help' &&
    Content for Help
    } +
    +
    +
    +
    + + +
    + + + + 
    {codeType5 === 'tsx' ? tsxCode5 : cssCode5}
    - - - - 
    {codeType === 'tsx' ? tsxCode2 : cssCode2}
    ); diff --git a/src/pages/Components/Components.tsx b/src/pages/Components/Components.tsx index bd01ab9..72ab4d0 100644 --- a/src/pages/Components/Components.tsx +++ b/src/pages/Components/Components.tsx @@ -48,7 +48,7 @@ import Accordion from '../../components/Accordion/Accordion'; import Tooltip from '../../components/Tooltip/Tooltip'; import Alert from '../../components/Alert/Alert'; import Badge from '../../components/Badge/Badge';*/ -// import Breadcrumb from '../../components/Breadcrumb/Breadcrumb'; + import Breadcrumb from '../../components/Breadcrumb/Breadcrumb'; // import Pagination from '../../components/Pagination/Pagination'; import Dropdown from '../../components/Dropdown/Dropdown'; import ProgressBar from '../../components/ProgressBar/ProgressBar'; @@ -129,6 +129,7 @@ const Components: React.FC = () => { { name: 'Progress Bar', category: 'Progress Bar', count: 12, component: ProgressBar }, { name: 'Dropdown', category: 'Dropdown', count: 7, component: Dropdown }, { name: 'Tab', category: 'Tab', count: 4, component: Tab }, + { name: 'Breadcrumb', category: 'Breadcrumb', count: 5, component: Breadcrumb}, /*{ name: 'Modal', category: 'Modal', count: 5, component: Modal }, { name: 'Accordion', category: 'Accordion', count: 6, component: Accordion }, { name: 'Tooltip', category: 'Tooltip', count: 5, component: Tooltip },