docs: improve content of docs and components for #767

app/components/code-preview.tsx

@@ -18,7 +18,7 @@ interface CodePreviewProps extends PropsWithChildren, ComponentProps<'div'> {
   title: string;
 }
 
-export const CodePreview: FC<CodePreviewProps> = function ({ children, className, title }) {
+export const CodePreview: FC<CodePreviewProps> = function ({ children, className }) {
   const childrenList = Children.toArray(children);
   let code = childrenList.map((child) => reactElementToJSXString(child, reactElementToJSXStringOptions)).join('\n');
   code = deleteJSXSpaces(code);
@@ -28,7 +28,6 @@ export const CodePreview: FC<CodePreviewProps> = function ({ children, className
 
   return (
     <div className="mb-12 flex w-full flex-col gap-2">
-      <h2 className="text-2xl font-bold">{title}</h2>
       <div className={classNames('py-4', className)}>{children}</div>
       <pre className="language-tsx">
         <code>{code}</code>

app/docs.css

@@ -47,6 +47,12 @@
   @apply font-medium text-gray-900 underline decoration-cyan-700 decoration-1 underline-offset-2 dark:text-white dark:decoration-cyan-700;
 }
 
+#mainContent > p > code,
+#mainContent > ul > li > code,
+#mainContent > ol > li > code {
+  @apply break-all px-1 font-mono text-sm text-primary-600 dark:text-primary-400;
+}
+
 #mainContent > p > a:hover,
 #mainContent > div > p > a:hover,
 #mainContent > ul > li > a:hover,
@@ -108,7 +114,7 @@ pre[class*='language-'] {
   -ms-hyphens: none;
   hyphens: none;
 
-  @apply font-normal;
+  @apply my-6 rounded-lg text-sm font-normal;
 }
 
 /* without preview */

app/docs/components/accordion/accordion.mdx

@@ -1,9 +1,21 @@
 import { Accordion } from '~/src/components/Accordion';
 import { CodePreview } from '~/app/components/code-preview';
 
-The accordion component is a collection of vertically collapsing header and body elements that can be used to show and hide information based on the Tailwind CSS utility classes and JavaScript from Flowbite.
+The accordion component from Flowbite React can be used to toggle the visibility of the content of each accordion panel tab by expanding the collapsing the trigger element based on multiple examples and styles.
 
-A popular use case would be the “Frequently Asked Questions” section of a website or page when you can show questions and answers for each child element.
+The reactivity and state is handled by React and the components is built using the Tailwind CSS framework meaning that you can easily customize the styles and colors of the accordion.
+
+To use the accordion component, you need to import the `<Accordion>` component from `flowbite-react`:
+
+```jsx
+'use client';
+
+import { Accordion } from 'flowbite-react';
+```
+
+## Default accordion
+
+Use this example of the `<Accordion>` component and the `<Accordion.Panel>` and `<Accordion.Title>` subcomponents to create an accordion with multiple panels.
 
 <CodePreview title="Default accordion" className="dark:bg-gray-900">
   <Accordion>
@@ -75,6 +87,11 @@ A popular use case would be the “Frequently Asked Questions” section of a we
     </Accordion.Panel>
   </Accordion>
 </CodePreview>
+
+## Collapse all
+
+Use this example to automatically collapse all of the accordion panels by passing the `collapseAll` prop to the `<Accordion>` component.
+
 <CodePreview title="Collapse all" className="dark:bg-gray-900">
   <Accordion collapseAll>
     <Accordion.Panel>
@@ -145,3 +162,7 @@ A popular use case would be the “Frequently Asked Questions” section of a we
     </Accordion.Panel>
   </Accordion>
 </CodePreview>
+
+## References
+
+- [Flowbite Accordion](https://flowbite.com/docs/components/accordion/)

app/docs/components/accordion/page.tsx

@@ -4,7 +4,7 @@ import AccordionPageContent from '.';
 
 export const metadata: Metadata = {
   description:
-    'Use the accordion component to show hidden information based on the collapse and expand state of the child elements using data attribute options',
+    'Use the accordion component and its options to expand and collapse the content inside each panel based on state reactivity from React and Tailwind CSS',
   title: 'React Accordion - Flowbite',
 };
 

app/docs/components/alert/alert.mdx

@@ -3,7 +3,23 @@ import { ExampleAdditionalContent } from './additional-content.tsx';
 import { HiInformationCircle } from 'react-icons/hi';
 import { Alert } from '~/src';
 
-The alert component can be used to provide information to your users such as success or error messages, but also highlighted information complementing the normal flow of paragraphs and headers on a page. Flowbite also includes dismissable alerts which can be hidden by the users by clicking on the close icon.
+The alert component can be used to show a contextual text to the user such as a success or error message after form validation inside an alert box where you can choose from multiple colors, sizes, and styles.
+
+The examples below are styled with Tailwind CSS and the reactivity is handled by React and you can also add any type of content inside the alert box.
+
+To start using the alert box you need to import the `<Alert>` component from the `flowbite-react` package:
+
+```jsx
+'use client';
+
+import { Alert } from 'flowbite-react';
+```
+
+## Default alert
+
+The default alert component is a simple alert box with a text inside it and you can use the `color` prop to change the color of the alert box and the `title` prop to add a title to the alert box.
+
+Inside of the `<Alert>` component you can add any type of content such as text, images, or other components as they will be considered children of the alert box.
 
 <CodePreview title="Default alert">
   <Alert color="info">
@@ -12,41 +28,71 @@ The alert component can be used to provide information to your users such as suc
     </span>
   </Alert>
 </CodePreview>
+
+## Alert with icon
+
+Use the `icon` prop to add an icon to the alert box and you can use any icon from the [React Icons](https://react-icons.github.io/react-icons/) library.
+
 <CodePreview title="Alert with icon">
   <Alert color="failure" icon={HiInformationCircle}>
     <span>
       <span className="font-medium">Info alert!</span> Change a few things up and try submitting again.
     </span>
   </Alert>
 </CodePreview>
+
+## Dismissable alert
+
+You can use the `onDismiss` prop on the `<Alert>` component to add a dismiss button to the alert box by adding a function inside of it that will be called when the user clicks on the dismiss button.
+
 <CodePreview title="Dismissable alert">
   <Alert color="success" onDismiss={() => alert('Alert dismissed!')}>
     <span>
       <span className="font-medium">Info alert!</span> Change a few things up and try submitting again.
     </span>
   </Alert>
 </CodePreview>
+
+## Rounded alert
+
+To make the alert box rounded you can use the `rounded` prop on the `<Alert>` component.
+
 <CodePreview title="Rounded">
   <Alert color="warning" rounded>
     <span>
       <span className="font-medium">Info alert!</span> Change a few things up and try submitting again.
     </span>
   </Alert>
 </CodePreview>
+
+## Border accent
+
+Add a border accent to the alert box by applying the `withBorderAccent` prop on the `<Alert>` component.
+
 <CodePreview title="Border accent">
   <Alert color="warning" withBorderAccent>
     <span>
       <span className="font-medium">Info alert!</span> Change a few things up and try submitting again.
     </span>
   </Alert>
 </CodePreview>
+
+## Additional content
+
+Add additional content by using the `additionalContent` prop and add any type of content inside of it.
+
 <CodePreview title="Additional content">
   <Alert additionalContent={<ExampleAdditionalContent />} color="warning" icon={HiInformationCircle}>
     <span>
       <span className="font-medium">Info alert!</span> Change a few things up and try submitting again.
     </span>
   </Alert>
 </CodePreview>
+
+## All options
+
+This is an example with all of the available options and props for the alert component.
+
 <CodePreview title="All options">
   <Alert
     additionalContent={<ExampleAdditionalContent />}
@@ -60,3 +106,7 @@ The alert component can be used to provide information to your users such as suc
     </span>
   </Alert>
 </CodePreview>
+
+## References
+
+- [Flowbite Alerts](https://flowbite.com/docs/components/alerts/)

app/docs/components/alert/page.tsx

@@ -3,7 +3,8 @@ import { DocsContentLayout } from '~/app/components/docs-content-layout';
 import AlertPageContent from '.';
 
 export const metadata: Metadata = {
-  description: 'Show contextual information to your users using alert elements based on Tailwind CSS',
+  description:
+    'Get started with the alert component to show contextual information to the user such as when validating forms or showing errors based on React and Tailwind CSS',
   title: 'React Alert - Flowbite',
 };