Skip to content

Commit 4ceae92

Browse files
sajadevosajadevo
committedJul 14, 2023
docs-react: update accordion page
·
2.1.0-react2.0.7-react
1 parent c6315c7 commit 4ceae92

14 files changed

+566
-665
lines changed
 

‎.prettierignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
documentation

‎docs-content/react/accordion/accordion-all-open.tsx

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import React from "react";
2+
import {
3+
Accordion,
4+
AccordionHeader,
5+
AccordionBody,
6+
} from "@material-tailwind/react";
7+
8+
export function AccordionAllOpen() {
9+
const [openAcc1, setOpenAcc1] = React.useState(true);
10+
const [openAcc2, setOpenAcc2] = React.useState(true);
11+
const [openAcc3, setOpenAcc3] = React.useState(true);
12+
13+
const handleOpenAcc1 = () => setOpenAcc1((cur) => !cur);
14+
const handleOpenAcc2 = () => setOpenAcc2((cur) => !cur);
15+
const handleOpenAcc3 = () => setOpenAcc3((cur) => !cur);
16+
17+
return (
18+
<>
19+
<Accordion open={openAcc1}>
20+
<AccordionHeader onClick={handleOpenAcc1}>
21+
What is Material Tailwind?
22+
</AccordionHeader>
23+
<AccordionBody>
24+
We&apos;re not always in the position that we want to be at.
25+
We&apos;re constantly growing. We&apos;re constantly making mistakes.
26+
We&apos;re constantly trying to express ourselves and actualize our
27+
dreams.
28+
</AccordionBody>
29+
</Accordion>
30+
<Accordion open={openAcc2}>
31+
<AccordionHeader onClick={handleOpenAcc2}>
32+
How to use Material Tailwind?
33+
</AccordionHeader>
34+
<AccordionBody>
35+
We&apos;re not always in the position that we want to be at.
36+
We&apos;re constantly growing. We&apos;re constantly making mistakes.
37+
We&apos;re constantly trying to express ourselves and actualize our
38+
dreams.
39+
</AccordionBody>
40+
</Accordion>
41+
<Accordion open={openAcc3}>
42+
<AccordionHeader onClick={handleOpenAcc3}>
43+
What can I do with Material Tailwind?
44+
</AccordionHeader>
45+
<AccordionBody>
46+
We&apos;re not always in the position that we want to be at.
47+
We&apos;re constantly growing. We&apos;re constantly making mistakes.
48+
We&apos;re constantly trying to express ourselves and actualize our
49+
dreams.
50+
</AccordionBody>
51+
</Accordion>
52+
</>
53+
);
54+
}

‎docs-content/react/accordion/accordion-always-open.tsx

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import React from "react";
2+
import {
3+
Accordion,
4+
AccordionHeader,
5+
AccordionBody,
6+
} from "@material-tailwind/react";
7+
8+
export function AccordionAlwaysOpen() {
9+
const [open, setOpen] = React.useState(0);
10+
const [alwaysOpen, setAlwaysOpen] = React.useState(true);
11+
12+
const handleAlwaysOpen = () => setAlwaysOpen((cur) => !cur);
13+
const handleOpen = (value) => setOpen(open === value ? 0 : value);
14+
15+
return (
16+
<>
17+
<Accordion open={alwaysOpen}>
18+
<AccordionHeader onClick={handleAlwaysOpen}>
19+
What is Material Tailwind?
20+
</AccordionHeader>
21+
<AccordionBody>
22+
We&apos;re not always in the position that we want to be at.
23+
We&apos;re constantly growing. We&apos;re constantly making mistakes.
24+
We&apos;re constantly trying to express ourselves and actualize our
25+
dreams.
26+
</AccordionBody>
27+
</Accordion>
28+
<Accordion open={open === 1}>
29+
<AccordionHeader onClick={() => handleOpen(1)}>
30+
How to use Material Tailwind?
31+
</AccordionHeader>
32+
<AccordionBody>
33+
We&apos;re not always in the position that we want to be at.
34+
We&apos;re constantly growing. We&apos;re constantly making mistakes.
35+
We&apos;re constantly trying to express ourselves and actualize our
36+
dreams.
37+
</AccordionBody>
38+
</Accordion>
39+
<Accordion open={open === 2}>
40+
<AccordionHeader onClick={() => handleOpen(2)}>
41+
What can I do with Material Tailwind?
42+
</AccordionHeader>
43+
<AccordionBody>
44+
We&apos;re not always in the position that we want to be at.
45+
We&apos;re constantly growing. We&apos;re constantly making mistakes.
46+
We&apos;re constantly trying to express ourselves and actualize our
47+
dreams.
48+
</AccordionBody>
49+
</Accordion>
50+
</>
51+
);
52+
}

‎docs-content/react/accordion/accordion-custom-animation.tsx

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import React from "react";
2+
import {
3+
Accordion,
4+
AccordionHeader,
5+
AccordionBody,
6+
} from "@material-tailwind/react";
7+
8+
const CUSTOM_ANIMATION = {
9+
mount: { scale: 1 },
10+
unmount: { scale: 0.9 },
11+
};
12+
13+
export function AccordionCustomAnimation() {
14+
const [open, setOpen] = React.useState(0);
15+
16+
const handleOpen = (value) => setOpen(open === value ? 0 : value);
17+
18+
return (
19+
<>
20+
<Accordion open={open === 1} animate={CUSTOM_ANIMATION}>
21+
<AccordionHeader onClick={() => handleOpen(1)}>
22+
What is Material Tailwind?
23+
</AccordionHeader>
24+
<AccordionBody>
25+
We&apos;re not always in the position that we want to be at.
26+
We&apos;re constantly growing. We&apos;re constantly making mistakes.
27+
We&apos;re constantly trying to express ourselves and actualize our
28+
dreams.
29+
</AccordionBody>
30+
</Accordion>
31+
<Accordion open={open === 2} animate={CUSTOM_ANIMATION}>
32+
<AccordionHeader onClick={() => handleOpen(2)}>
33+
How to use Material Tailwind?
34+
</AccordionHeader>
35+
<AccordionBody>
36+
We&apos;re not always in the position that we want to be at.
37+
We&apos;re constantly growing. We&apos;re constantly making mistakes.
38+
We&apos;re constantly trying to express ourselves and actualize our
39+
dreams.
40+
</AccordionBody>
41+
</Accordion>
42+
<Accordion open={open === 3} animate={CUSTOM_ANIMATION}>
43+
<AccordionHeader onClick={() => handleOpen(3)}>
44+
What can I do with Material Tailwind?
45+
</AccordionHeader>
46+
<AccordionBody>
47+
We&apos;re not always in the position that we want to be at.
48+
We&apos;re constantly growing. We&apos;re constantly making mistakes.
49+
We&apos;re constantly trying to express ourselves and actualize our
50+
dreams.
51+
</AccordionBody>
52+
</Accordion>
53+
</>
54+
);
55+
}

‎docs-content/react/accordion/accordion-custom-icon.tsx

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import React from "react";
2+
import {
3+
Accordion,
4+
AccordionHeader,
5+
AccordionBody,
6+
} from "@material-tailwind/react";
7+
8+
function Icon({ id, open }) {
9+
return (
10+
<svg
11+
xmlns="http://www.w3.org/2000/svg"
12+
fill="none"
13+
viewBox="0 0 24 24"
14+
strokeWidth={2}
15+
stroke="currentColor"
16+
className={`${
17+
id === open ? "rotate-180" : ""
18+
} h-5 w-5 transition-transform`}
19+
>
20+
<path
21+
strokeLinecap="round"
22+
strokeLinejoin="round"
23+
d="M19.5 8.25l-7.5 7.5-7.5-7.5"
24+
/>
25+
</svg>
26+
);
27+
}
28+
29+
export function AccordionCustomIcon() {
30+
const [open, setOpen] = React.useState(0);
31+
32+
const handleOpen = (value) => setOpen(open === value ? 0 : value);
33+
34+
return (
35+
<>
36+
<Accordion open={open === 1} icon={<Icon id={1} open={open} />}>
37+
<AccordionHeader onClick={() => handleOpen(1)}>
38+
What is Material Tailwind?
39+
</AccordionHeader>
40+
<AccordionBody>
41+
We&apos;re not always in the position that we want to be at.
42+
We&apos;re constantly growing. We&apos;re constantly making mistakes.
43+
We&apos;re constantly trying to express ourselves and actualize our
44+
dreams.
45+
</AccordionBody>
46+
</Accordion>
47+
<Accordion open={open === 2} icon={<Icon id={2} open={open} />}>
48+
<AccordionHeader onClick={() => handleOpen(2)}>
49+
How to use Material Tailwind?
50+
</AccordionHeader>
51+
<AccordionBody>
52+
We&apos;re not always in the position that we want to be at.
53+
We&apos;re constantly growing. We&apos;re constantly making mistakes.
54+
We&apos;re constantly trying to express ourselves and actualize our
55+
dreams.
56+
</AccordionBody>
57+
</Accordion>
58+
<Accordion open={open === 3} icon={<Icon id={3} open={open} />}>
59+
<AccordionHeader onClick={() => handleOpen(3)}>
60+
What can I do with Material Tailwind?
61+
</AccordionHeader>
62+
<AccordionBody>
63+
We&apos;re not always in the position that we want to be at.
64+
We&apos;re constantly growing. We&apos;re constantly making mistakes.
65+
We&apos;re constantly trying to express ourselves and actualize our
66+
dreams.
67+
</AccordionBody>
68+
</Accordion>
69+
</>
70+
);
71+
}

‎docs-content/react/accordion/accordion-custom-styles.tsx

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import React from "react";
2+
import {
3+
Accordion,
4+
AccordionHeader,
5+
AccordionBody,
6+
} from "@material-tailwind/react";
7+
8+
export function AccordionCustomStyles() {
9+
const [open, setOpen] = React.useState(1);
10+
11+
const handleOpen = (value) => setOpen(open === value ? 0 : value);
12+
13+
return (
14+
<>
15+
<Accordion
16+
open={open === 1}
17+
className="mb-2 rounded-lg border border-blue-gray-100 px-4"
18+
>
19+
<AccordionHeader
20+
onClick={() => handleOpen(1)}
21+
className={`border-b-0 transition-colors ${
22+
open === 1 ? "text-blue-500 hover:!text-blue-700" : ""
23+
}`}
24+
>
25+
What is Material Tailwind?
26+
</AccordionHeader>
27+
<AccordionBody className="pt-0 text-base font-normal">
28+
We&apos;re not always in the position that we want to be at.
29+
We&apos;re constantly growing. We&apos;re constantly making mistakes.
30+
We&apos;re constantly trying to express ourselves and actualize our
31+
dreams.
32+
</AccordionBody>
33+
</Accordion>
34+
<Accordion
35+
open={open === 2}
36+
className="mb-2 rounded-lg border border-blue-gray-100 px-4"
37+
>
38+
<AccordionHeader
39+
onClick={() => handleOpen(2)}
40+
className={`border-b-0 transition-colors ${
41+
open === 2 ? "text-blue-500 hover:!text-blue-700" : ""
42+
}`}
43+
>
44+
How to use Material Tailwind?
45+
</AccordionHeader>
46+
<AccordionBody className="pt-0 text-base font-normal">
47+
We&apos;re not always in the position that we want to be at.
48+
We&apos;re constantly growing. We&apos;re constantly making mistakes.
49+
We&apos;re constantly trying to express ourselves and actualize our
50+
dreams.
51+
</AccordionBody>
52+
</Accordion>
53+
<Accordion
54+
open={open === 3}
55+
className="rounded-lg border border-blue-gray-100 px-4"
56+
>
57+
<AccordionHeader
58+
onClick={() => handleOpen(3)}
59+
className={`border-b-0 transition-colors ${
60+
open === 3 ? "text-blue-500 hover:!text-blue-700" : ""
61+
}`}
62+
>
63+
What can I do with Material Tailwind?
64+
</AccordionHeader>
65+
<AccordionBody className="pt-0 text-base font-normal">
66+
We&apos;re not always in the position that we want to be at.
67+
We&apos;re constantly growing. We&apos;re constantly making mistakes.
68+
We&apos;re constantly trying to express ourselves and actualize our
69+
dreams.
70+
</AccordionBody>
71+
</Accordion>
72+
</>
73+
);
74+
}

‎docs-content/react/accordion/accordion-disabled.tsx

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import React from "react";
2+
import {
3+
Accordion,
4+
AccordionHeader,
5+
AccordionBody,
6+
} from "@material-tailwind/react";
7+
8+
export function AccordionDisabled() {
9+
const [open, setOpen] = React.useState(0);
10+
11+
const handleOpen = (value) => setOpen(open === value ? 0 : value);
12+
13+
return (
14+
<>
15+
<Accordion open={open === 1} disabled>
16+
<AccordionHeader onClick={() => handleOpen(1)}>
17+
What is Material Tailwind?
18+
</AccordionHeader>
19+
<AccordionBody>
20+
We&apos;re not always in the position that we want to be at.
21+
We&apos;re constantly growing. We&apos;re constantly making mistakes.
22+
We&apos;re constantly trying to express ourselves and actualize our
23+
dreams.
24+
</AccordionBody>
25+
</Accordion>
26+
<Accordion open={open === 2}>
27+
<AccordionHeader onClick={() => handleOpen(2)}>
28+
How to use Material Tailwind?
29+
</AccordionHeader>
30+
<AccordionBody>
31+
We&apos;re not always in the position that we want to be at.
32+
We&apos;re constantly growing. We&apos;re constantly making mistakes.
33+
We&apos;re constantly trying to express ourselves and actualize our
34+
dreams.
35+
</AccordionBody>
36+
</Accordion>
37+
<Accordion open={open === 3}>
38+
<AccordionHeader onClick={() => handleOpen(3)}>
39+
What can I do with Material Tailwind?
40+
</AccordionHeader>
41+
<AccordionBody>
42+
We&apos;re not always in the position that we want to be at.
43+
We&apos;re constantly growing. We&apos;re constantly making mistakes.
44+
We&apos;re constantly trying to express ourselves and actualize our
45+
dreams.
46+
</AccordionBody>
47+
</Accordion>
48+
</>
49+
);
50+
}

‎docs-content/react/accordion/accordion.tsx

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import React from "react";
2+
import { Accordion, AccordionHeader, AccordionBody } from "@material-tailwind/react";
3+
4+
export function DefaultAccordion() {
5+
const [open, setOpen] = React.useState(1);
6+
7+
const handleOpen = (value) => setOpen(open === value ? 0 : value);
8+
9+
return (
10+
<>
11+
<Accordion open={open === 1}>
12+
<AccordionHeader onClick={() => handleOpen(1)}>What is Material Tailwind?</AccordionHeader>
13+
<AccordionBody>
14+
We&apos;re not always in the position that we want to be at. We&apos;re constantly
15+
growing. We&apos;re constantly making mistakes. We&apos;re constantly trying to express
16+
ourselves and actualize our dreams.
17+
</AccordionBody>
18+
</Accordion>
19+
<Accordion open={open === 2}>
20+
<AccordionHeader onClick={() => handleOpen(2)}>
21+
How to use Material Tailwind?
22+
</AccordionHeader>
23+
<AccordionBody>
24+
We&apos;re not always in the position that we want to be at. We&apos;re constantly
25+
growing. We&apos;re constantly making mistakes. We&apos;re constantly trying to express
26+
ourselves and actualize our dreams.
27+
</AccordionBody>
28+
</Accordion>
29+
<Accordion open={open === 3}>
30+
<AccordionHeader onClick={() => handleOpen(3)}>
31+
What can I do with Material Tailwind?
32+
</AccordionHeader>
33+
<AccordionBody>
34+
We&apos;re not always in the position that we want to be at. We&apos;re constantly
35+
growing. We&apos;re constantly making mistakes. We&apos;re constantly trying to express
36+
ourselves and actualize our dreams.
37+
</AccordionBody>
38+
</Accordion>
39+
</>
40+
);
41+
}

‎docs-content/react/accordion/index.ts

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export * from "./accordion";
2+
export * from "./accordion-all-open";
3+
export * from "./accordion-always-open";
4+
export * from "./accordion-custom-animation";
5+
export * from "./accordion-custom-icon";
6+
export * from "./accordion-custom-styles";
7+
export * from "./accordion-disabled";

‎documentation/react/accordion.mdx

+151-663
Large diffs are not rendered by default.

‎package.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -38,10 +38,13 @@
3838
"react-dom": "^18.2.0",
3939
"react-jsx-parser": "^1.29.0",
4040
"react-simple-code-editor": "^0.13.1",
41-
"rehype-pretty-code": "^0.3.2",
41+
"rehype-pretty-code": "^0.10.0",
42+
"remark": "^14.0.3",
4243
"remark-gfm": "^3.0.1",
44+
"remark-mdx": "^2.3.0",
4345
"shiki": "^0.11.1",
4446
"tailwind-merge": "^1.8.1",
47+
"un": "^0.0.0",
4548
"use-react-countries": "^1.1.0",
4649
"uuid": "^9.0.0"
4750
},

‎pages/docs/[...slug].tsx

+4
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,8 @@ import AvatarStack from "components/docs/avatar-stack";
4848
import Warning from "components/warning";
4949

5050
// new imports
51+
import * as AccordionExamples from "docs-content/react/accordion";
52+
5153
import * as BadgeExamples from "components/docs/react/badge";
5254
import * as DrawerExamples from "components/docs/react/drawer";
5355
import * as RatingExamples from "components/docs/react/rating";
@@ -64,6 +66,7 @@ import * as ImgExamples from "components/docs/react/img";
6466
import * as VideoExamples from "components/docs/react/video";
6567
import * as SidebarExamples from "components/docs/react/sidebar";
6668
import * as TableExamples from "components/docs/react/table";
69+
6770
import TransparentTabs from "components/docs/transparent-tabs";
6871
import DocsTitle from "components/docs-title";
6972

@@ -257,6 +260,7 @@ const components = {
257260
Warning,
258261

259262
// new components
263+
AccordionExamples,
260264
BadgeExamples,
261265
DrawerExamples,
262266
RatingExamples,

‎prettier.config.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
module.exports = {
22
semi: true,
33
tabWidth: 2,
4-
printWidth: 100,
4+
printWidth: 80,
55
endOfLine: "auto",
66
singleQuote: false,
77
trailingComma: "all",

‎utils/rehype-pretty-code-config.ts

+1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ const config = {
1111
onVisitHighlightedWord(node) {
1212
node.properties.className = ["word"];
1313
},
14+
keepBackground: false,
1415
};
1516

1617
export default config;

0 commit comments

Comments
 (0)
Please sign in to comment.