docs(components/*): add <title>, <meta description/> to component…

… pages

app/docs/components/accordion/index.tsx

@@ -0,0 +1,8 @@
+'use client';
+
+import type { FC } from 'react';
+import AccordionDocs from './accordion.mdx';
+
+const AccordionPageContent: FC = () => <AccordionDocs />;
+
+export default AccordionPageContent;

app/docs/components/accordion/page.tsx

@@ -1,16 +1,19 @@
-'use client';
-
-import type { FC } from 'react';
+import type { Metadata, NextPage } from 'next';
 import { DocsContentLayout } from '~/app/components/docs-content-layout';
-import AccordionDocs from './accordion.mdx';
+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',
+  title: 'React Accordion - Flowbite',
+};
 
-const AccordionPage: FC = () => (
-  <DocsContentLayout
-    title="React Accordion - Flowbite"
-    description="Use the accordion component to show hidden information based on the collapse and expand state of the child elements using data attribute options"
-  >
-    <AccordionDocs />
-  </DocsContentLayout>
-);
+const AccordionPage: NextPage = () => {
+  return (
+    <DocsContentLayout description={`${metadata.description}`} title={`${metadata.title}`}>
+      <AccordionPageContent />
+    </DocsContentLayout>
+  );
+};
 
 export default AccordionPage;

app/docs/components/alert/index.tsx

@@ -0,0 +1,8 @@
+'use client';
+
+import type { FC } from 'react';
+import AlertDocs from './alert.mdx';
+
+const AlertPageContent: FC = () => <AlertDocs />;
+
+export default AlertPageContent;

app/docs/components/alert/page.tsx

@@ -1,17 +1,18 @@
-'use client';
-
-import type { FC } from 'react';
-
+import type { Metadata, NextPage } from 'next';
 import { DocsContentLayout } from '~/app/components/docs-content-layout';
-import AlertDocs from './alert.mdx';
+import AlertPageContent from '.';
+
+export const metadata: Metadata = {
+  description: 'Show contextual information to your users using alert elements based on Tailwind CSS',
+  title: 'React Alert - Flowbite',
+};
 
-const AlertPage: FC = () => (
-  <DocsContentLayout
-    title="React Alert - Flowbite"
-    description="Show contextual information to your users using alert elements based on Tailwind CSS"
-  >
-    <AlertDocs></AlertDocs>
-  </DocsContentLayout>
-);
+const AlertPage: NextPage = () => {
+  return (
+    <DocsContentLayout description={`${metadata.description}`} title={`${metadata.title}`}>
+      <AlertPageContent />
+    </DocsContentLayout>
+  );
+};
 
 export default AlertPage;

app/docs/components/avatar/index.tsx

@@ -0,0 +1,8 @@
+'use client';
+
+import type { FC } from 'react';
+import AvatarDocs from './avatar.mdx';
+
+const AvatarPageContent: FC = () => <AvatarDocs />;
+
+export default AvatarPageContent;

app/docs/components/avatar/page.tsx

@@ -1,17 +1,19 @@
-'use client';
-
-import type { FC } from 'react';
-
+import type { Metadata, NextPage } from 'next';
 import { DocsContentLayout } from '~/app/components/docs-content-layout';
-import AvatarDocs from './avatar.mdx';
+import AvatarPageContent from '.';
+
+export const metadata: Metadata = {
+  description:
+    'Use the avatar component to show a visual representation of a user profile using an image element or SVG object based on multiple styles and sizes',
+  title: 'React Avatar - Flowbite',
+};
 
-const AvatarPage: FC = () => (
-  <DocsContentLayout
-    title="React Avatar - Flowbite"
-    description="Use the avatar component to show a visual representation of a user profile using an image element or SVG object based on multiple styles and sizes"
-  >
-    <AvatarDocs />
-  </DocsContentLayout>
-);
+const AvatarPage: NextPage = () => {
+  return (
+    <DocsContentLayout description={`${metadata.description}`} title={`${metadata.title}`}>
+      <AvatarPageContent />
+    </DocsContentLayout>
+  );
+};
 
 export default AvatarPage;

app/docs/components/badge/index.tsx

@@ -0,0 +1,8 @@
+'use client';
+
+import type { FC } from 'react';
+import BadgeDocs from './badge.mdx';
+
+const BadgePageContent: FC = () => <BadgeDocs />;
+
+export default BadgePageContent;

app/docs/components/badge/page.tsx

@@ -1,16 +1,19 @@
-'use client';
-
-import type { FC } from 'react';
+import type { Metadata, NextPage } from 'next';
 import { DocsContentLayout } from '~/app/components/docs-content-layout';
-import BadgeDocs from './badge.mdx';
+import BadgePageContent from '.';
+
+export const metadata: Metadata = {
+  description:
+    'Use the avatar component to show a visual representation of a user profile using an image element or SVG object based on multiple styles and sizes',
+  title: 'React Badge - Flowbite',
+};
 
-const BadgePage: FC = () => (
-  <DocsContentLayout
-    title="React Badge - Flowbite"
-    description="Use Tailwind CSS badges as elements to show counts or labels separately or inside other components"
-  >
-    <BadgeDocs />
-  </DocsContentLayout>
-);
+const AvatarPage: NextPage = () => {
+  return (
+    <DocsContentLayout description={`${metadata.description}`} title={`${metadata.title}`}>
+      <BadgePageContent />
+    </DocsContentLayout>
+  );
+};
 
-export default BadgePage;
+export default AvatarPage;

app/docs/components/breadcrumb/index.tsx

@@ -0,0 +1,8 @@
+'use client';
+
+import type { FC } from 'react';
+import BreadcrumbDocs from './breadcrumb.mdx';
+
+const BreadcrumbPageContent: FC = () => <BreadcrumbDocs />;
+
+export default BreadcrumbPageContent;

app/docs/components/breadcrumb/page.tsx

@@ -1,16 +1,18 @@
-'use client';
-
-import type { FC } from 'react';
+import type { Metadata, NextPage } from 'next';
 import { DocsContentLayout } from '~/app/components/docs-content-layout';
-import BreadcrumbDocs from './breadcrumb.mdx';
+import BreadcrumbPageContent from '.';
+
+export const metadata: Metadata = {
+  description: 'Show the location of the current page in a hierarchical structure using the breadcrumb components',
+  title: 'React Breadcrumb - Flowbite',
+};
 
-const BreadcrumbPage: FC = () => (
-  <DocsContentLayout
-    title="React Breadcrumb - Flowbite"
-    description="Show the location of the current page in a hierarchical structure using the breadcrumb components"
-  >
-    <BreadcrumbDocs />
-  </DocsContentLayout>
-);
+const BreadcrumbPage: NextPage = () => {
+  return (
+    <DocsContentLayout description={`${metadata.description}`} title={`${metadata.title}`}>
+      <BreadcrumbPageContent />
+    </DocsContentLayout>
+  );
+};
 
 export default BreadcrumbPage;

app/docs/components/button-group/index.tsx

@@ -0,0 +1,8 @@
+'use client';
+
+import type { FC } from 'react';
+import ButtonGroupDocs from './button-group.mdx';
+
+const ButtonGroupPageContent: FC = () => <ButtonGroupDocs />;
+
+export default ButtonGroupPageContent;

app/docs/components/button-group/page.tsx

@@ -1,16 +1,18 @@
-'use client';
-
-import type { FC } from 'react';
+import type { Metadata, NextPage } from 'next';
 import { DocsContentLayout } from '~/app/components/docs-content-layout';
-import ButtonGroupDocs from './button-group.mdx';
+import ButtonGroupPageContent from '.';
+
+export const metadata: Metadata = {
+  description: 'Button groups are a Tailwind CSS powered set of buttons sticked together in a horizontal line',
+  title: 'React Button Group - Flowbite',
+};
 
-const ButtonGroupPage: FC = () => (
-  <DocsContentLayout
-    title="React Button Group - Flowbite"
-    description="Button groups are a Tailwind CSS powered set of buttons sticked together in a horizontal line"
-  >
-    <ButtonGroupDocs />
-  </DocsContentLayout>
-);
+const ButtonGroupPage: NextPage = () => {
+  return (
+    <DocsContentLayout description={`${metadata.description}`} title={`${metadata.title}`}>
+      <ButtonGroupPageContent />
+    </DocsContentLayout>
+  );
+};
 
 export default ButtonGroupPage;

app/docs/components/button/index.tsx

@@ -0,0 +1,8 @@
+'use client';
+
+import type { FC } from 'react';
+import ButtonDocs from './button.mdx';
+
+const ButtonPageContent: FC = () => <ButtonDocs />;
+
+export default ButtonPageContent;

app/docs/components/button/page.tsx

@@ -1,16 +1,19 @@
-'use client';
-
-import type { FC } from 'react';
+import type { Metadata, NextPage } from 'next';
 import { DocsContentLayout } from '~/app/components/docs-content-layout';
-import ButtonDocs from './button.mdx';
+import ButtonPageContent from '.';
+
+export const metadata: Metadata = {
+  description:
+    'Use the button component inside forms, as links, social login, payment options with support for multiple styles, colors, sizes, gradients, and shadows',
+  title: 'React Buttons - Flowbite',
+};
 
-const ButtonPage: FC = () => (
-  <DocsContentLayout
-    title="React Buttons - Flowbite"
-    description="Use the button component inside forms, as links, social login, payment options with support for multiple styles, colors, sizes, gradients, and shadows"
-  >
-    <ButtonDocs />
-  </DocsContentLayout>
-);
+const ButtonPage: NextPage = () => {
+  return (
+    <DocsContentLayout description={`${metadata.description}`} title={`${metadata.title}`}>
+      <ButtonPageContent />
+    </DocsContentLayout>
+  );
+};
 
 export default ButtonPage;

app/docs/components/card/index.tsx

@@ -0,0 +1,8 @@
+'use client';
+
+import type { FC } from 'react';
+import CardDocs from './card.mdx';
+
+const CardPageContent: FC = () => <CardDocs />;
+
+export default CardPageContent;

app/docs/components/card/page.tsx

@@ -1,17 +1,18 @@
-'use client';
-
-import type { FC } from 'react';
-
+import type { Metadata, NextPage } from 'next';
 import { DocsContentLayout } from '~/app/components/docs-content-layout';
-import CardDocs from './card.mdx';
+import CardPageContent from '.';
+
+export const metadata: Metadata = {
+  description: 'Get started with a large variety of Tailwind CSS card examples for your web project',
+  title: 'React Cards - Flowbite',
+};
 
-const CardPage: FC = () => (
-  <DocsContentLayout
-    title="React Cards - Flowbite"
-    description="Get started with a large variety of Tailwind CSS card examples for your web project"
-  >
-    <CardDocs />
-  </DocsContentLayout>
-);
+const CardPage: NextPage = () => {
+  return (
+    <DocsContentLayout description={`${metadata.description}`} title={`${metadata.title}`}>
+      <CardPageContent />
+    </DocsContentLayout>
+  );
+};
 
 export default CardPage;

app/docs/components/carousel/index.tsx

@@ -0,0 +1,8 @@
+'use client';
+
+import type { FC } from 'react';
+import CarouselDocs from './carousel.mdx';
+
+const CarouselPageContent: FC = () => <CarouselDocs />;
+
+export default CarouselPageContent;

app/docs/components/carousel/page.tsx

@@ -1,16 +1,19 @@
-'use client';
-
-import type { FC } from 'react';
+import type { Metadata, NextPage } from 'next';
 import { DocsContentLayout } from '~/app/components/docs-content-layout';
-import CarouselDocs from './carousel.mdx';
+import CarouselPageContent from '.';
+
+export const metadata: Metadata = {
+  description:
+    'Use the carousel component to slide through multiple elements and images using custom controls, indicators, intervals, and options',
+  title: 'React Carousel - Flowbite',
+};
 
-const CarouselPage: FC = () => (
-  <DocsContentLayout
-    title="React Carousel - Flowbite"
-    description="Use the carousel component to slide through multiple elements and images using custom controls, indicators, intervals, and options"
-  >
-    <CarouselDocs />
-  </DocsContentLayout>
-);
+const CarouselPage: NextPage = () => {
+  return (
+    <DocsContentLayout description={`${metadata.description}`} title={`${metadata.title}`}>
+      <CarouselPageContent />
+    </DocsContentLayout>
+  );
+};
 
 export default CarouselPage;

app/docs/components/dropdown/index.tsx

@@ -0,0 +1,8 @@
+'use client';
+
+import type { FC } from 'react';
+import DropdownDocs from './dropdown.mdx';
+
+const DropdownPageContent: FC = () => <DropdownDocs />;
+
+export default DropdownPageContent;