update website and react version

creativetimofficial · Oct 18, 2023 · 594b4b4 · 594b4b4 · vercel · Oct 18, 2023
1 parent 776d251
commit 594b4b4
Show file tree

Hide file tree

Showing 14 changed files with 100 additions and 56 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-2.1.3-blue.svg" alt="Version" />
+    <img src="https://img.shields.io/badge/version-2.1.4-blue.svg" alt="Version" />
   </a>
 </p>
 <p align="center">

diff --git a/docs-content/react/releases.ts b/docs-content/react/releases.ts
@@ -1,4 +1,16 @@
 export const releases = [
+  {
+    version: "2.1.4",
+    date: "Octuber 18, 2023",
+    name: "@material-tailwind/react",
+    description: "Material Tailwind v2.1.4",
+    content: [
+      {
+        title: "patch changes",
+        data: ["Update <Button /> theme."],
+      },
+    ],
+  },
   {
     version: "2.1.3",
     date: "Octuber 17, 2023",

diff --git a/documentation/react/release-notes.mdx b/documentation/react/release-notes.mdx
@@ -2,6 +2,7 @@
 title: Release Notes - Material Tailwind
 description: Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.
 navigation: [
+              "v2.1.4",
               "v2.1.3",
               "v2.1.2",
               "v2.1.1",

diff --git a/packages/material-tailwind-react/README.md b/packages/material-tailwind-react/README.md
@@ -8,7 +8,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-2.1.3-blue.svg" alt="Version" />
+    <img src="https://img.shields.io/badge/version-2.1.4-blue.svg" alt="Version" />
   </a>
   <a href="https://www.material-tailwind.com/docs/react/license">
     <img src="https://img.shields.io/badge/license-MIT-blue" alt="Licenese">

diff --git a/packages/material-tailwind-react/package.json b/packages/material-tailwind-react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@material-tailwind/react",
   "homepage": "https://material-tailwind.com",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "description": "@material-tailwind/react is an easy-to-use components library for ReactJS & Tailwind CSS inspired by Material Design.",
   "repository": "https://github.com/creativetimofficial/material-tailwind",
   "license": "MIT",

diff --git a/packages/material-tailwind-react/src/theme/components/button/buttonFilled.ts b/packages/material-tailwind-react/src/theme/components/button/buttonFilled.ts
@@ -16,7 +16,7 @@ const buttonFilled: object = {
     active: "active:opacity-[0.85] active:shadow-none",
   },
   gray: {
-    background: "bg-gray-500",
+    background: "bg-gray-900",
     color: "text-white",
     shadow: "shadow-md shadow-gray-900/10",
     hover: "hover:shadow-lg hover:shadow-gray-900/20",

diff --git a/packages/material-tailwind-react/src/theme/components/button/buttonGradient.ts b/packages/material-tailwind-react/src/theme/components/button/buttonGradient.ts
@@ -15,7 +15,7 @@ const buttonGradient: object = {
     active: "active:opacity-[0.85]",
   },
   gray: {
-    background: "bg-gradient-to-tr from-gray-600 to-gray-400",
+    background: "bg-gradient-to-tr from-gray-900 to-gray-800",
     color: "text-white",
     shadow: "shadow-md shadow-gray-900/10",
     hover: "hover:shadow-lg hover:shadow-gray-900/20",

diff --git a/pages/docs/[...slug].tsx b/pages/docs/[...slug].tsx
@@ -329,10 +329,19 @@ export default function Page({ frontMatter, mdxSource, slug }) {
     }
   }, [frameworkType, slug]);
 
-  const replaceMatch = ["html/what-is-tailwind-css", "html/license", "html/colors", "html/fonts", "html/shadows", "html/screens"];
+  const replaceMatch = [
+    "html/what-is-tailwind-css",
+    "html/license",
+    "html/colors",
+    "html/fonts",
+    "html/shadows",
+    "html/screens",
+  ];
   const headLink = slug.join("/");
   const matchTheSlug = replaceMatch.includes(headLink);
-  const canonical = matchTheSlug ? headLink.replace("html/", "react/") : headLink;
+  const canonical = matchTheSlug
+    ? headLink.replace("html/", "react/")
+    : headLink;
 
   return (
     <>
@@ -346,7 +355,7 @@ export default function Page({ frontMatter, mdxSource, slug }) {
       </Head>
       <Alert className="w-full justify-center rounded-none">
         <div className="flex  items-center justify-center gap-4">
-          NEW | Material Tailwind PRO, a comprehensive compilation of 200+
+          NEW | Material Tailwind PRO, a comprehensive compilation of 170+
           blocks, now available for your use.
           <Link href="/blocks">
             <Button size="sm" color="white">

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -37,9 +37,9 @@ export default function Presentation() {
           content="tailwind css, material design, react, next, react.js, next.js, tailwind template, tailwind css theme, tailwindcss components"
         />
       </Head>
-       <Alert className="w-full justify-center rounded-none">
+      <Alert className="w-full justify-center rounded-none">
         <div className="flex  items-center justify-center gap-4">
-          NEW | Material Tailwind PRO, a comprehensive compilation of 200+
+          NEW | Material Tailwind PRO, a comprehensive compilation of 170+
           blocks, now available for your use.
           <Link href="/blocks">
             <Button size="sm" color="white">

diff --git a/public/image/header-bg.png b/public/image/header-bg.png
diff --git a/public/svg/tailwind.svg b/public/svg/tailwind.svg
diff --git a/widgets/layout/docs-navbar.tsx b/widgets/layout/docs-navbar.tsx
@@ -196,7 +196,7 @@ export function DocsNavbar({ slug, setMobileNav }: DocsNavbar) {
                 Material <br /> Tailwind
               </Typography>
               <Chip
-                value="v2.1.3"
+                value="v2.1.4"
                 variant="outlined"
                 className="ml-2 rounded-full border-[1.5px] border-blue-gray-50 pb-1 pt-1.5 text-primary"
               />

diff --git a/widgets/layout/navbar.tsx b/widgets/layout/navbar.tsx
@@ -195,7 +195,7 @@ export function Navbar() {
             </Typography>
             <hr className="mx-2 h-8 border-r border-primary/10" />
             <Chip
-              value="v2.1.3"
+              value="v2.1.4"
               variant="outlined"
               className="rounded-full border-[1.5px] border-blue-gray-50 pb-1 pt-1.5 text-primary"
             />

diff --git a/widgets/sections/features.tsx b/widgets/sections/features.tsx
@@ -29,14 +29,14 @@ function FavoriteFramework() {
       <Link href="/docs/html/installation">
         <div className="flex flex-col items-center justify-center gap-2">
           <Image
-            src="/svg/html.svg"
-            alt="html logo"
+            src="/svg/tailwind.svg"
+            alt="tailwind logo"
             width={480}
             height={480}
             className="h-10 w-10"
           />
           <Typography variant="h6" className="text-primary">
-            HTML
+            Tailwind CSS
           </Typography>
         </div>
       </Link>
@@ -144,13 +144,13 @@ function CssComponents() {
 
 function GlobalStyles() {
   return (
-      <Image
-        width={1280}
-        height={1280}
-        alt="card background"
-        src="/image/global-styles.png"
-        className="h-full w-full object-cover object-center"
-      />
+    <Image
+      width={1280}
+      height={1280}
+      alt="card background"
+      src="/image/global-styles.png"
+      className="h-full w-full object-cover object-center"
+    />
   );
 }
 
@@ -175,6 +175,7 @@ const CONTENT = [
     description:
       "Enhance your web product with our vibrant color palettes and realistic shadows, creating a memorable user experience that breathes life into your design.",
     children: <GlobalStyles />,
+    route: "/docs/react/colors",
   },
 ];
 
@@ -204,42 +205,54 @@ export function Features() {
           </Typography>
         </div>
         <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
-          {CONTENT.map(({ tag, title, description, children }, index) => (
-            <Card
-              key={index}
-              shadow={false}
-              color="transparent"
-              className={`relative !grid overflow-hidden rounded-xl border-[1.5px] border-blue-gray-50 bg-white ${
-                index === 2 ? "col-span-1 lg:col-span-2" : "col-span-1"
-              }`}
-            >
-              <Image
-                src="/image/header-figma.jpg"
-                alt="card background"
-                width={768}
-                height={768}
-                className="absolute left-0 -bottom-16 h-full w-full object-cover object-bottom"
-              />
-              <CardBody
-                className={`relative z-10 grid ${
-                  index === 2 ? "gap-8 md:grid-cols-2" : ""
+          {CONTENT.map(
+            ({ tag, title, description, children, route }, index) => (
+              <Card
+                key={index}
+                shadow={false}
+                color="transparent"
+                className={`relative !grid overflow-hidden rounded-xl border-[1.5px] border-blue-gray-50 bg-white ${
+                  index === 2 ? "col-span-1 lg:col-span-2" : "col-span-1"
                 }`}
               >
-                <div className={index === 2 ? "max-w-md" : ""}>
-                  <Typography variant="h6" className="text-primary">
-                    {tag}
-                  </Typography>
-                  <Typography variant="h3" className="my-2 text-primary">
-                    {title}
-                  </Typography>
-                  <Typography className="font-normal text-gray-600">
-                    {description}
-                  </Typography>
-                </div>
-                <div className="self-end">{children}</div>
-              </CardBody>
-            </Card>
-          ))}
+                <Image
+                  src="/image/header-figma.jpg"
+                  alt="card background"
+                  width={768}
+                  height={768}
+                  className="absolute left-0 -bottom-16 h-full w-full object-cover object-bottom"
+                />
+                <CardBody
+                  className={`relative z-10 grid ${
+                    index === 2 ? "gap-8 md:grid-cols-2" : ""
+                  }`}
+                >
+                  <div className={index === 2 ? "max-w-md" : ""}>
+                    <Typography variant="h6" className="text-primary">
+                      {tag}
+                    </Typography>
+                    <Typography variant="h3" className="my-2 text-primary">
+                      {title}
+                    </Typography>
+                    <Typography className="font-normal text-gray-600">
+                      {description}
+                    </Typography>
+                    {route && (
+                      <Link href={route} className="mt-8 inline-block">
+                        <Button
+                          color="gray"
+                          className="bg-primary py-3 text-base font-medium capitalize"
+                        >
+                          Explore
+                        </Button>
+                      </Link>
+                    )}
+                  </div>
+                  <div className="self-end">{children}</div>
+                </CardBody>
+              </Card>
+            ),
+          )}
         </div>
       </div>
     </section>