From f68d0eef93fc2acac8b58cb138b4708d21b5b0ea Mon Sep 17 00:00:00 2001 From: Sayed Murtaza Date: Mon, 20 May 2024 21:25:49 +0430 Subject: [PATCH 1/8] card with list --- docs-content/react/card/card-with-list.tsx | 83 ++++++++++++++++++ docs-content/react/card/index.ts | 1 + documentation/react/card.mdx | 99 ++++++++++++++++++++++ 3 files changed, 183 insertions(+) create mode 100644 docs-content/react/card/card-with-list.tsx diff --git a/docs-content/react/card/card-with-list.tsx b/docs-content/react/card/card-with-list.tsx new file mode 100644 index 000000000..23b8032a5 --- /dev/null +++ b/docs-content/react/card/card-with-list.tsx @@ -0,0 +1,83 @@ +import { Card, CardBody, Typography, Avatar } from "@material-tailwind/react"; + +const customers = [ + { + name: "Tania Andrew", + email: "tania@gmail.com", + price: 400, + image: + "https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-1.jpg", + }, + { + name: "John Micheal", + email: "john@gmail.com", + price: 420, + image: + "https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-6.jpg", + }, + { + name: "Alexa Liras", + email: "alexa@gmail.com", + price: 340, + image: + "https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-2.jpg", + }, + { + name: "Richard Gran", + email: "richard@gmail.com", + price: 520, + image: + "https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-3.jpg", + }, + { + name: "Micheal Levi", + email: "levi@gmail.com", + price: 780, + image: + "https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-4.jpg", + }, +]; + +export function CardWithList() { + return ( + + +
+ + Latest Customers + + + {" "} + + {" "} + View all{" "} + + +
+ {customers.map(({ name, email, price, image }, index) => ( +
+
+ +
+ + {name} + + + {email} + +
+
+ + ${price} + +
+ ))} + + + ); +} diff --git a/docs-content/react/card/index.ts b/docs-content/react/card/index.ts index 052e94ca9..c6eaf1db1 100644 --- a/docs-content/react/card/index.ts +++ b/docs-content/react/card/index.ts @@ -10,3 +10,4 @@ export * from "./pricing-card"; export * from "./profile-card"; export * from "./simple-card"; export * from "./testimonial-card"; +export * from "./card-with-list"; diff --git a/documentation/react/card.mdx b/documentation/react/card.mdx index 4f3bddecf..a42c8d337 100644 --- a/documentation/react/card.mdx +++ b/documentation/react/card.mdx @@ -15,6 +15,7 @@ navigation: "testimonial-card", "horizontal-card", "ecommerce-card", + "card-with-list", "card-props", "card-header-props", "card-body-props", @@ -966,6 +967,104 @@ export function EcommerceCard() { --- + +--- + + +## Tailwind CSS Card with list - React + + + +}> +```jsx +import { Card, CardBody, Typography, Avatar } from "@material-tailwind/react"; + +const customers = [ + { + name: "Tania Andrew", + email: "tania@gmail.com", + price: 400, + image: + "https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-1.jpg", + }, + { + name: "John Micheal", + email: "john@gmail.com", + price: 420, + image: + "https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-6.jpg", + }, + { + name: "Alexa Liras", + email: "alexa@gmail.com", + price: 340, + image: + "https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-2.jpg", + }, + { + name: "Richard Gran", + email: "richard@gmail.com", + price: 520, + image: + "https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-3.jpg", + }, + { + name: "Micheal Levi", + email: "levi@gmail.com", + price: 780, + image: + "https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-4.jpg", + }, +]; + +export function CardWithList() { + return ( + + +
+ + Latest Customers + + + {" "} + + {" "} + View all{" "} + + +
+ {customers.map(({ name, email, price, image }, index) => ( +
+
+ +
+ + {name} + + + {email} + +
+
+ + ${price} + +
+ ))} + + + ); +} +``` + + +--- + ## Card Props From 615bcf79b36120b7d36ac79807cf8f6ed9286a2d Mon Sep 17 00:00:00 2001 From: Sayed Murtaza Date: Mon, 20 May 2024 21:58:54 +0430 Subject: [PATCH 2/8] avatar with dot --- .../avatar/avatar-with-dot-indicator.tsx | 39 ++++++++++++++ docs-content/react/avatar/index.ts | 1 + documentation/react/avatar.mdx | 54 +++++++++++++++++++ 3 files changed, 94 insertions(+) create mode 100644 docs-content/react/avatar/avatar-with-dot-indicator.tsx diff --git a/docs-content/react/avatar/avatar-with-dot-indicator.tsx b/docs-content/react/avatar/avatar-with-dot-indicator.tsx new file mode 100644 index 000000000..5bc5e74f1 --- /dev/null +++ b/docs-content/react/avatar/avatar-with-dot-indicator.tsx @@ -0,0 +1,39 @@ +import { Avatar } from "@material-tailwind/react"; + +export function AvatarWithDotIndicator() { + return ( +
+
+ +
+
+
+ +
+
+
+ +
+
+ +
+ +
+
+
+ ); +} diff --git a/docs-content/react/avatar/index.ts b/docs-content/react/avatar/index.ts index 291bd9f17..9c9c5eace 100644 --- a/docs-content/react/avatar/index.ts +++ b/docs-content/react/avatar/index.ts @@ -5,3 +5,4 @@ export * from "./avatar-sizes"; export * from "./avatar-variants"; export * from "./avatar-with-border"; export * from "./avatar-with-text"; +export * from "./avatar-with-dot-indicator"; diff --git a/documentation/react/avatar.mdx b/documentation/react/avatar.mdx index 6d68ddf49..1b354fe28 100644 --- a/documentation/react/avatar.mdx +++ b/documentation/react/avatar.mdx @@ -10,6 +10,7 @@ navigation: "avatar-with-text", "avatar-stack", "avatar-custom-styles", + "avatar-with-dot-indicator", "avatar-props", "types-variant", "types-size", @@ -286,6 +287,59 @@ export function AvatarCustomStyles() { --- + +--- + + +## Avatar with Dot Indicator + + +}> +```jsx +import { Avatar } from "@material-tailwind/react"; + +export function AvatarWithDotIndicator() { + return ( +
+
+ +
+
+
+ +
+
+
+ +
+
+ +
+ +
+
+
+ ); +} +``` + + +--- + ## Avatar Props From 829e6ab467be76078c19bc3075f35217e972bbf4 Mon Sep 17 00:00:00 2001 From: Sayed Murtaza Date: Tue, 21 May 2024 07:59:52 +0430 Subject: [PATCH 3/8] avatar user dropdown --- .../avatar/avatar-with-user-dropdown.tsx | 98 +++++++++++ docs-content/react/avatar/index.ts | 1 + documentation/react/avatar.mdx | 166 +++++++++++++++--- 3 files changed, 236 insertions(+), 29 deletions(-) create mode 100644 docs-content/react/avatar/avatar-with-user-dropdown.tsx diff --git a/docs-content/react/avatar/avatar-with-user-dropdown.tsx b/docs-content/react/avatar/avatar-with-user-dropdown.tsx new file mode 100644 index 000000000..2fc6dc93a --- /dev/null +++ b/docs-content/react/avatar/avatar-with-user-dropdown.tsx @@ -0,0 +1,98 @@ +import React from "react"; +import { + Avatar, + Button, + Menu, + MenuHandler, + MenuItem, + MenuList, + Typography, +} from "@material-tailwind/react"; +import { + Cog6ToothIcon, + InboxArrowDownIcon, + LifebuoyIcon, + PowerIcon, + UserCircleIcon, +} from "@heroicons/react/24/solid"; + +// profile menu component +const profileMenuItems = [ + { + label: "My Profile", + icon: UserCircleIcon, + }, + { + label: "Edit Profile", + icon: Cog6ToothIcon, + }, + { + label: "Inbox", + icon: InboxArrowDownIcon, + }, + { + label: "Help", + icon: LifebuoyIcon, + }, + { + label: "Sign Out", + icon: PowerIcon, + }, +]; + +export function AvatarWithUserDropdown() { + const [isMenuOpen, setIsMenuOpen] = React.useState(false); + + const closeMenu = () => setIsMenuOpen(false); + + return ( + + + + + + {profileMenuItems.map(({ label, icon }, key) => { + const isLastItem = key === profileMenuItems.length - 1; + return ( + + {React.createElement(icon, { + className: `h-4 w-4 ${isLastItem ? "text-red-500" : ""}`, + strokeWidth: 2, + })} + + {label} + + + ); + })} + + + ); +} diff --git a/docs-content/react/avatar/index.ts b/docs-content/react/avatar/index.ts index 9c9c5eace..ea51a373f 100644 --- a/docs-content/react/avatar/index.ts +++ b/docs-content/react/avatar/index.ts @@ -6,3 +6,4 @@ export * from "./avatar-variants"; export * from "./avatar-with-border"; export * from "./avatar-with-text"; export * from "./avatar-with-dot-indicator"; +export * from "./avatar-with-user-dropdown"; diff --git a/documentation/react/avatar.mdx b/documentation/react/avatar.mdx index 1b354fe28..28dc3cb72 100644 --- a/documentation/react/avatar.mdx +++ b/documentation/react/avatar.mdx @@ -9,8 +9,10 @@ navigation: "avatar-with-border", "avatar-with-text", "avatar-stack", - "avatar-custom-styles", "avatar-with-dot-indicator", + avatar-with-user-dropdown, + "avatar-custom-styles", + "avatar-props", "types-variant", "types-size", @@ -260,34 +262,6 @@ export function AvatarStack() { ``` ---- - - -## Avatar with Custom Styles - - -You can use the className prop to add custom styles to the Avatar component. Like in the example below - apply a border with border-green-500 for a pop of color and layered shadows shadow-xl shadow-green-900/20 for depth, creating a striking visual effect. - -}> -```jsx -import { Avatar } from "@material-tailwind/react"; - -export function AvatarCustomStyles() { - return ( - - ); -} -``` - - ---- - - --- @@ -340,6 +314,140 @@ export function AvatarWithDotIndicator() { --- + +## Avatar with User dropdown + + +}> +```jsx +import React from "react"; +import { + Avatar, + Button, + Menu, + MenuHandler, + MenuItem, + MenuList, + Typography, +} from "@material-tailwind/react"; +import { + Cog6ToothIcon, + InboxArrowDownIcon, + LifebuoyIcon, + PowerIcon, + UserCircleIcon, +} from "@heroicons/react/24/solid"; + +// profile menu component +const profileMenuItems = [ + { + label: "My Profile", + icon: UserCircleIcon, + }, + { + label: "Edit Profile", + icon: Cog6ToothIcon, + }, + { + label: "Inbox", + icon: InboxArrowDownIcon, + }, + { + label: "Help", + icon: LifebuoyIcon, + }, + { + label: "Sign Out", + icon: PowerIcon, + }, +]; + +export function AvatarWithUserDropdown() { + const [isMenuOpen, setIsMenuOpen] = React.useState(false); + + const closeMenu = () => setIsMenuOpen(false); + + return ( + + + + + + {profileMenuItems.map(({ label, icon }, key) => { + const isLastItem = key === profileMenuItems.length - 1; + return ( + + {React.createElement(icon, { + className: `h-4 w-4 ${isLastItem ? "text-red-500" : ""}`, + strokeWidth: 2, + })} + + {label} + + + ); + })} + + + ); +} +``` + + +--- + + +## Avatar with Custom Styles + + +You can use the className prop to add custom styles to the Avatar component. Like in the example below - apply a border with border-green-500 for a pop of color and layered shadows shadow-xl shadow-green-900/20 for depth, creating a striking visual effect. + +}> +```jsx +import { Avatar } from "@material-tailwind/react"; + +export function AvatarCustomStyles() { + return ( + + ); +} +``` + + +--- + ## Avatar Props From 41f3d06c53a490021b8b6d0e09c038cdb2bef8ba Mon Sep 17 00:00:00 2001 From: Sayed Murtaza Date: Tue, 21 May 2024 09:01:32 +0430 Subject: [PATCH 4/8] nested accordions --- docs-content/react/accordion/index.ts | 1 + .../react/accordion/nesting-accordion.tsx | 110 +++++++++++++++ documentation/react/accordion.mdx | 125 ++++++++++++++++++ 3 files changed, 236 insertions(+) create mode 100644 docs-content/react/accordion/nesting-accordion.tsx diff --git a/docs-content/react/accordion/index.ts b/docs-content/react/accordion/index.ts index 851f064e5..d3927b371 100644 --- a/docs-content/react/accordion/index.ts +++ b/docs-content/react/accordion/index.ts @@ -5,3 +5,4 @@ export * from "./accordion-custom-animation"; export * from "./accordion-custom-icon"; export * from "./accordion-custom-styles"; export * from "./accordion-disabled"; +export * from "./nesting-accordion"; diff --git a/docs-content/react/accordion/nesting-accordion.tsx b/docs-content/react/accordion/nesting-accordion.tsx new file mode 100644 index 000000000..926b82d79 --- /dev/null +++ b/docs-content/react/accordion/nesting-accordion.tsx @@ -0,0 +1,110 @@ +import React from "react"; +import { + Accordion, + AccordionHeader, + AccordionBody, +} from "@material-tailwind/react"; + +export function AccordionNesting() { + const [open, setOpen] = React.useState(1); + const [openNest, setOpenNest] = React.useState(0); + + const handleOpen = (value) => setOpen(open === value ? 0 : value); + const handleOpenNest = (value) => setOpenNest(openNest === value ? 0 : value); + + return ( + <> + + handleOpen(1)}> + What is Material Tailwind? + + + 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. + {/* Nested Accordions */} + + handleOpenNest(1)}> + What is Material Tailwind? + + + 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. + + + + handleOpenNest(2)}> + What is Material Tailwind? + + + 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. + + + + + + handleOpen(2)}> + How to use Material Tailwind? + + + 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. + {/* Nested Accordions */} + + handleOpenNest(3)}> + What is Material Tailwind? + + + 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. + + + + handleOpenNest(4)}> + How to use Material Tailwind? + + + 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. + + + + + + handleOpen(3)}> + What can I do with Material Tailwind? + + + 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. + {/* Nested Accordion */} + + handleOpenNest(5)}> + What is Material Tailwind? + + + 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. + + + + + + ); +} diff --git a/documentation/react/accordion.mdx b/documentation/react/accordion.mdx index 83daeb36a..84a4d1280 100644 --- a/documentation/react/accordion.mdx +++ b/documentation/react/accordion.mdx @@ -11,6 +11,7 @@ navigation: "accordion-custom-animation", "accordion-custom-styles", "accordion-disabled", + "accordion-nesting", "accordion-props", "accordion-header-props", "accordion-body-props", @@ -495,6 +496,130 @@ export function AccordionDisabled() {
In the example above, the first accordion (open === 1) is set to be disabled by passing the disabled prop. This means that this section will not be interactive and cannot be opened or closed by the user. +--- + + +## Accordion Nesting + + +An Accordion can be nested as well + +}> +```jsx +import React from "react"; +import { + Accordion, + AccordionHeader, + AccordionBody, +} from "@material-tailwind/react"; + +export function AccordionNesting() { + const [open, setOpen] = React.useState(1); + const [openNest, setOpenNest] = React.useState(0); + + const handleOpen = (value) => setOpen(open === value ? 0 : value); + const handleOpenNest = (value) => setOpenNest(openNest === value ? 0 : value); + + return ( + <> + + handleOpen(1)}> + What is Material Tailwind? + + + 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. + {/* Nested Accordions */} + + handleOpenNest(1)}> + What is Material Tailwind? + + + 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. + + + + handleOpenNest(2)}> + What is Material Tailwind? + + + 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. + + + + + + handleOpen(2)}> + How to use Material Tailwind? + + + 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. + {/* Nested Accordions */} + + handleOpenNest(3)}> + What is Material Tailwind? + + + 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. + + + + handleOpenNest(4)}> + How to use Material Tailwind? + + + 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. + + + + + + handleOpen(3)}> + What can I do with Material Tailwind? + + + 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. + {/* Nested Accordion */} + + handleOpenNest(5)}> + What is Material Tailwind? + + + 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. + + + + + + ); +} +``` + + + --- From e5afbe9b8aea313628bb4b7170d7468682f3019a Mon Sep 17 00:00:00 2001 From: Sayed Murtaza Date: Tue, 21 May 2024 10:25:54 +0430 Subject: [PATCH 5/8] input file --- docs-content/react/input/index.ts | 1 + docs-content/react/input/input-file.tsx | 14 ++++++++++++ documentation/react/input.mdx | 29 +++++++++++++++++++++++++ 3 files changed, 44 insertions(+) create mode 100644 docs-content/react/input/input-file.tsx diff --git a/docs-content/react/input/index.ts b/docs-content/react/input/index.ts index caf6f1ecd..154cf65ca 100644 --- a/docs-content/react/input/index.ts +++ b/docs-content/react/input/index.ts @@ -10,3 +10,4 @@ export * from "./input-variants"; export * from "./input-with-button"; export * from "./input-with-dropdown"; export * from "./input-with-helper-text"; +export * from "./input-file"; diff --git a/docs-content/react/input/input-file.tsx b/docs-content/react/input/input-file.tsx new file mode 100644 index 000000000..c564a7391 --- /dev/null +++ b/docs-content/react/input/input-file.tsx @@ -0,0 +1,14 @@ +export function InputFile() { + return ( + <> + + + + ); +} diff --git a/documentation/react/input.mdx b/documentation/react/input.mdx index 827073710..5fc35bf81 100644 --- a/documentation/react/input.mdx +++ b/documentation/react/input.mdx @@ -14,6 +14,7 @@ navigation: "input-with-dropdown", "input-disabled", "input-for-dark-surface", + "input-file", "input-custom-styles", "input-props", "types-variant", @@ -400,6 +401,34 @@ export function InputForDarkSurface() { --- + + +## Input File + + + +}> +```jsx +export function InputFile() { + return ( + <> + + + + ); +} +``` + + +--- + + ## Input Custom Styles From 836788360355df61460cdab0b3de9f9d59afae7d Mon Sep 17 00:00:00 2001 From: Sayed Murtaza Date: Tue, 21 May 2024 11:08:22 +0430 Subject: [PATCH 6/8] input file with MT done --- docs-content/react/input/input-file.tsx | 16 +++++++++------- documentation/react/input.mdx | 16 +++++++++------- 2 files changed, 18 insertions(+), 14 deletions(-) diff --git a/docs-content/react/input/input-file.tsx b/docs-content/react/input/input-file.tsx index c564a7391..e4646e7ab 100644 --- a/docs-content/react/input/input-file.tsx +++ b/docs-content/react/input/input-file.tsx @@ -1,14 +1,16 @@ +import { Input } from "@material-tailwind/react"; + export function InputFile() { return ( - <> - - + - + ); } diff --git a/documentation/react/input.mdx b/documentation/react/input.mdx index 5fc35bf81..bd5b6d944 100644 --- a/documentation/react/input.mdx +++ b/documentation/react/input.mdx @@ -409,18 +409,20 @@ export function InputForDarkSurface() { }> ```jsx +import { Input } from "@material-tailwind/react"; + export function InputFile() { return ( - <> - - + - + ); } ``` From 00390b0dbd2eab69d2382824369425b5876f55e6 Mon Sep 17 00:00:00 2001 From: Sayed Murtaza Date: Tue, 21 May 2024 21:40:08 +0430 Subject: [PATCH 7/8] input file HTML --- docs-content/html/input/index.ts | 1 + docs-content/html/input/input-file.tsx | 16 +++++++++++++++ documentation/html/input.mdx | 28 ++++++++++++++++++++++++++ 3 files changed, 45 insertions(+) create mode 100644 docs-content/html/input/input-file.tsx diff --git a/docs-content/html/input/index.ts b/docs-content/html/input/index.ts index 06f2ad0d8..8e59e07fa 100644 --- a/docs-content/html/input/index.ts +++ b/docs-content/html/input/index.ts @@ -9,3 +9,4 @@ export * from "./input-validations"; export * from "./input-variants"; export * from "./input-with-button"; export * from "./input-with-helper-text"; +export * from "./input-file"; diff --git a/docs-content/html/input/input-file.tsx b/docs-content/html/input/input-file.tsx new file mode 100644 index 000000000..54dc191a6 --- /dev/null +++ b/docs-content/html/input/input-file.tsx @@ -0,0 +1,16 @@ +export function InputFile() { + return ( +
+
+
+ + +
+
+
+ ); +} diff --git a/documentation/html/input.mdx b/documentation/html/input.mdx index 8da912aa5..cb3e4c3a1 100644 --- a/documentation/html/input.mdx +++ b/documentation/html/input.mdx @@ -13,6 +13,7 @@ navigation: "input-with-button", "disabled-input", "input-for-dark-surface", + "input-file", "input-custom-styles" ] github: input @@ -383,6 +384,33 @@ Use this example for using contrast and visibility on a dark background (b --- +## Input File + +} +> +```html +
+
+
+ + +
+
+
+``` + + +--- + + ## Input Custom Styles Check out this example to learn how you can implement custom styles for your input components with Material Tailwind. From d1913c0b771d2195d7a804c35131c2ca51ed81e0 Mon Sep 17 00:00:00 2001 From: Sayed Murtaza Date: Tue, 21 May 2024 22:39:48 +0430 Subject: [PATCH 8/8] Input FIle, class added in mdx --- documentation/html/input.mdx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/documentation/html/input.mdx b/documentation/html/input.mdx index cb3e4c3a1..e401ec7da 100644 --- a/documentation/html/input.mdx +++ b/documentation/html/input.mdx @@ -389,19 +389,19 @@ Use this example for using contrast and visibility on a dark background (b } > ```html -
+
-
+
- +