applied prettier

Author: sajadevo

.eslintrc.json

@@ -1,3 +1,6 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "react/no-unknown-property": "off"
+  }
 }

.npmrc

@@ -0,0 +1,2 @@
+auto-install-peers=true
+strict-peer-dependencies=false

components/layout/navbar.tsx

@@ -262,8 +262,8 @@ export default function Navbar({
         <a
           href={`${
             query.slug && query.slug[0] === "html"
-              ? "https://www.material-tailwind.com/blocks/html#pricing"
-              : "https://www.material-tailwind.com/blocks/react#pricing"
+              ? "https://www.material-tailwind.com/blocks/html"
+              : "https://www.material-tailwind.com/blocks/react"
           }`}
           target="_blank"
           rel="noreferrer"

documentation/html/tooltip.mdx

@@ -19,16 +19,16 @@ See below our example that will help you create a simple tooltip for your projec
 
 <ComponentDemo id="tooltip">
   <button
-    class="button button-pink"
+    className="button button-pink"
     data-target="tooltip"
     aria-describedby="tooltip"
     data-ripple-light="true"
   >
     {`Tooltip top`}
   </button>
-  <div class="tooltip" role="tooltip" data-placement="top">
+  <div className="tooltip" role="tooltip" data-placement="top">
     {`My tooltip`}
-    <div class="arrow" data-popper-arrow></div>
+    <div className="arrow" data-popper-arrow></div>
   </div>
 </ComponentDemo>
 
@@ -56,52 +56,52 @@ You can simply change the tooltip position by changing the **data-placement=" "*
 <ComponentDemo id="tooltip position">
   <div className="flex">
     <button
-      class="button button-pink"
+      className="button button-pink"
       data-target="tooltip"
       aria-describedby="tooltip"
       data-ripple-light="true"
     >
       {`Tooltip top`}
     </button>
-    <div class="tooltip" role="tooltip" data-placement="top">
+    <div className="tooltip" role="tooltip" data-placement="top">
       {`Top tooltip`}
-      <div class="arrow" data-popper-arrow></div>
+      <div className="arrow" data-popper-arrow></div>
     </div>
     <button
-      class="button button-pink mx-4"
+      className="button button-pink mx-4"
       data-target="tooltip"
       aria-describedby="tooltip"
       data-ripple-light="true"
     >
       {`Tooltip right`}
     </button>
-    <div class="tooltip" role="tooltip" data-placement="right">
+    <div className="tooltip" role="tooltip" data-placement="right">
       {`Right tooltip`}
-      <div class="arrow" data-popper-arrow></div>
+      <div className="arrow" data-popper-arrow></div>
     </div>
     <button
-      class="button button-pink mr-4"
+      className="button button-pink mr-4"
       data-target="tooltip"
       aria-describedby="tooltip"
       data-ripple-light="true"
     >
       {`Tooltip bottom`}
     </button>
-    <div class="tooltip" role="tooltip" data-placement="bottom">
+    <div className="tooltip" role="tooltip" data-placement="bottom">
       {`Bottom tooltip`}
-      <div class="arrow" data-popper-arrow></div>
+      <div className="arrow" data-popper-arrow></div>
     </div>
     <button
-      class="button button-pink"
+      className="button button-pink"
       data-target="tooltip"
       aria-describedby="tooltip"
       data-ripple-light="true"
     >
       {`Tooltip left`}
     </button>
-    <div class="tooltip" role="tooltip" data-placement="left">
+    <div className="tooltip" role="tooltip" data-placement="left">
       {`Left tooltip`}
-      <div class="arrow" data-popper-arrow></div>
+      <div className="arrow" data-popper-arrow></div>
     </div>
   </div>
 </ComponentDemo>

next.config.js

@@ -1,3 +1,4 @@
+/** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
   productionBrowserSourceMaps: true,

package.json

@@ -16,44 +16,46 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@floating-ui/react-dom-interactions": "^0.10.1",
     "choices.js": "^10.1.0",
-    "@floating-ui/react-dom-interactions": "^0.8.1",
-    "classnames": "^2.3.1",
+    "classnames": "^2.3.2",
     "deepmerge": "^4.2.2",
-    "downshift": "^6.1.7",
-    "framer-motion": "^6.5.1",
+    "downshift": "^6.1.12",
+    "flatpickr": "^4.6.13",
+    "framer-motion": "^7.5.3",
     "gray-matter": "^4.0.3",
     "material-ripple-effects": "^2.0.1",
     "mdx-observable": "^0.2.0",
-    "next": "^12.2.3",
+    "next": "12.3.1",
     "next-mdx-remote": "^4.1.0",
+    "nouislider": "^15.6.1",
     "prism-theme-night-owl": "^1.4.0",
-    "prismjs": "^1.28.0",
+    "prismjs": "^1.29.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.2.0",
     "react-jsx-parser": "^1.29.0",
-    "react-merge-refs": "^1.1.0",
-    "react-simple-code-editor": "^0.11.2",
+    "react-merge-refs": "^2.0.1",
+    "react-simple-code-editor": "^0.13.1",
     "rehype-pretty-code": "^0.3.2",
     "remark-gfm": "^3.0.1",
-    "shiki": "^0.10.1",
-    "tailwind-merge": "^1.5.1"
+    "shiki": "^0.11.1",
+    "tailwind-merge": "^1.6.1"
   },
   "devDependencies": {
-    "@tailwindcss/forms": "^0.5.2",
-    "@types/node": "^18.6.1",
-    "@types/react": "^18.0.15",
-    "autoprefixer": "10.4.7",
-    "eslint": "8.20.0",
-    "eslint-config-next": "12.2.3",
+    "@tailwindcss/forms": "^0.5.3",
+    "@types/node": "^18.8.4",
+    "@types/react": "^18.0.21",
+    "autoprefixer": "^10.4.12",
+    "eslint": "^8.25.0",
+    "eslint-config-next": "^12.3.1",
     "fs": "0.0.1-security",
-    "next-sitemap": "^3.1.13",
-    "postcss": "8.4.14",
+    "next-sitemap": "^3.1.24",
+    "postcss": "8.4.8",
     "prettier": "^2.7.1",
     "prettier-plugin-tailwindcss": "^0.1.13",
-    "tailwindcss": "3.1.6",
-    "typescript": "^4.7.4"
+    "tailwindcss": "^3.1.8",
+    "typescript": "^4.8.4"
   }
 }