Merge pull request #176 from creativetimofficial/docs/react/component…

…s-examples Docs/react/components examples
creativetimofficial · Jul 29, 2022 · 974c4d2 · 974c4d2 · vercel · Jul 29, 2022
2 parents f1be41d + 9cc7c70
commit 974c4d2
Show file tree

Hide file tree

Showing 188 changed files with 4,221 additions and 1,525 deletions.
diff --git a/components/cards/component-demo.tsx b/components/cards/component-demo.tsx
@@ -9,7 +9,7 @@ export default function ComponentDemo({ children, ...rest }: Props) {
   return (
     <div
       {...rest}
-      className="grid min-h-[140px] w-full scroll-mt-48 place-items-center overflow-x-scroll rounded-lg border border-blue-grey-50 bg-[#f8fafc] p-6 lg:overflow-visible"
+      className="border-blue-gray-50 grid min-h-[140px] w-full scroll-mt-48 place-items-center overflow-x-scroll rounded-lg border bg-[#f8fafc] p-6 lg:overflow-visible"
     >
       {children}
     </div>

diff --git a/components/cards/feature.tsx b/components/cards/feature.tsx
@@ -30,7 +30,7 @@ export default function Feature({
     >
       <CardHeader
         shadow={false}
-        className="mx-6 -mb-3 grid h-12 w-12 place-items-center !rounded-lg bg-[#1A237E]"
+        className="mx-6 -mb-3 grid h-12 w-12 place-items-center rounded-lg bg-[#1A237E]"
       >
         <i className={`${iconClass} relative text-xl text-white`}>{icon}</i>
       </CardHeader>

diff --git a/components/cards/framework.tsx b/components/cards/framework.tsx
@@ -18,7 +18,7 @@ const Framework = forwardRef(
           ref={ref}
           className={`grid w-full min-w-[7rem] transform cursor-pointer ${
             center ? "place-items-center" : ""
-          } rounded-xl border border-blue-grey-50 bg-white px-3 py-2 transition-all hover:scale-105 hover:border-blue-grey-100 hover:bg-blue-grey-50 hover:bg-opacity-25`}
+          } 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>

diff --git a/components/color-palette.tsx b/components/color-palette.tsx
@@ -11,7 +11,7 @@ export default function ColorPalette({ name, colors }) {
   return (
     <div className="flex flex-col space-y-1.5 text-xs">
       <div className="flex h-10 flex-col justify-center">
-        <div className="text-base font-bold capitalize text-blue-grey-900">
+        <div className="text-blue-gray-900 text-base font-bold capitalize">
           {name}
         </div>
       </div>
@@ -27,10 +27,10 @@ export default function ColorPalette({ name, colors }) {
                 style={{ backgroundColor: hex }}
               />
               <div className="px-0.5 md:flex md:justify-between md:space-x-2 2xl:block 2xl:space-x-0">
-                <div className="w-6 font-medium text-blue-grey-900 2xl:w-full">
+                <div className="text-blue-gray-900 w-6 font-medium 2xl:w-full">
                   {level}
                 </div>
-                <div className="font-mono lowercase text-blue-grey-500">
+                <div className="text-blue-gray-500 font-mono lowercase">
                   {hex}
                 </div>
               </div>

diff --git a/components/layout/docs-footer.tsx b/components/layout/docs-footer.tsx
@@ -27,7 +27,7 @@ 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-grey-500 !transition-colors hover:!text-blue-grey-900">
+              <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
@@ -42,7 +42,7 @@ export default function DocsFooter({ type, frontMatter }: Props) {
         {frontMatter.next && (
           <Link href={`/docs/${type}/${frontMatter.next}`}>
             <a>
-              <Typography className="py-2 !font-medium capitalize !text-blue-grey-500 !transition-colors hover:!text-blue-grey-900">
+              <Typography className="py-2 font-medium capitalize text-blue-gray-500 transition-colors hover:text-blue-gray-900">
                 {frontMatter.next.includes("-")
                   ? frontMatter.next
                       .split("-")
@@ -60,11 +60,11 @@ export default function DocsFooter({ type, frontMatter }: Props) {
         href={`https://www.github.com/creativetimofficial/material-tailwind/blob/main/documentation/${type}/${frontMatter.github}.mdx`}
         target="_blank"
         rel="noreferrer"
-        className="mt-14 mb-6 text-right !font-normal !text-blue-grey-500 transition-colors hover:!text-blue-grey-900"
+        className="mt-14 mb-6 text-right font-normal text-blue-gray-500 transition-colors hover:text-blue-gray-900"
       >
         Edit this page on Github
       </Typography>
-      <footer className="flex flex-col items-center justify-between gap-4 border-t border-blue-grey-50 py-6 lg:flex-row">
+      <footer className="flex flex-col items-center justify-between gap-4 border-t border-blue-gray-50 py-6 lg:flex-row">
         <a
           href="https://vercel.com/?utm_source=ct-tailwind-team&utm_campaign=oss"
           target="_blank"
@@ -81,13 +81,13 @@ export default function DocsFooter({ type, frontMatter }: Props) {
             </svg>
           </span>
         </a>
-        <Typography className="text-center !font-normal !text-blue-grey-500 lg:text-left">
+        <Typography className="text-center font-normal text-blue-gray-500 lg:text-left">
           Copyright &copy; {date} Material Tailwind by{" "}
           <a
             href="https://www.creative-tim.com?ref=material-tailwind"
             target="_blank"
             rel="noreferrer"
-            className="text-current transition-colors hover:text-blue-grey-900"
+            className="text-current transition-colors hover:text-blue-gray-900"
           >
             Creative Tim
           </a>

diff --git a/components/layout/docs-navbar.tsx b/components/layout/docs-navbar.tsx
@@ -12,16 +12,16 @@ interface Props {
 export default function DocsNavbar({ slug, setMobileNav }: Props) {
   return (
     <Navbar
-      container="mt-0 max-w-full px-0 border-b border-blue-grey-50"
-      className="mx-auto !max-w-[1440px] !text-blue-grey-900"
-      mobileNavClassName="text-blue-grey-900"
+      container="mt-0 max-w-full px-0 border-b border-blue-gray-50"
+      className="!text-blue-gray-900 mx-auto !max-w-[1440px]"
+      mobileNavClassName="text-blue-gray-900"
       fullWidth
       shadow={false}
       sidenavMenu={
-        <div className="mt-2 flex items-center border-t border-blue-grey-50 pt-4 pb-2 lg:hidden">
+        <div className="border-blue-gray-50 mt-2 flex items-center border-t pt-4 pb-2 lg:hidden">
           <button
             type="button"
-            className="text-blue-grey-900"
+            className="text-blue-gray-900"
             onClick={() => setMobileNav(true)}
           >
             <svg
@@ -39,13 +39,13 @@ export default function DocsNavbar({ slug, setMobileNav }: Props) {
               />
             </svg>
           </button>
-          <ol className="ml-4 flex min-w-0 whitespace-nowrap text-sm leading-6 text-blue-grey-700">
+          <ol className="text-blue-gray-700 ml-4 flex min-w-0 whitespace-nowrap text-sm leading-6">
             <li className="flex items-center">
               React
               <svg
                 width="3"
                 height="6"
-                className="mx-3 overflow-visible text-blue-grey-300"
+                className="text-blue-gray-300 mx-3 overflow-visible"
               >
                 <path
                   d="M0 0L3 3L0 6"
@@ -56,7 +56,7 @@ export default function DocsNavbar({ slug, setMobileNav }: Props) {
                 ></path>
               </svg>
             </li>
-            <li className="truncate font-semibold capitalize text-blue-grey-900">
+            <li className="text-blue-gray-900 truncate font-semibold capitalize">
               {slug.includes("-") ? slug.split("-").join(" ") : slug}
             </li>
           </ol>

diff --git a/components/layout/docs-related.tsx b/components/layout/docs-related.tsx
@@ -14,7 +14,7 @@ interface Props {
 export default function DocsRelated({ routes }: { routes: Props[] }) {
   return (
     <div className="mt-36">
-      <Typography as="h2" variant="h4" color="blue-grey" className="!mb-6">
+      <Typography as="h2" variant="h4" color="blue-gray" className="mb-6">
         Related
       </Typography>
       <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
@@ -24,12 +24,12 @@ export default function DocsRelated({ routes }: { routes: Props[] }) {
               <Typography
                 as="h4"
                 variant="h6"
-                color="blue-grey"
+                color="blue-gray"
                 className="mb-2"
               >
                 {title}
               </Typography>
-              <Typography variant="small" color="grey">
+              <Typography variant="small" color="gray">
                 {description}
               </Typography>
             </div>

diff --git a/components/layout/footer.tsx b/components/layout/footer.tsx
@@ -24,7 +24,7 @@ export default function Footer() {
     },
     {
       icon: "fab fa-github",
-      color: "text-grey-900",
+      color: "text-gray-900",
       link: "https://www.github.com/creativetimofficial?ref=material-tailwind",
     },
     {
@@ -73,7 +73,7 @@ export default function Footer() {
   ];
 
   return (
-    <footer className="relative z-50 bg-grey-100 pt-16 pb-6 text-[#1A237E]">
+    <footer className="bg-gray-100 relative z-50 pt-16 pb-6 text-[#1A237E]">
       <SectionSubscribe />
       <div className="container mx-auto">
         <div className="flex flex-wrap">
@@ -141,7 +141,7 @@ export default function Footer() {
             </div>
           </div>
         </div>
-        <hr className="my-6 border-grey-300" />
+        <hr className="border-gray-300 my-6" />
         <div className="flex flex-wrap items-center justify-center gap-2 md:justify-between">
           <a
             href="https://vercel.com/?utm_source=ct-tailwind-team&utm_campaign=oss"

diff --git a/components/layout/header.tsx b/components/layout/header.tsx
@@ -36,7 +36,7 @@ export default function Header() {
               <div className="w-full max-w-full sm:my-auto md:w-5/6 md:flex-none lg:w-1/2">
                 <Tabs value="react" className="mb-6">
                   <TabsHeader
-                    className="h-10 w-auto rounded-full border border-white/80 bg-white/80 shadow-2xl shadow-blue-grey-500/40 backdrop-blur-2xl backdrop-saturate-200"
+                    className="h-10 w-auto rounded-full border border-white/80 bg-white/80 shadow-2xl shadow-blue-gray-500/40 backdrop-blur-2xl backdrop-saturate-200"
                     indicatorProps={{
                       className: "rounded-full",
                     }}
@@ -70,7 +70,7 @@ export default function Header() {
               >
                 Material Tailwind
               </Typography>
-              <Typography className="mb-6 text-lg !font-light text-[#1A237E] lg:pr-12">
+              <Typography className="mb-6 text-lg font-light text-[#1A237E] lg:pr-12">
                 Material Tailwind is an easy to use components library for
                 Tailwind CSS and Material Design.
               </Typography>
@@ -88,7 +88,7 @@ export default function Header() {
                     </Button>
                   </a>
                 </Link>
-                <div className="flex rounded-lg border border-white/80 bg-white/80 py-2.5 px-5 text-[#1A237E] shadow-2xl shadow-blue-grey-500/20 backdrop-blur-2xl backdrop-saturate-200">
+                <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
                     text={version}
                     onCopy={() => setCopied(true)}

diff --git a/components/layout/navbar.tsx b/components/layout/navbar.tsx
@@ -98,7 +98,11 @@ export default function Navbar({
   );
 
   const navbarMenu = (
-    <ul className="mb-0 flex list-none flex-col gap-2 pl-0 text-inherit lg:ml-auto lg:flex-row lg:gap-4">
+    <ul
+      className={`${
+        open ? "mt-4" : ""
+      } mb-0 flex list-none flex-col gap-2 pl-0 text-inherit transition-all lg:ml-auto lg:flex-row lg:gap-4`}
+    >
       <Menu placement="bottom" offset={-2.5}>
         <MenuHandler>
           <li>
@@ -194,8 +198,8 @@ export default function Navbar({
     >
       <MTNavbar
         {...rest}
-        className={`!block py-2 pl-6 pr-5 ${
-          shadow ? "shadow-2xl shadow-blue-grey-500/10" : ""
+        className={`!block py-4 pl-6 pr-5 lg:py-2 ${
+          shadow ? "shadow-2xl shadow-blue-gray-500/10" : ""
         }`}
         shadow={shadow}
       >

diff --git a/components/layout/page-map.tsx b/components/layout/page-map.tsx
@@ -17,7 +17,7 @@ export default function PageMap({ frontMatter }) {
   return (
     <aside className="relative hidden h-screen w-64 pt-20 pb-4 pl-16 lg:block">
       <div className="fixed h-screen w-64">
-        <Typography variant="h6" color="blue-grey" className="capitalize">
+        <Typography variant="h6" color="blue-gray" className="capitalize">
           On This Page
         </Typography>
         <ul className="list-none pl-4 pt-2">
@@ -26,10 +26,10 @@ export default function PageMap({ frontMatter }) {
               <li key={key}>
                 <a
                   href={`#${el}`}
-                  className={`before:content-[' '] relative list-item w-full py-1 px-1 text-sm capitalize transition-colors before:absolute before:-left-3 before:top-2/4 before:h-1 before:w-1 before:-translate-y-2/4 before:rounded-full before:transition-colors hover:text-blue-grey-900 hover:before:bg-blue-grey-900 focus:text-blue-grey-900 focus:before:bg-blue-grey-900 ${
+                  className={`before:content-[' '] hover:text-blue-gray-900 hover:before:bg-blue-gray-900 focus:text-blue-gray-900 focus:before:bg-blue-gray-900 relative list-item w-full py-1 px-1 text-sm capitalize transition-colors before:absolute before:-left-3 before:top-2/4 before:h-1 before:w-1 before:-translate-y-2/4 before:rounded-full before:transition-colors ${
                     hash === el
-                      ? "font-semibold text-blue-grey-900 before:bg-blue-grey-900"
-                      : "font-normal text-blue-grey-500 before:bg-blue-grey-300"
+                      ? "text-blue-gray-900 before:bg-blue-gray-900 font-semibold"
+                      : "text-blue-gray-500 before:bg-blue-gray-300 font-normal"
                   }`}
                 >
                   {el.includes("-") ? el.split("-").join(" ") : el}

diff --git a/components/layout/sidenav.tsx b/components/layout/sidenav.tsx
@@ -32,20 +32,20 @@ function Sidenav({ routes, type, slug, mobileNav, setMobileNav }: Props) {
       }`}
     >
       <div
-        className={`fixed top-0 left-0 h-screen w-screen bg-grey-900/20 backdrop-blur-sm transition-opacity duration-300 lg:hidden ${
+        className={`fixed top-0 left-0 h-screen w-screen bg-gray-900/20 backdrop-blur-sm transition-opacity duration-300 lg:hidden ${
           mobileNav
             ? "pointer-events-auto opacity-100"
             : "pointer-events-none opacity-0"
         }`}
       />
       <div className="fixed h-screen w-80 overflow-y-scroll bg-white pb-48 pt-6 pl-6 lg:w-64 lg:bg-transparent lg:pt-0 lg:pl-0">
         <div className="flex items-center justify-between">
-          <Typography variant="h4" color="blue-grey">
+          <Typography variant="h4" color="blue-gray">
             Documentation
           </Typography>
           <Typography
             variant="h5"
-            className="mr-3 mt-px cursor-pointer p-2 !text-blue-grey-500 transition-colors hover:!text-blue-grey-900 lg:hidden"
+            className="mr-3 mt-px cursor-pointer p-2 text-blue-gray-500 transition-colors hover:text-blue-gray-900 lg:hidden"
             onClick={() => setMobileNav(false)}
           >
             <svg
@@ -71,7 +71,7 @@ function Sidenav({ routes, type, slug, mobileNav, setMobileNav }: Props) {
                 >
                   <i className={icon} />
                 </div>
-                <Typography color="blue-grey" className="font-bold capitalize">
+                <Typography color="blue-gray" className="font-bold capitalize">
                   {name}
                 </Typography>
               </div>
@@ -81,11 +81,11 @@ function Sidenav({ routes, type, slug, mobileNav, setMobileNav }: Props) {
                     <Link href={`/docs/${type}/${page}`}>
                       <a>
                         <Typography
-                          color="grey"
-                          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-grey-900 hover:before:bg-blue-grey-900 ${
+                          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-grey-900 before:bg-blue-grey-900"
-                              : "font-normal text-blue-grey-400 before:bg-blue-grey-300"
+                              ? "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)}
                         >

diff --git a/components/sections/button.tsx b/components/sections/button.tsx
@@ -46,7 +46,7 @@ export default function SectionButton() {
         setButtonCode(`<Button className="flex items-center">
   <i className="
     material-icons mr-1
-    !text-base leading-none
+    text-base leading-none
   ">
     favorite
   </i>
@@ -97,7 +97,7 @@ export default function SectionButton() {
                 className={buttonOptionClasses("default")}
                 onClick={() => setButtonType("default")}
               >
-                <i className="material-icons !text-xl">radio_button_checked</i>
+                <i className="material-icons text-xl">radio_button_checked</i>
                 <Typography>Default</Typography>
               </span>
             </div>
@@ -106,7 +106,7 @@ export default function SectionButton() {
                 className={buttonOptionClasses("gradient")}
                 onClick={() => setButtonType("gradient")}
               >
-                <i className="material-icons !text-xl">gradient</i>
+                <i className="material-icons text-xl">gradient</i>
                 <Typography>Gradient</Typography>
               </span>
             </div>
@@ -115,7 +115,7 @@ export default function SectionButton() {
                 className={buttonOptionClasses("link")}
                 onClick={() => setButtonType("link")}
               >
-                <i className="material-icons !text-xl">format_color_text</i>
+                <i className="material-icons text-xl">format_color_text</i>
                 <Typography>Link</Typography>
               </span>
             </div>
@@ -124,7 +124,7 @@ export default function SectionButton() {
                 className={buttonOptionClasses("icon")}
                 onClick={() => setButtonType("icon")}
               >
-                <i className="material-icons !text-xl">favorite</i>
+                <i className="material-icons text-xl">favorite</i>
                 <Typography>Icon</Typography>
               </span>
             </div>
@@ -142,7 +142,7 @@ ${buttonCode}
             src="/img/blue.png"
             alt="tailwind_blob_blue"
           />
-          <div className="bg-dark absolute top-44 right-11 z-30 flex h-40 w-[13rem] rounded-lg bg-white/80 shadow-2xl shadow-blue-grey-500/20 backdrop-blur-2xl backdrop-saturate-200 md:top-14 md:-right-24 md:h-56 md:w-80 lg:top-20">
+          <div className="bg-dark absolute top-44 right-11 z-30 flex h-40 w-[13rem] rounded-lg bg-white/80 shadow-2xl shadow-blue-gray-500/20 backdrop-blur-2xl backdrop-saturate-200 md:top-14 md:-right-24 md:h-56 md:w-80 lg:top-20">
             <div className="m-auto">
               <JsxParser components={{ Button }} jsx={buttonCode} />
             </div>