Merge pull request #268 from creativetimofficial/dev-main

Dev main
creativetimofficial · Jan 3, 2023 · 223ff7a · 223ff7a · vercel · Jan 3, 2023
2 parents 1f57aad + 0c78da8
commit 223ff7a
Show file tree

Hide file tree

Showing 60 changed files with 521 additions and 367 deletions.
diff --git a/README.md b/README.md
@@ -11,7 +11,7 @@
     <img src="https://img.shields.io/npm/dt/@material-tailwind/react.svg" alt="Total Downloads">
   </a>
   <a href="https://github.com/creativetimofficial/material-tailwind/releases">
-    <img src="https://img.shields.io/badge/version-1.2.4-blue.svg" alt="Version" />
+    <img src="https://img.shields.io/badge/version-1.2.5-blue.svg" alt="Version" />
   </a>
 </p>
 <p align="center">

diff --git a/components/cards/framework.tsx b/components/cards/framework.tsx
@@ -13,15 +13,14 @@ interface Props {
 const Framework = forwardRef(
   ({ children, route, center = false }: Props, ref: any) => {
     return (
-      <Link href={route}>
-        <a
-          ref={ref}
-          className={`grid w-full min-w-[7rem] transform cursor-pointer ${
-            center ? "place-items-center" : ""
-          } border-blue-gray-50 hover:border-blue-gray-100 hover:bg-blue-gray-50 rounded-xl border bg-white px-3 py-2 transition-all hover:scale-105 hover:bg-opacity-25`}
-        >
-          {children}
-        </a>
+      <Link
+        ref={ref}
+        href={route}
+        className={`grid w-full min-w-[7rem] transform cursor-pointer ${
+          center ? "place-items-center" : ""
+        } rounded-xl border border-blue-gray-50 bg-white px-3 py-2 transition-all hover:scale-105 hover:border-blue-gray-100 hover:bg-blue-gray-50 hover:bg-opacity-25`}
+      >
+        {children}
       </Link>
     );
   }

diff --git a/components/color-palette.tsx b/components/color-palette.tsx
@@ -4,10 +4,10 @@ interface Props {
   colors: {
     name: number;
     hex: string;
-  }[];
+  };
 }
 
-export default function ColorPalette({ name, colors }) {
+export default function ColorPalette({ name, colors }: Props) {
   return (
     <div className="flex flex-col space-y-1.5 text-xs">
       <div className="flex h-10 flex-col justify-center">

diff --git a/components/layout/docs-footer.tsx b/components/layout/docs-footer.tsx
@@ -26,32 +26,28 @@ export default function DocsFooter({ type, frontMatter }: Props) {
       >
         {frontMatter.prev && (
           <Link href={`/docs/${type}/${frontMatter.prev}`}>
-            <a>
-              <Typography className="py-2 font-medium capitalize text-blue-gray-500 transition-colors hover:text-blue-gray-900">
-                <i className="fas fa-caret-left mr-2 mt-px" />
-                {frontMatter.prev.includes("-")
-                  ? frontMatter.prev
-                      .split("-")
-                      .map((el) => (el === "css" ? "CSS" : el))
-                      .join(" ")
-                  : frontMatter.prev}
-              </Typography>
-            </a>
+            <Typography className="py-2 font-medium capitalize text-blue-gray-500 transition-colors hover:text-blue-gray-900">
+              <i className="fas fa-caret-left mr-2 mt-px" />
+              {frontMatter.prev.includes("-")
+                ? frontMatter.prev
+                    .split("-")
+                    .map((el) => (el === "css" ? "CSS" : el))
+                    .join(" ")
+                : frontMatter.prev}
+            </Typography>
           </Link>
         )}
         {frontMatter.next && (
           <Link href={`/docs/${type}/${frontMatter.next}`}>
-            <a>
-              <Typography className="py-2 font-medium capitalize text-blue-gray-500 transition-colors hover:text-blue-gray-900">
-                {frontMatter.next.includes("-")
-                  ? frontMatter.next
-                      .split("-")
-                      .map((el) => (el === "css" ? "CSS" : el))
-                      .join(" ")
-                  : frontMatter.next}
-                <i className="fas fa-caret-right ml-2 mt-px" />
-              </Typography>
-            </a>
+            <Typography className="py-2 font-medium capitalize text-blue-gray-500 transition-colors hover:text-blue-gray-900">
+              {frontMatter.next.includes("-")
+                ? frontMatter.next
+                    .split("-")
+                    .map((el) => (el === "css" ? "CSS" : el))
+                    .join(" ")
+                : frontMatter.next}
+              <i className="fas fa-caret-right ml-2 mt-px" />
+            </Typography>
           </Link>
         )}
       </div>

diff --git a/components/layout/header.tsx b/components/layout/header.tsx
@@ -82,11 +82,9 @@ export default function Header() {
                       : "/docs/html/installation"
                   }
                 >
-                  <a>
-                    <Button variant="gradient" className="h-full w-full">
-                      Get Started
-                    </Button>
-                  </a>
+                  <Button variant="gradient" className="h-full w-full">
+                    Get Started
+                  </Button>
                 </Link>
                 <div className="flex rounded-lg border border-white/80 bg-white/80 py-2.5 px-5 text-[#1A237E] shadow-2xl shadow-blue-gray-500/20 backdrop-blur-2xl backdrop-saturate-200">
                   <CopyToClipboard

diff --git a/components/layout/navbar.tsx b/components/layout/navbar.tsx
@@ -141,36 +141,38 @@ export default function Navbar({
           </MenuHandler>
           <MenuList>
             <MenuItem className="!p-0">
-              <Link href="/docs/html/installation">
-                <a className={`${navbarItemClasses} lg:px-3`}>HTML</a>
+              <Link
+                href="/docs/html/installation"
+                className={`${navbarItemClasses} lg:px-3`}
+              >
+                HTML
               </Link>
             </MenuItem>
             <MenuItem className="!p-0">
-              <Link href="/docs/react/installation">
-                <a className={`${navbarItemClasses} px-3 py-2 lg:px-3`}>
-                  ReactJS
-                </a>
+              <Link
+                href="/docs/react/installation"
+                className={`${navbarItemClasses} px-3 py-2 lg:px-3`}
+              >
+                ReactJS
               </Link>
             </MenuItem>
           </MenuList>
         </Menu>
         <li>
-          <Link href="/blocks">
-            <a className={navbarItemClasses}>
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                fill="currentColor"
-                className="mr-1.5 h-[18px] w-[18px] opacity-75"
-              >
-                <path
-                  fillRule="evenodd"
-                  d="M3 6a3 3 0 013-3h2.25a3 3 0 013 3v2.25a3 3 0 01-3 3H6a3 3 0 01-3-3V6zm9.75 0a3 3 0 013-3H18a3 3 0 013 3v2.25a3 3 0 01-3 3h-2.25a3 3 0 01-3-3V6zM3 15.75a3 3 0 013-3h2.25a3 3 0 013 3V18a3 3 0 01-3 3H6a3 3 0 01-3-3v-2.25zm9.75 0a3 3 0 013-3H18a3 3 0 013 3V18a3 3 0 01-3 3h-2.25a3 3 0 01-3-3v-2.25z"
-                  clipRule="evenodd"
-                />
-              </svg>
-              Blocks
-            </a>
+          <Link href="/blocks" className={navbarItemClasses}>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+              className="mr-1.5 h-[18px] w-[18px] opacity-75"
+            >
+              <path
+                fillRule="evenodd"
+                d="M3 6a3 3 0 013-3h2.25a3 3 0 013 3v2.25a3 3 0 01-3 3H6a3 3 0 01-3-3V6zm9.75 0a3 3 0 013-3H18a3 3 0 013 3v2.25a3 3 0 01-3 3h-2.25a3 3 0 01-3-3V6zM3 15.75a3 3 0 013-3h2.25a3 3 0 013 3V18a3 3 0 01-3 3H6a3 3 0 01-3-3v-2.25zm9.75 0a3 3 0 013-3H18a3 3 0 013 3V18a3 3 0 01-3 3h-2.25a3 3 0 01-3-3v-2.25z"
+                clipRule="evenodd"
+              />
+            </svg>
+            Blocks
           </Link>
         </li>
         <li>
@@ -284,10 +286,11 @@ export default function Navbar({
         <div
           className={`flex w-full items-center !justify-between text-[#1A237E] ${className}`}
         >
-          <Link href="/">
-            <a className="py-2.375 text-size-sm mr-4 whitespace-nowrap font-bold text-inherit lg:ml-0">
-              Material Tailwind
-            </a>
+          <Link
+            href="/"
+            className="py-2.375 text-size-sm mr-4 whitespace-nowrap font-bold text-inherit lg:ml-0"
+          >
+            Material Tailwind
           </Link>
           <IconButton
             variant="text"

diff --git a/components/layout/sidenav.tsx b/components/layout/sidenav.tsx
@@ -79,24 +79,22 @@ function Sidenav({ routes, type, slug, mobileNav, setMobileNav }: Props) {
                 {pages.map((page, key) => (
                   <li key={key}>
                     <Link href={`/docs/${type}/${page}`}>
-                      <a>
-                        <Typography
-                          color="gray"
-                          className={`before:content-[' '] relative list-item w-full py-1 px-1 capitalize transition-colors before:absolute before:-left-[25px] before:top-2/4 before:h-1.5 before:w-1.5 before:-translate-y-2/4 before:rounded-full before:transition-colors hover:text-blue-gray-900 hover:before:bg-blue-gray-900 ${
-                            page === slug
-                              ? "font-medium text-blue-gray-900 before:bg-blue-gray-900"
-                              : "font-normal text-blue-gray-400 before:bg-blue-gray-300"
-                          }`}
-                          onClick={() => setMobileNav(false)}
-                        >
-                          {page.includes("-")
-                            ? page
-                                .split("-")
-                                .map((el) => (el === "css" ? "CSS" : el))
-                                .join(" ")
-                            : page}
-                        </Typography>
-                      </a>
+                      <Typography
+                        color="gray"
+                        className={`before:content-[' '] relative list-item w-full py-1 px-1 capitalize transition-colors before:absolute before:-left-[25px] before:top-2/4 before:h-1.5 before:w-1.5 before:-translate-y-2/4 before:rounded-full before:transition-colors hover:text-blue-gray-900 hover:before:bg-blue-gray-900 ${
+                          page === slug
+                            ? "font-medium text-blue-gray-900 before:bg-blue-gray-900"
+                            : "font-normal text-blue-gray-400 before:bg-blue-gray-300"
+                        }`}
+                        onClick={() => setMobileNav(false)}
+                      >
+                        {page.includes("-")
+                          ? page
+                              .split("-")
+                              .map((el) => (el === "css" ? "CSS" : el))
+                              .join(" ")
+                          : page}
+                      </Typography>
                     </Link>
                   </li>
                 ))}

diff --git a/components/sections/button.tsx b/components/sections/button.tsx
@@ -87,9 +87,7 @@ export default function SectionButton() {
             you can change the colors, fonts, styling, and everything you need.
           </Typography>
           <Link href="/docs/react/button">
-            <a>
-              <Button>Get Started</Button>
-            </a>
+            <Button>Get Started</Button>
           </Link>
           <div className="mt-7 flex flex-wrap text-[#1A237E]">
             <div className="mr-6 w-auto text-center md:mr-8">

diff --git a/components/sections/components.tsx b/components/sections/components.tsx
@@ -79,7 +79,10 @@ export default function SectionComponents() {
               <Image
                 src="/img/blog-2.jpg"
                 alt="tailwind_img_blur_shadow"
-                layout="fill"
+                className="h-full w-full object-cover"
+                quality={100}
+                width={1000}
+                height={1000}
               />
             </CardHeader>
             <CardBody>

diff --git a/documentation/html/menu.mdx b/documentation/html/menu.mdx
@@ -1,13 +1,13 @@
 ---
-title: Tailwind CSS Alert - Material Tailwind
-description: Customise your web projects with our easy-to-use Alert component for Tailwind CSS using Material Design guidelines.
+title: Tailwind CSS Menu - Material Tailwind
+description: Customise your web projects with our easy-to-use Menu component for Tailwind CSS using Material Design guidelines.
 navigation: ["menu", "menu-right", "nested-menu", "required-script"]
 github: menu
 prev: input
 next: navbar
 ---
 
-# Tailwind CSS Alerts
+# Tailwind CSS Menu
 
 Use our responsive Tailwind CSS vertical menu, that can take the user anywhere on your web app!
 

diff --git a/documentation/react/card.mdx b/documentation/react/card.mdx
@@ -273,6 +273,9 @@ import {
   CardBody,
   CardFooter,
   Typography,
+  Input,
+  Checkbox,
+  Button,
 } from "@material-tailwind/react";
 
 export default function Example() {

diff --git a/documentation/react/chip.mdx b/documentation/react/chip.mdx
@@ -267,7 +267,7 @@ You can modify the open/close state animation for <Code>Chip</Code> component us
 
 ```jsx
 import { useState, Fragment } from "react";
-import { Alert, Button } from "@material-tailwind/react";
+import { Chip, Button } from "@material-tailwind/react";
 
 export default function Colors() {
   const [show, setShow] = useState(true);

diff --git a/documentation/react/fonts.mdx b/documentation/react/fonts.mdx
@@ -36,7 +36,7 @@ const fontFamily = {
 
 You can customize the default font families for @material-tailwind/react very easy and straightforward, it's the same as customizing font families for tailwindcss.
 
-You just need to customize the font family that you like throw the <Code>fontFamily</Code> object for <Code>tailwind.config.js</Code> file.
+You just need to customize the font family that you like through the <Code>fontFamily</Code> object for <Code>tailwind.config.js</Code> file.
 
 ```js {4}
 module.exports = withMT({

diff --git a/documentation/react/guide/cra.mdx b/documentation/react/guide/cra.mdx
@@ -8,6 +8,7 @@ navigation:
     "yarn",
     "pnpm",
     "tailwindcss-config",
+    "with-monorepo",
     "theme-provider",
     "example",
   ]
@@ -82,6 +83,30 @@ module.exports = withMT({
 
 ---
 
+## TailwindCSS Configurations with MonoRepo
+
+<span id="with-monorepo" className="scroll-mt-48" />
+
+If you're using monorepo in your project you need to add the `theme` and `components` paths to your `tailwind.config.js`.
+
+```js {6,7}
+const withMT = require("@material-tailwind/react/utils/withMT");
+
+module.exports = withMT({
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+    "path-to-your-node_modules/@material-tailwind/react/components/**/*.{js,ts,jsx,tsx}",
+    "path-to-your-node_modules/@material-tailwind/react/theme/components/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+});
+```
+
+---
+
 ## Theme Provider
 
 <span id="theme-provider" className="scroll-mt-48" />

diff --git a/documentation/react/guide/next.mdx b/documentation/react/guide/next.mdx
@@ -8,6 +8,7 @@ navigation:
     "yarn",
     "pnpm",
     "tailwindcss-config",
+    "with-monorepo",
     "theme-provider",
     "example",
   ]
@@ -82,6 +83,30 @@ module.exports = withMT({
 
 ---
 
+## TailwindCSS Configurations with MonoRepo
+
+<span id="with-monorepo" className="scroll-mt-48" />
+
+If you're using monorepo in your project you need to add the `theme` and `components` paths to your `tailwind.config.js`.
+
+```js {6,7}
+const withMT = require("@material-tailwind/react/utils/withMT");
+
+module.exports = withMT({
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx}",
+    "path-to-your-node_modules/@material-tailwind/react/components/**/*.{js,ts,jsx,tsx}",
+    "path-to-your-node_modules/@material-tailwind/react/theme/components/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+});
+```
+
+---
+
 ## Theme Provider
 
 <span id="theme-provider" className="scroll-mt-48" />