New comp 03

docs-content/html/accordion/index.ts

@@ -1,3 +1,4 @@
 export * from "./accordion";
 export * from "./accordion-custom-icon";
 export * from "./accordion-disabled";
+export * from "./nested-accordion";

docs-content/html/accordion/nested-accordion.tsx

@@ -0,0 +1,98 @@
+export function NestedAccordion() {
+  return (
+    <>
+      <div className="relative mt-1 mb-7">
+        <h6 className="mb-0">
+          <button
+            className="relative flex items-center w-full p-4 font-semibold text-left transition-all ease-in border-b border-solid cursor-pointer border-slate-100 text-slate-700 rounded-t-1 group text-dark-500"
+            data-collapse-target="collapse-1"
+          >
+            <span>What is Material Tailwind?</span>
+            <i className="absolute right-0 pt-1 text-xs fa fa-plus group-open:opacity-0"></i>
+            <i className="absolute right-0 pt-1 text-xs opacity-0 fa fa-minus group-open:opacity-100"></i>
+          </button>
+        </h6>
+        <div
+          data-collapse="collapse-1"
+          className="h-0 overflow-hidden transition-all duration-300 ease-in-out"
+        >
+          <div className="p-4 text-sm leading-normal text-blue-gray-500/80">
+            We&apos;re not always in the position that we want to be at.
+            We&apos;re constantly growing. We&apos;re constantly making
+            mistakes. We&apos;re constantly trying to express ourselves and
+            actualize our dreams.
+            <div className="relative ">
+              <h6 className="">
+                <button
+                  className="relative flex items-center w-full p-4 font-semibold text-left transition-all ease-in border-b border-solid cursor-pointer border-slate-100 text-slate-700 rounded-t-1 group text-dark-500"
+                  data-collapse-target="collapse-4"
+                >
+                  <span>What is Material Tailwind?</span>
+                  <i className="absolute right-0 pt-1 text-xs fa fa-plus group-open:opacity-0"></i>
+                  <i className="absolute right-0 pt-1 text-xs opacity-0 fa fa-minus group-open:opacity-100"></i>
+                </button>
+              </h6>
+              <div
+                data-collapse="collapse-4"
+                className="h-0 overflow-hidden transition-all duration-300 ease-in-out"
+              >
+                <div className="p-4 text-sm leading-normal text-blue-gray-500/80">
+                  We&apos;re not always in the position that we want to be at.
+                  We&apos;re constantly growing. We&apos;re constantly making
+                  mistakes. We&apos;re constantly trying to express ourselves
+                  and actualize our dreams.
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="relative mb-3.5 mt-1">
+        <h6 className="mb-0">
+          <button
+            className="relative flex items-center w-full p-4 font-semibold text-left transition-all ease-in border-b border-solid cursor-pointer border-slate-100 text-slate-700 rounded-t-1 group text-dark-500"
+            data-collapse-target="collapse-2"
+          >
+            <span>How to use Material Tailwind?</span>
+            <i className="absolute right-0 pt-1 text-xs fa fa-plus group-open:opacity-0"></i>
+            <i className="absolute right-0 pt-1 text-xs opacity-0 fa fa-minus group-open:opacity-100"></i>
+          </button>
+        </h6>
+        <div
+          data-collapse="collapse-2"
+          className="h-0 overflow-hidden transition-all duration-300 ease-in-out"
+        >
+          <div className="p-4 text-sm leading-normal text-blue-gray-500/80">
+            We&apos;re not always in the position that we want to be at.
+            We&apos;re constantly growing. We&apos;re constantly making
+            mistakes. We&apos;re constantly trying to express ourselves and
+            actualize our dreams.
+          </div>
+        </div>
+      </div>
+      <div className="relative mb-3.5 mt-1">
+        <h6 className="mb-0">
+          <button
+            className="relative flex items-center w-full p-4 font-semibold text-left transition-all ease-in border-b border-solid cursor-pointer border-slate-100 text-slate-700 rounded-t-1 group text-dark-500"
+            data-collapse-target="collapse-3"
+          >
+            <span>What can I do with Material Tailwind?</span>
+            <i className="absolute right-0 pt-1 text-xs fa fa-plus group-open:opacity-0"></i>
+            <i className="absolute right-0 pt-1 text-xs opacity-0 fa fa-minus group-open:opacity-100"></i>
+          </button>
+        </h6>
+        <div
+          data-collapse="collapse-3"
+          className="h-0 overflow-hidden transition-all duration-300 ease-in-out"
+        >
+          <div className="p-4 text-sm leading-normal text-blue-gray-500/80">
+            We&apos;re not always in the position that we want to be at.
+            We&apos;re constantly growing. We&apos;re constantly making
+            mistakes. We&apos;re constantly trying to express ourselves and
+            actualize our dreams.
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

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 "./nested-accordion";

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

@@ -0,0 +1,75 @@
+import React from "react";
+import {
+  Accordion,
+  AccordionHeader,
+  AccordionBody,
+} from "@material-tailwind/react";
+
+export function NestedAccordion() {
+  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 (
+    <>
+      <Accordion open={open === 1}>
+        <AccordionHeader onClick={() => handleOpen(1)}>
+          What is Material Tailwind?
+        </AccordionHeader>
+        <AccordionBody className="p-3">
+          We&apos;re not always in the position that we want to be at.
+          We&apos;re constantly growing. We&apos;re constantly making mistakes.
+          We&apos;re constantly trying to express ourselves and actualize our
+          dreams.
+          {/* Nested Accordions */}
+          <Accordion open={openNest === 1}>
+            <AccordionHeader onClick={() => handleOpenNest(1)}>
+              What is Material Tailwind?
+            </AccordionHeader>
+            <AccordionBody>
+              We&apos;re not always in the position that we want to be at.
+              We&apos;re constantly growing. We&apos;re constantly making
+              mistakes. We&apos;re constantly trying to express ourselves and
+              actualize our dreams.
+            </AccordionBody>
+          </Accordion>
+          <Accordion open={openNest === 2}>
+            <AccordionHeader onClick={() => handleOpenNest(2)}>
+              What is Material Tailwind?
+            </AccordionHeader>
+            <AccordionBody>
+              We&apos;re not always in the position that we want to be at.
+              We&apos;re constantly growing. We&apos;re constantly making
+              mistakes. We&apos;re constantly trying to express ourselves and
+              actualize our dreams.
+            </AccordionBody>
+          </Accordion>
+        </AccordionBody>
+      </Accordion>
+      <Accordion open={open === 2}>
+        <AccordionHeader onClick={() => handleOpen(2)}>
+          How to use Material Tailwind?
+        </AccordionHeader>
+        <AccordionBody className="p-3">
+          We&apos;re not always in the position that we want to be at.
+          We&apos;re constantly growing. We&apos;re constantly making mistakes.
+          We&apos;re constantly trying to express ourselves and actualize our
+          dreams.
+        </AccordionBody>
+      </Accordion>
+      <Accordion open={open === 3}>
+        <AccordionHeader onClick={() => handleOpen(3)}>
+          What can I do with Material Tailwind?
+        </AccordionHeader>
+        <AccordionBody>
+          We&apos;re not always in the position that we want to be at.
+          We&apos;re constantly growing. We&apos;re constantly making mistakes.
+          We&apos;re constantly trying to express ourselves and actualize our
+          dreams.
+        </AccordionBody>
+      </Accordion>
+    </>
+  );
+}

docs-content/react/avatar/avatar-with-dot-indicator.tsx

@@ -0,0 +1,39 @@
+import { Avatar } from "@material-tailwind/react";
+
+export function AvatarWithDotIndicator() {
+  return (
+    <div className="flex gap-4">
+      <div className="relative">
+        <Avatar
+          src="https://docs.material-tailwind.com/img/face-2.jpg"
+          alt="avatar"
+        />
+        <div className="absolute -right-0.5 top-0.5 !z-20 h-3.5 w-3.5 rounded-full  border-2 border-white bg-green-500 "></div>
+      </div>
+      <div className="relative">
+        <Avatar
+          variant="rounded"
+          src="https://docs.material-tailwind.com/img/face-2.jpg"
+          alt="avatar"
+        />
+        <div className="absolute -right-1 -top-1 !z-20 h-3.5 w-3.5 rounded-full  border-2 border-white bg-green-500 "></div>
+      </div>
+      <div className="relative">
+        <Avatar
+          src="https://docs.material-tailwind.com/img/face-2.jpg"
+          alt="avatar"
+        />
+        <div className="absolute -right-0.5 bottom-0.5 !z-20 h-3.5 w-3.5 rounded-full  border-2 border-white bg-green-500 "></div>
+      </div>
+
+      <div className="relative">
+        <Avatar
+          variant="rounded"
+          src="https://docs.material-tailwind.com/img/face-2.jpg"
+          alt="avatar"
+        />
+        <div className="absolute -bottom-1 -right-1 !z-20 h-3.5 w-3.5 rounded-full  border-2 border-white bg-red-400 "></div>
+      </div>
+    </div>
+  );
+}

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 (
+    <Menu open={isMenuOpen} handler={setIsMenuOpen} placement="bottom-end">
+      <MenuHandler>
+        <Button
+          variant="text"
+          color="blue-gray"
+          className="flex items-center rounded-full p-0"
+        >
+          <Avatar
+            variant="circular"
+            size="md"
+            alt="tania andrew"
+            withBorder={true}
+            color="blue-gray"
+            className=" p-0.5"
+            src="https://docs.material-tailwind.com/img/face-2.jpg"
+          />
+        </Button>
+      </MenuHandler>
+      <MenuList className="p-1">
+        {profileMenuItems.map(({ label, icon }, key) => {
+          const isLastItem = key === profileMenuItems.length - 1;
+          return (
+            <MenuItem
+              key={label}
+              onClick={closeMenu}
+              className={`flex items-center gap-2 rounded ${
+                isLastItem
+                  ? "hover:bg-red-500/10 focus:bg-red-500/10 active:bg-red-500/10"
+                  : ""
+              }`}
+            >
+              {React.createElement(icon, {
+                className: `h-4 w-4 ${isLastItem ? "text-red-500" : ""}`,
+                strokeWidth: 2,
+              })}
+              <Typography
+                as="span"
+                variant="small"
+                className="font-normal"
+                color={isLastItem ? "red" : "inherit"}
+              >
+                {label}
+              </Typography>
+            </MenuItem>
+          );
+        })}
+      </MenuList>
+    </Menu>
+  );
+}

docs-content/react/avatar/index.ts

@@ -5,3 +5,5 @@ export * from "./avatar-sizes";
 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";