diff --git a/docs-content/html/accordion/accordion-custom-icon.tsx b/docs-content/html/accordion/accordion-custom-icon.tsx index b3b31ce45..b58d5d656 100644 --- a/docs-content/html/accordion/accordion-custom-icon.tsx +++ b/docs-content/html/accordion/accordion-custom-icon.tsx @@ -1,72 +1,112 @@ +import { useEffect, useRef, useState } from "react"; + export function AccordionCustomIcon() { + const [openIndex, setOpenIndex] = useState(null); + const contentRefs = useRef([]); + + // Toggle the accordion item + const toggleAccordion = (index) => { + setOpenIndex((prevIndex) => (prevIndex === index ? null : index)); + }; + + // Effect to adjust maxHeight for smooth transitions + useEffect(() => { + contentRefs.current.forEach((content, index) => { + if (content) { + if (openIndex === index) { + content.style.maxHeight = content.scrollHeight + 'px'; + } else { + content.style.maxHeight = '0px'; + } + } + }); + }, [openIndex]); + + const up = + + + + + const down = + + + + + + return ( - <> -
-
- -
+ {openIndex === 0 ? up : down} + +
(contentRefs.current[0] = el)} + className="overflow-hidden transition-all duration-300 ease-in-out" + style={{ maxHeight: '0px' }} > -
- We're not always in the position that we want to be at. - We're constantly growing. We're constantly making - mistakes. We're constantly trying to express ourselves and - actualize our dreams. +
+ Material Tailwind is a framework that enhances Tailwind CSS with additional styles and components.
-
-
- -
+ {openIndex === 1 ? up : down} + +
(contentRefs.current[1] = el)} + className="overflow-hidden transition-all duration-300 ease-in-out" + style={{ maxHeight: '0px' }} > -
- We're not always in the position that we want to be at. - We're constantly growing. We're constantly making - mistakes. We're constantly trying to express ourselves and - actualize our dreams. +
+ You can use Material Tailwind by importing its components into your Tailwind CSS project.
-
-
- -
+ {openIndex === 2 ? up : down} + +
(contentRefs.current[2] = el)} + className="overflow-hidden transition-all duration-300 ease-in-out" + style={{ maxHeight: '0px' }} > -
- We're not always in the position that we want to be at. - We're constantly growing. We're constantly making - mistakes. We're constantly trying to express ourselves and - actualize our dreams. +
+ Material Tailwind allows you to quickly build modern, responsive websites with a focus on design.
- +
); } diff --git a/docs-content/html/accordion/accordion-disabled.tsx b/docs-content/html/accordion/accordion-disabled.tsx index eaefe2d82..a002edbd8 100644 --- a/docs-content/html/accordion/accordion-disabled.tsx +++ b/docs-content/html/accordion/accordion-disabled.tsx @@ -1,75 +1,114 @@ +import { useEffect, useRef, useState } from "react"; + export function AccordionDisabled() { + const [openIndex, setOpenIndex] = useState(null); + const contentRefs = useRef([]); + + // Toggle the accordion item + const toggleAccordion = (index) => { + setOpenIndex((prevIndex) => (prevIndex === index ? null : index)); + }; + + // Effect to adjust maxHeight for smooth transitions + useEffect(() => { + contentRefs.current.forEach((content, index) => { + if (content) { + if (openIndex === index) { + content.style.maxHeight = content.scrollHeight + 'px'; + } else { + content.style.maxHeight = '0px'; + } + } + }); + }, [openIndex]); + + const plus = + + + + + + const minus = + + + + + + return ( - <> -
-
- -
+ {openIndex === 0 ? minus : plus} + +
(contentRefs.current[0] = el)} + className="overflow-hidden transition-all duration-300 ease-in-out" + style={{ maxHeight: '0px' }} > -
- We're not always in the position that we want to be at. - We're constantly growing. We're constantly making - mistakes. We're constantly trying to express ourselves and - actualize our dreams. +
+ Material Tailwind is a framework that enhances Tailwind CSS with additional styles and components.
-
-
- -
+ {openIndex === 1 ? minus : plus} + +
(contentRefs.current[1] = el)} + className="overflow-hidden transition-all duration-300 ease-in-out" + style={{ maxHeight: '0px' }} > -
- We're not always in the position that we want to be at. - We're constantly growing. We're constantly making - mistakes. We're constantly trying to express ourselves and - actualize our dreams. +
+ You can use Material Tailwind by importing its components into your Tailwind CSS project.
-
-
- -
+ {openIndex === 2 ? minus : plus} + +
(contentRefs.current[2] = el)} + className="overflow-hidden transition-all duration-300 ease-in-out" + style={{ maxHeight: '0px' }} > -
- We're not always in the position that we want to be at. - We're constantly growing. We're constantly making - mistakes. We're constantly trying to express ourselves and - actualize our dreams. +
+ Material Tailwind allows you to quickly build modern, responsive websites with a focus on design.
- +
); } diff --git a/docs-content/html/accordion/accordion.tsx b/docs-content/html/accordion/accordion.tsx index 1021ff308..e3a546ca3 100644 --- a/docs-content/html/accordion/accordion.tsx +++ b/docs-content/html/accordion/accordion.tsx @@ -1,75 +1,113 @@ +import React, { useEffect, useRef, useState } from 'react'; + export function DefaultAccordion() { + const [openIndex, setOpenIndex] = useState(null); + const contentRefs = useRef([]); + + // Toggle the accordion item + const toggleAccordion = (index) => { + setOpenIndex((prevIndex) => (prevIndex === index ? null : index)); + }; + + // Effect to adjust maxHeight for smooth transitions + useEffect(() => { + contentRefs.current.forEach((content, index) => { + if (content) { + if (openIndex === index) { + content.style.maxHeight = content.scrollHeight + 'px'; + } else { + content.style.maxHeight = '0px'; + } + } + }); + }, [openIndex]); + + const plus = + + + + + + const minus = + + + + + + return ( - <> -
-
- -
+ {openIndex === 0 ? minus : plus} + +
(contentRefs.current[0] = el)} + className="overflow-hidden transition-all duration-300 ease-in-out" + style={{ maxHeight: '0px' }} > -
- We're not always in the position that we want to be at. - We're constantly growing. We're constantly making - mistakes. We're constantly trying to express ourselves and - actualize our dreams. +
+ Material Tailwind is a framework that enhances Tailwind CSS with additional styles and components.
-
-
- -
+ {openIndex === 1 ? minus : plus} + +
(contentRefs.current[1] = el)} + className="overflow-hidden transition-all duration-300 ease-in-out" + style={{ maxHeight: '0px' }} > -
- We're not always in the position that we want to be at. - We're constantly growing. We're constantly making - mistakes. We're constantly trying to express ourselves and - actualize our dreams. +
+ You can use Material Tailwind by importing its components into your Tailwind CSS project.
-
-
- -
+ {openIndex === 2 ? minus : plus} + +
(contentRefs.current[2] = el)} + className="overflow-hidden transition-all duration-300 ease-in-out" + style={{ maxHeight: '0px' }} > -
- We're not always in the position that we want to be at. - We're constantly growing. We're constantly making - mistakes. We're constantly trying to express ourselves and - actualize our dreams. +
+ Material Tailwind allows you to quickly build modern, responsive websites with a focus on design.
- +
); -} +}; diff --git a/docs-content/html/alert/alert-colors.tsx b/docs-content/html/alert/alert-colors.tsx index 462b26ea3..0f27827b6 100644 --- a/docs-content/html/alert/alert-colors.tsx +++ b/docs-content/html/alert/alert-colors.tsx @@ -1,17 +1,29 @@ export function AlertColors() { return (
-
+
An info alert for showing message. +
-
- An error alert for showing message. +
+ An red alert for showing message. +
-
- A success alert for showing message. +
+ An success alert for showing message. +
-
- A warning alert for showing message. +
+ An warning alert for showing message. +
); diff --git a/docs-content/html/alert/alert-custom-close-icon.tsx b/docs-content/html/alert/alert-custom-close-icon.tsx index 7075c2803..bb0a22d36 100644 --- a/docs-content/html/alert/alert-custom-close-icon.tsx +++ b/docs-content/html/alert/alert-custom-close-icon.tsx @@ -1,34 +1,35 @@ +import { useState } from "react"; + export function AlertCustomCloseIcon() { + const [visible, setVisible] = useState(true); + + const closeAlert = () => { + setVisible(false); // Sets the visibility state to false + }; + + const openAlert = () => { + setVisible(true); // Sets the visibility state to false + }; + return ( -
-
- - + visible ? ( +
+ + -
-
+ Sorry, something went wrong please try again. +
- -
+ ) ); } diff --git a/docs-content/html/alert/alert-dismissible.tsx b/docs-content/html/alert/alert-dismissible.tsx index 742719334..2b4a368f7 100644 --- a/docs-content/html/alert/alert-dismissible.tsx +++ b/docs-content/html/alert/alert-dismissible.tsx @@ -1,32 +1,48 @@ +import { useState } from "react"; + export function AlertDismissible() { + const [visible, setVisible] = useState(true); + + const closeAlert = () => { + setVisible(false); // Sets the visibility state to false + }; + + const openAlert = () => { + setVisible(true); // Sets the visibility state to false + }; + return ( -
-
A dismissible alert for showing message.
- +
+ ) : ( + -
+ ) ); } diff --git a/docs-content/html/alert/alert-icon.tsx b/docs-content/html/alert/alert-icon.tsx index 1478ce686..659dc5cc4 100644 --- a/docs-content/html/alert/alert-icon.tsx +++ b/docs-content/html/alert/alert-icon.tsx @@ -1,28 +1,11 @@ export function AlertIcon() { return ( -
-
- - - -
-
- A simple alert with icon for showing message -
+
+ + A simple filled alert for showing message. +
); } diff --git a/docs-content/html/alert/alert-variants.tsx b/docs-content/html/alert/alert-variants.tsx index 35f8334dc..9d6b03a83 100644 --- a/docs-content/html/alert/alert-variants.tsx +++ b/docs-content/html/alert/alert-variants.tsx @@ -1,35 +1,41 @@ export function AlertVariants() { return (
-
-
A simple filled alert for showing message.
+
+ A simple filled alert for showing message. +
-
-
- A simple gradient alert for showing message. -
+ +
+ + A simple filled alert for showing message. +
-
-
- A simple outlined alert for showing message. -
+ +
+ A simple gradient alert for showing message. +
-
-
- A simple ghost alert for showing message. -
+ +
+ A simple outlined alert for showing message. + +
+ +
+ + A simple ghost alert for showing message. +
); diff --git a/docs-content/html/alert/alert-with-content.tsx b/docs-content/html/alert/alert-with-content.tsx index cf50e4c87..fa037eba9 100644 --- a/docs-content/html/alert/alert-with-content.tsx +++ b/docs-content/html/alert/alert-with-content.tsx @@ -1,55 +1,16 @@ export function AlertWithContent() { return ( -
-
- - - -
-
-
- Success -
-

- I don't know what that word means. Im happy. But success, that - goes back to what in somebody's eyes success means. For me, - success is inner peace. That's a good day for me. -

-
-
); diff --git a/docs-content/html/alert/alert-with-list.tsx b/docs-content/html/alert/alert-with-list.tsx index a955e09e8..8200a3d3e 100644 --- a/docs-content/html/alert/alert-with-list.tsx +++ b/docs-content/html/alert/alert-with-list.tsx @@ -1,125 +1,68 @@ export function AlertWithList() { return (
-
-
- - - -
-
-

- Ensure that these requirements are met: -

-
    -
  • At least 10 characters (and up to 100 characters)
    • -
  • At least one lowercase character
    • -
  • Inclusion of at least one special character, e.g., ! @ # ?
    • -
-
+
+

+ + Ensure that these requirements are met: +

+
    +
  • At least 10 characters (and up to 100 characters)
    • +
  • At least one lowercase character
    • +
  • Inclusion of at least one special character, e.g., ! @ # ?
    • +
+ +
-
-
- - - -
-
-

- Ensure that these requirements are met: -

-
    -
  • At least 10 characters (and up to 100 characters)
    • -
  • At least one lowercase character
    • -
  • Inclusion of at least one special character, e.g., ! @ # ?
    • -
-
+
+

+ + Ensure that these requirements are met: +

+
    +
  • At least 10 characters (and up to 100 characters)
    • +
  • At least one lowercase character
    • +
  • Inclusion of at least one special character, e.g., ! @ # ?
    • +
+ +
-
-
- - - -
-
-

- Ensure that these requirements are met: -

-
    -
  • At least 10 characters (and up to 100 characters)
    • -
  • At least one lowercase character
    • -
  • Inclusion of at least one special character, e.g., ! @ # ?
    • -
-
+ + +
+

+ + Ensure that these requirements are met: +

+
    +
  • At least 10 characters (and up to 100 characters)
    • +
  • At least one lowercase character
    • +
  • Inclusion of at least one special character, e.g., ! @ # ?
    • +
+ +
-
-
- - - -
-
-

- Ensure that these requirements are met: -

-
    -
  • At least 10 characters (and up to 100 characters)
    • -
  • At least one lowercase character
    • -
  • Inclusion of at least one special character, e.g., ! @ # ?
    • -
-
+ +
+

+ + Ensure that these requirements are met: +

+
    +
  • At least 10 characters (and up to 100 characters)
    • +
  • At least one lowercase character
    • +
  • Inclusion of at least one special character, e.g., ! @ # ?
    • +
+ +
); diff --git a/docs-content/html/alert/alert.tsx b/docs-content/html/alert/alert.tsx index 2b2142bec..6e1057548 100644 --- a/docs-content/html/alert/alert.tsx +++ b/docs-content/html/alert/alert.tsx @@ -1,10 +1,10 @@ export function AlertDefault() { return ( -
-
A simple alert for showing message.
+
+ A simple alert for showing message. +
); } diff --git a/docs-content/html/badge/badge-colors.tsx b/docs-content/html/badge/badge-colors.tsx index 838bfffbe..66e090e12 100644 --- a/docs-content/html/badge/badge-colors.tsx +++ b/docs-content/html/badge/badge-colors.tsx @@ -2,40 +2,28 @@ export function BadgeColors() { return (
- - +
- - +
- - +
- - +
); diff --git a/docs-content/html/badge/badge-custom-styles.tsx b/docs-content/html/badge/badge-custom-styles.tsx index a073f8339..412f68eb4 100644 --- a/docs-content/html/badge/badge-custom-styles.tsx +++ b/docs-content/html/badge/badge-custom-styles.tsx @@ -1,27 +1,12 @@ export function BadgeCustomStyles() { return (
- - - + +
diff --git a/docs-content/html/badge/badge-dot.tsx b/docs-content/html/badge/badge-dot.tsx index 388ff1e75..95dc69dbd 100644 --- a/docs-content/html/badge/badge-dot.tsx +++ b/docs-content/html/badge/badge-dot.tsx @@ -1,13 +1,10 @@ export function BadgeDot() { return (
- - +
); } diff --git a/docs-content/html/badge/badge-overlap.tsx b/docs-content/html/badge/badge-overlap.tsx index 0f983adde..f17f2778a 100644 --- a/docs-content/html/badge/badge-overlap.tsx +++ b/docs-content/html/badge/badge-overlap.tsx @@ -2,46 +2,22 @@ export function BadgeOverlap() { return (
- - + 5
- - +
profile picture - + 5
@@ -59,7 +35,7 @@ export function BadgeOverlap() { alt="profile picture" className="relative inline-block h-12 w-12 !rounded-full object-cover object-center" /> - +
); diff --git a/docs-content/html/badge/badge-placement.tsx b/docs-content/html/badge/badge-placement.tsx index ff3c94e3e..92ce966c8 100644 --- a/docs-content/html/badge/badge-placement.tsx +++ b/docs-content/html/badge/badge-placement.tsx @@ -2,40 +2,28 @@ export function BadgePlacement() { return (
- - +
- - +
- - +
- - +
); diff --git a/docs-content/html/badge/badge-with-border.tsx b/docs-content/html/badge/badge-with-border.tsx index 5e8cd5938..6ccf1887d 100644 --- a/docs-content/html/badge/badge-with-border.tsx +++ b/docs-content/html/badge/badge-with-border.tsx @@ -1,13 +1,10 @@ export function BadgeWithBorder() { return (
- - + 5
diff --git a/docs-content/html/badge/badge.tsx b/docs-content/html/badge/badge.tsx index 9ed517552..73481e611 100644 --- a/docs-content/html/badge/badge.tsx +++ b/docs-content/html/badge/badge.tsx @@ -1,13 +1,10 @@ export function BadgeDefault() { return (
- - + 5
diff --git a/docs-content/html/button-group/block-level-button-group.tsx b/docs-content/html/button-group/block-level-button-group.tsx index da2597fd4..4825143a3 100644 --- a/docs-content/html/button-group/block-level-button-group.tsx +++ b/docs-content/html/button-group/block-level-button-group.tsx @@ -1,21 +1,21 @@ export function BlockLevelButtonGroup() { return (
-
+
-
+ +
-
+ +
-
+ +
- -
-
- - -
-
- - - +
+ +
+ + + +
+ +
+ + +
diff --git a/docs-content/html/button-group/button-group-variants.tsx b/docs-content/html/button-group/button-group-variants.tsx index d2804adfa..ff7b78af7 100644 --- a/docs-content/html/button-group/button-group-variants.tsx +++ b/docs-content/html/button-group/button-group-variants.tsx @@ -2,81 +2,76 @@ export function ButtonGroupVariants() { return (
-
+
-
+ +
+ +
- - -
-
+ +
- -
); diff --git a/docs-content/html/button/block-level-button.tsx b/docs-content/html/button/block-level-button.tsx index 02076726b..67350b82f 100644 --- a/docs-content/html/button/block-level-button.tsx +++ b/docs-content/html/button/block-level-button.tsx @@ -1,10 +1,7 @@ export function BlockLevelButton() { return ( - ); } diff --git a/docs-content/html/button/button-colors.tsx b/docs-content/html/button/button-colors.tsx index 0742c286b..8beb6da05 100644 --- a/docs-content/html/button/button-colors.tsx +++ b/docs-content/html/button/button-colors.tsx @@ -1,29 +1,17 @@ export function ButtonColors() { return ( -
- - - -
); diff --git a/docs-content/html/button/button-ripple-effect.tsx b/docs-content/html/button/button-ripple-effect.tsx index 6ab238ceb..a6965b16b 100644 --- a/docs-content/html/button/button-ripple-effect.tsx +++ b/docs-content/html/button/button-ripple-effect.tsx @@ -1,18 +1,10 @@ export function ButtonRippleEffect() { return (
- -
diff --git a/docs-content/html/button/button-rounded.tsx b/docs-content/html/button/button-rounded.tsx index 332c11032..b109a7a8d 100644 --- a/docs-content/html/button/button-rounded.tsx +++ b/docs-content/html/button/button-rounded.tsx @@ -1,28 +1,16 @@ export function ButtonRounded() { return ( -
- - - -
diff --git a/docs-content/html/button/button-sizes.tsx b/docs-content/html/button/button-sizes.tsx index a5e7f5ce9..908bac37b 100644 --- a/docs-content/html/button/button-sizes.tsx +++ b/docs-content/html/button/button-sizes.tsx @@ -2,23 +2,35 @@ export function ButtonSizes() { return (
+ +
); -} +} \ No newline at end of file diff --git a/docs-content/html/button/button-variants.tsx b/docs-content/html/button/button-variants.tsx index 985c2ba50..9a926811c 100644 --- a/docs-content/html/button/button-variants.tsx +++ b/docs-content/html/button/button-variants.tsx @@ -1,29 +1,17 @@ export function ButtonVariants() { return ( -
- - - -
); diff --git a/docs-content/html/button/button-with-icon.tsx b/docs-content/html/button/button-with-icon.tsx index c85e22d9f..b0e569106 100644 --- a/docs-content/html/button/button-with-icon.tsx +++ b/docs-content/html/button/button-with-icon.tsx @@ -1,84 +1,32 @@ export function ButtonWithIcon() { return (
-
diff --git a/docs-content/html/button/button-with-link.tsx b/docs-content/html/button/button-with-link.tsx index 7923b02fa..49289979e 100644 --- a/docs-content/html/button/button-with-link.tsx +++ b/docs-content/html/button/button-with-link.tsx @@ -2,34 +2,22 @@ export function ButtonWithLink() { return (
- - - - diff --git a/docs-content/html/button/button.tsx b/docs-content/html/button/button.tsx index ce1ce02b6..a34544b38 100644 --- a/docs-content/html/button/button.tsx +++ b/docs-content/html/button/button.tsx @@ -1,9 +1,6 @@ export function ButtonDefault() { return ( - ); diff --git a/docs-content/html/checkbox/checkbox-colors.tsx b/docs-content/html/checkbox/checkbox-colors.tsx index 974d74bc7..58c28e702 100644 --- a/docs-content/html/checkbox/checkbox-colors.tsx +++ b/docs-content/html/checkbox/checkbox-colors.tsx @@ -2,233 +2,121 @@ export function CheckboxColors() { return (
-
-
-
-
-
-
-
-