From 7ffd800f5d8eb050a1754a63e04b0d61f068de3b Mon Sep 17 00:00:00 2001 From: dragosct10 Date: Wed, 28 Aug 2024 13:37:33 +0300 Subject: [PATCH 01/80] Update accordion-custom-icon.tsx --- .../html/accordion/accordion-custom-icon.tsx | 140 +++++++++++------- 1 file changed, 90 insertions(+), 50 deletions(-) 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.
- +
); } From 8a254cda78bc325afde4fc5fbd45685eeb5506f3 Mon Sep 17 00:00:00 2001 From: dragosct10 Date: Wed, 28 Aug 2024 13:37:34 +0300 Subject: [PATCH 02/80] Update accordion.tsx --- docs-content/html/accordion/accordion.tsx | 146 ++++++++++++++-------- 1 file changed, 92 insertions(+), 54 deletions(-) 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.
- +
); -} +}; From 4f888f0954d00a6eabdd693ffda41a5416d2f859 Mon Sep 17 00:00:00 2001 From: dragosct10 Date: Wed, 28 Aug 2024 13:37:37 +0300 Subject: [PATCH 03/80] Update accordion.mdx --- documentation/html/accordion.mdx | 274 +++++++++++++++++-------------- 1 file changed, 153 insertions(+), 121 deletions(-) diff --git a/documentation/html/accordion.mdx b/documentation/html/accordion.mdx index d1492bd3e..51e38d240 100644 --- a/documentation/html/accordion.mdx +++ b/documentation/html/accordion.mdx @@ -41,72 +41,87 @@ This visual cue is simple, providing users with a clear indication of how to int component={} > ```html -
-
- -
-