fix: missing dark mode href; replace vanilla a tag with nextJS `Lin…

…k` component for internal pages
themesberg · Sep 24, 2023 · e1308c8 · e1308c8
1 parent 84ca86c
commit e1308c8
Showing 1 changed file with 11 additions and 8 deletions.
diff --git a/app/page.tsx b/app/page.tsx
@@ -482,9 +482,12 @@ const DarkModeSection: FC = () => {
               </h2>
               <p className="text-lg text-gray-500 dark:text-gray-400">
                 Flowbite React has native built-in support for{' '}
-                <a href="#" className="text-lg font-medium text-gray-900 underline hover:no-underline dark:text-white">
+                <Link
+                  href="/docs/customize/dark-mode"
+                  className="text-lg font-medium text-gray-900 underline hover:no-underline dark:text-white"
+                >
                   dark mode
-                </a>{' '}
+                </Link>{' '}
                 by using Tailwind CSS and the Flowbite design system.
               </p>
               <p className="text-lg text-gray-500 dark:text-gray-400">
@@ -514,7 +517,7 @@ const DarkModeSection: FC = () => {
                 ))}
               </ul>
               <div className="flex flex-row gap-4">
-                <a
+                <Link
                   href="/docs/customize/dark-mode"
                   className="flex items-center gap-4 font-medium text-cyan-600 hover:underline"
                 >
@@ -527,7 +530,7 @@ const DarkModeSection: FC = () => {
                       fill="currentColor"
                     ></path>
                   </svg>
-                </a>
+                </Link>
               </div>
             </div>
           </div>
@@ -561,12 +564,12 @@ const TailwindSection: FC = () => {
               </h2>
               <p className="text-lg text-gray-500 dark:text-gray-400">
                 Flowbite React uses the utility classes from Tailwind CSS under the hood and provides an advanced{' '}
-                <a
+                <Link
                   href="/docs/customize/theme"
                   className="text-lg font-medium text-gray-900 underline hover:no-underline dark:text-white"
                 >
                   theming system
-                </a>{' '}
+                </Link>{' '}
                 that you can use to apply classes to UI components and their underlying HTML elements structure.
               </p>
               <p className="text-lg text-gray-500 dark:text-gray-400">
@@ -590,7 +593,7 @@ const TailwindSection: FC = () => {
                 uses this framework in all of the libraries including the vanilla JS, Svelte, Vue, and React one.
               </p>
               <div className="flex flex-row gap-4">
-                <a
+                <Link
                   href="/docs/customize/theme"
                   className="flex items-center gap-4 font-medium text-cyan-600 hover:underline"
                 >
@@ -603,7 +606,7 @@ const TailwindSection: FC = () => {
                       fill="currentColor"
                     ></path>
                   </svg>
-                </a>
+                </Link>
               </div>
             </div>
           </div>