New comp 04

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";

docs-content/html/input/input-file.tsx

@@ -0,0 +1,16 @@
+export function InputFile() {
+  return (
+    <div className="grid min-h-[140px] w-full place-items-center overflow-x-scroll rounded-lg p-6 lg:overflow-visible">
+      <div>
+        <div className="relative h-10 w-full min-w-[200px]">
+          <input
+            type="file"
+            id="file-input"
+            className="peer block h-full w-full rounded-[7px] !border !border-gray-300 border-t-transparent bg-transparent !px-0 py-2.5 !pt-0 font-sans text-sm font-normal  text-gray-900 shadow-lg shadow-gray-900/5  outline outline-0 ring-4 ring-transparent  transition-all file:me-4 file:cursor-pointer file:rounded-md file:border-0 file:bg-blue-gray-900 file:px-3 file:py-[9px] file:text-white placeholder:!opacity-0 placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 hover:cursor-pointer focus:z-10 focus:border-2 focus:!border-gray-500 focus:border-t-transparent focus:outline-0 focus:placeholder:opacity-100 disabled:pointer-events-none disabled:cursor-not-allowed disabled:border-0 disabled:bg-blue-gray-50 disabled:opacity-50"
+          />
+          <label className="before:content[' '] after:content[' '] pointer-events-none absolute -top-1.5 left-0  hidden h-full w-full select-none !overflow-visible truncate text-[11px] font-normal leading-tight text-gray-500 transition-all before:pointer-events-none before:mr-1 before:mt-[6.5px] before:box-border before:block before:h-1.5 before:w-2.5 before:rounded-tl-md before:border-l before:border-t before:border-blue-gray-200 before:transition-all after:pointer-events-none after:ml-1 after:mt-[6.5px] after:box-border after:block after:h-1.5 after:w-2.5 after:flex-grow after:rounded-tr-md after:border-r after:border-t after:border-blue-gray-200 after:transition-all peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[3.75] peer-placeholder-shown:text-blue-gray-500 peer-placeholder-shown:before:border-transparent peer-placeholder-shown:after:border-transparent peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-gray-900 peer-focus:before:border-l-2 peer-focus:before:border-t-2 peer-focus:before:!border-gray-900 peer-focus:after:border-r-2 peer-focus:after:border-t-2 peer-focus:after:!border-gray-900 peer-disabled:text-transparent peer-disabled:before:border-transparent peer-disabled:after:border-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500"></label>
+        </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 "./nesting-accordion";

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 (
+    <>
+      <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.
+          {/* Nested Accordions */}
+          <Accordion open={openNest === 3}>
+            <AccordionHeader onClick={() => handleOpenNest(3)}>
+              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 === 4}>
+            <AccordionHeader onClick={() => handleOpenNest(4)}>
+              How to use 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 === 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.
+          {/* Nested Accordion */}
+          <Accordion open={openNest === 5}>
+            <AccordionHeader onClick={() => handleOpenNest(5)}>
+              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.
+            </AccordionBody>
+          </Accordion>
+        </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";

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: "[email protected]",
+    price: 400,
+    image:
+      "https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-1.jpg",
+  },
+  {
+    name: "John Micheal",
+    email: "[email protected]",
+    price: 420,
+    image:
+      "https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-6.jpg",
+  },
+  {
+    name: "Alexa Liras",
+    email: "[email protected]",
+    price: 340,
+    image:
+      "https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-2.jpg",
+  },
+  {
+    name: "Richard Gran",
+    email: "[email protected]",
+    price: 520,
+    image:
+      "https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-3.jpg",
+  },
+  {
+    name: "Micheal Levi",
+    email: "[email protected]",
+    price: 780,
+    image:
+      "https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-4.jpg",
+  },
+];
+
+export function CardWithList() {
+  return (
+    <Card className="mt-6 w-96">
+      <CardBody>
+        <div className="mb-4 flex items-center justify-between">
+          <Typography variant="h5" color="blue-gray" className="">
+            Latest Customers
+          </Typography>
+          <Typography variant="small" color="blue">
+            {" "}
+            <a href="#" className="hover:underline">
+              {" "}
+              View all{" "}
+            </a>
+          </Typography>
+        </div>
+        {customers.map(({ name, email, price, image }, index) => (
+          <div
+            key={index}
+            className={`flex items-center justify-between border-b py-3.5 ${
+              index === customers.length - 1 ? "border-none" : "border-gray-300"
+            }  `}
+          >
+            <div className="flex items-center gap-x-3">
+              <Avatar size="sm" src={image} alt={name} />
+              <div>
+                <Typography color="blue-gray" variant="h6">
+                  {name}
+                </Typography>
+                <Typography variant="small" color="gray">
+                  {email}
+                </Typography>
+              </div>
+            </div>
+            <Typography color="blue-gray" variant="h6">
+              ${price}
+            </Typography>
+          </div>
+        ))}
+      </CardBody>
+    </Card>
+  );
+}

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";

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";

docs-content/react/input/input-file.tsx

@@ -0,0 +1,16 @@
+import { Input } from "@material-tailwind/react";
+
+export function InputFile() {
+  return (
+    <div>
+      <Input
+        type="file"
+        id="file-input"
+        className="block w-full rounded-lg !border !border-gray-300  !px-0   !pt-0 text-gray-900 shadow-lg shadow-gray-900/5 ring-4 ring-transparent  file:me-4 file:cursor-pointer file:rounded-md file:border-0 file:bg-blue-gray-900 file:px-3 file:py-[9px] file:text-white placeholder:!opacity-0 hover:cursor-pointer focus:z-10 focus:!border-gray-500    disabled:pointer-events-none disabled:opacity-50"
+        labelProps={{
+          className: "hidden",
+        }}
+      />
+    </div>
+  );
+}