docs: add Announcement banner (#926)

* docs(banner): add announcement banner for future usage

* docs(banner): `tabIndex` should use number instead of string

* docs(installation): remove`flowbite` from installation guide for NPM

README.md

@@ -45,9 +45,17 @@
 - [Table of Contents](#table-of-contents)
 - [Documentation](#documentation)
 - [Getting started](#getting-started)
+  - [Setup Tailwind CSS](#setup-tailwind-css)
+  - [Install Flowbite React](#install-flowbite-react)
+  - [Try it out](#try-it-out)
+  - [Next steps](#next-steps)
+    - [Next.js](#nextjs)
+    - [Dark mode](#dark-mode)
+    - [Customization](#customization)
+    - [Contributing](#contributing)
 - [Components](#components)
 - [Community](#community)
-- [Contributing](#contributing)
+- [Contributing](#contributing-1)
 - [Figma](#figma)
 - [Copyright and license](#copyright-and-license)
 
@@ -99,7 +107,7 @@ Add Tailwind CSS to a CSS file:
 1. Install Flowbite and Flowbite React:
 
 ```bash
-npm i flowbite flowbite-react # or yarn add flowbite flowbite-react
+npm i flowbite-react # or yarn add flowbite flowbite-react
 ```
 
 2. Add the Flowbite plugin to `tailwind.config.js`, and include content from `flowbite-react`:

app/components/banner.tsx

@@ -0,0 +1,42 @@
+import type { FC } from 'react';
+
+export const Banner: FC = () => {
+  return (
+    <div
+      tabIndex={-1}
+      className="z-50 hidden w-full justify-center border border-b border-gray-200 bg-gray-50 px-4 py-3 dark:border-gray-600 dark:bg-gray-700 lg:flex lg:py-4"
+    >
+      <div className="items-center md:flex">
+        <p className="text-sm font-medium text-gray-900 dark:text-white md:my-0">
+          <span className="mr-2 hidden rounded bg-cyan-100 px-2.5 py-0.5 text-xs font-semibold text-cyan-800 dark:bg-cyan-200 dark:text-cyan-800 md:inline">
+            Community
+          </span>
+          We need your feedback and help to support Server Components with Next.js.
+          <a
+            className="ml-2 inline-flex items-center text-sm font-medium text-cyan-600 hover:underline dark:text-cyan-500 md:ml-2"
+            href="https://github.com/themesberg/flowbite-react/discussions/923"
+            target="_blank"
+            rel="nofollow noreferred noopener"
+          >
+            Check discussion on GitHub
+            <svg
+              className="ml-1.5 h-3 w-3 text-cyan-600 dark:text-cyan-500"
+              aria-hidden="true"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 14 10"
+            >
+              <path
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M1 5h12m0 0L9 1m4 4L9 9"
+              ></path>
+            </svg>
+          </a>
+        </p>
+      </div>
+    </div>
+  );
+};

app/docs/getting-started/introduction/introduction.mdx

@@ -44,7 +44,7 @@ Add Tailwind CSS to a CSS file:
 1. Install Flowbite and Flowbite React:
 
 ```bash
-npm i flowbite flowbite-react # or yarn add flowbite flowbite-react
+npm i flowbite-react # or yarn add flowbite flowbite-react
 ```
 
 2. Add the Flowbite plugin to `tailwind.config.js`, and include content from `flowbite-react`:

app/docs/getting-started/quickstart/quickstart.mdx

@@ -40,7 +40,7 @@ Add Tailwind CSS to a CSS file:
 1. Install Flowbite and Flowbite React:
 
 ```bash
-npm i flowbite flowbite-react # or yarn add flowbite flowbite-react
+npm i flowbite-react # or yarn add flowbite flowbite-react
 ```
 
 2. Add the Flowbite plugin to `tailwind.config.js`, and include content from `flowbite-react`:

app/docs/layout.tsx

@@ -20,6 +20,7 @@ import '~/app/docs.css';
 import '~/app/style.css';
 import { Accordion, Badge, Flowbite, Footer, Navbar, Sidebar } from '~/src';
 import { isClient } from '~/src/helpers/is-client';
+import { Banner } from '../components/banner';
 import { CarbonAds } from '../components/carbon-ads';
 import { NavbarIcons, NavbarLinks } from '../components/navbar';
 
@@ -55,6 +56,7 @@ const DocsLayout: NextPage<PropsWithChildren> = ({ children }) => {
     <Flowbite>
       <div className="w-full min-w-0 flex-auto lg:static lg:max-h-full lg:overflow-visible">
         <div className="relative max-h-screen w-full overflow-auto bg-white text-gray-600 antialiased dark:bg-gray-900 dark:text-gray-400">
+          <Banner />
           <DocsNavbar {...state} />
           <div className="lg:flex">
             <DocsSidebar {...state} />
@@ -152,7 +154,7 @@ const DocsSidebar: FC<DocsLayoutState> = ({ isCollapsed, setCollapsed }) => {
     <>
       <div
         className={twMerge(
-          'fixed inset-0 z-50 h-full w-64 flex-none lg:static lg:block lg:h-auto lg:overflow-y-visible lg:pt-0',
+          'fixed inset-0 z-50 h-full w-64 flex-none lg:static lg:block lg:h-auto lg:overflow-y-visible lg:pt-6',
           isCollapsed && 'hidden',
         )}
       >

app/page.tsx

@@ -9,6 +9,7 @@ import { HiClipboardCopy, HiOutlineArrowRight } from 'react-icons/hi';
 import '~/app/docs.css';
 import '~/app/style.css';
 import { Button, Flowbite, Footer, Navbar, TextInput, Tooltip } from '~/src';
+import { Banner } from './components/banner';
 import { ComponentCard } from './components/component-card';
 import { NavbarIcons, NavbarLinks } from './components/navbar';
 import { COMPONENTS_DATA } from './data/components';
@@ -64,6 +65,7 @@ export default function HomePageContent() {
   return (
     <Flowbite>
       <div className="relative max-h-screen w-full overflow-auto bg-white text-gray-600 antialiased dark:bg-gray-900 dark:text-gray-400">
+        <Banner />
         <HomeNavbar />
         <div className="lg:flex">
           <main
@@ -126,7 +128,7 @@ const HeroSection: FC = () => {
 
   const copyToClipboard = () => {
     setJustCopied(true);
-    navigator.clipboard.writeText('npm i flowbite flowbite-react');
+    navigator.clipboard.writeText('npm i flowbite-react');
     setTimeout(() => setJustCopied(false), 2000);
   };
 
@@ -148,7 +150,7 @@ const HeroSection: FC = () => {
                 <Tooltip content={isJustCopied ? 'Copied!' : 'Copy to clipboard'} className="[&_*]:cursor-pointer">
                   <TextInput
                     onClick={copyToClipboard}
-                    placeholder="npm i flowbite flowbite-react"
+                    placeholder="npm i flowbite-react"
                     readOnly
                     rightIcon={HiClipboardCopy}
                     sizing="md"