Finish component guide

site-new/src/pages/component-guide/api-details.mdx

@@ -0,0 +1,145 @@
+import React from "react";
+import ApiDetails from "@site/src/components/ApiDetails";
+
+# ApiDetails Component
+
+<div className="">
+<p>The `ApiDetails` component displays a list of API fields and their details, such as type, optional status, and values. It's suitable for showing structured data in a user-friendly format, with expandable details for fields that contain objects.</p>
+
+## Properties
+
+| Property  | Type       | Required | Description                                             |
+| --------- | ---------- | -------- | ------------------------------------------------------- |
+| `details` | `Detail[]` | Yes      | Array of field details, each containing field metadata. |
+
+### Detail Structure
+
+Each `Detail` object in the `details` array has the following structure:
+
+| Field        | Type              | Required | Description                                     |
+| ------------ | ----------------- | -------- | ----------------------------------------------- |
+| `field`      | `string`          | Yes      | The name of the API field.                      |
+| `type`       | `string`          | No       | The data type of the field (e.g., `string`).    |
+| `isOptional` | `boolean`         | No       | Indicates if the field is optional.             |
+| `isObject`   | `boolean`         | No       | Specifies if the field value is an object.      |
+| `value`      | `React.ReactNode` | Yes      | The value or content associated with the field. |
+
+## Usage
+
+```jsx title="ApiDetails Component"
+const apiDetailsData = [
+  {
+    data: {
+      field: "username",
+      type: "string",
+      isOptional: true,
+      value: "JohnDoe",
+    },
+  },
+  {
+    data: {
+      field: "profile",
+      type: "object",
+      isObject: true,
+      value: (
+        <ul>
+          <li>Age: 30</li>
+          <li>Location: New York</li>
+        </ul>
+      ),
+    },
+  },
+];
+
+<ApiDetails details={apiDetailsData} />;
+```
+
+## Examples
+
+### Basic Example
+
+Displays a list of fields with types and optional statuses.
+
+<ApiDetails
+  details={[
+    {
+      data: {
+        field: "email",
+        type: "string",
+        isOptional: false,
+        value: "user@example.com",
+      },
+    },
+    {
+      data: {
+        field: "password",
+        type: "string",
+        isOptional: true,
+        value: "********",
+      },
+    },
+  ]}
+/>
+
+<ApiDetails
+  details={[
+    {
+      data: {
+        field: "email",
+        type: "string",
+        isOptional: false,
+        value: "user@example.com",
+      },
+    },
+    {
+      data: {
+        field: "password",
+        type: "string",
+        isOptional: true,
+        value: "********",
+      },
+    },
+  ]}
+/>
+
+### Field with Expandable Object Value
+
+For fields that contain an object, the component displays an expandable section.
+
+<ApiDetails
+  details={[
+    {
+      data: {
+        field: "settings",
+        type: "object",
+        isObject: true,
+        value: (
+          <ul>
+            <li>Theme: Dark</li>
+            <li>Notifications: Enabled</li>
+          </ul>
+        ),
+      },
+    },
+  ]}
+/>
+
+<ApiDetails
+  details={[
+    {
+      data: {
+        field: "settings",
+        type: "object",
+        isObject: true,
+        value: (
+          <ul>
+            <li>Theme: Dark</li>
+            <li>Notifications: Enabled</li>
+          </ul>
+        ),
+      },
+    },
+  ]}
+/>
+
+</div>

site-new/src/pages/component-guide/block-bg.mdx

@@ -0,0 +1,156 @@
+import React from "react";
+import { BlockBg } from "@site/src/components/BlockBg";
+
+# BlockBg Component
+
+<div className="">
+<p>The `BlockBg` component creates a background effect with randomly generated squares or tiles, providing a dynamic, grid-like background for other content.</p>
+
+## Properties
+
+| Property             | Type              | Required | Default | Description                                                                              |
+| -------------------- | ----------------- | -------- | ------- | ---------------------------------------------------------------------------------------- |
+| `minSize`            | `number`          | Yes      | `none`  | Minimum size for tile height in pixels.                                                  |
+| `maxSize`            | `number`          | Yes      | `none`  | Maximum size for tile height in pixels.                                                  |
+| `rows`               | `number`          | No       | `12`    | Number of rows in the grid.                                                              |
+| `columns`            | `number`          | No       | `12`    | Number of columns in the grid.                                                           |
+| `className`          | `string`          | No       | `""`    | Additional class name for styling the component.                                         |
+| `decreaseBlockLevel` | `number`          | No       | `2`     | Determines the level of random block reduction in the grid.                              |
+| `secondaryClassName` | `string`          | No       | `""`    | Class name for individual tiles.                                                         |
+| `animate`            | `boolean`         | No       | `false` | Enables animation of the grid.                                                           |
+| `intervalDuration`   | `number`          | No       | `none`  | Time interval in milliseconds for grid animation updates. Required if `animate` is true. |
+| `children`           | `React.ReactNode` | No       | `""`    | Content to render over the background grid.                                              |
+
+## Usage
+
+```jsx title="Basic Usage of BlockBg"
+<BlockBg minSize={10} maxSize={50} />
+```
+
+## Examples
+
+### Basic Example with Custom Colors
+
+Creates a static grid background with random tile sizes.
+
+```jsx
+<BlockBg
+  minSize={20}
+  maxSize={40}
+  rows={8}
+  columns={8}
+  className="h-36 w-full bg-tbd-gray-tint-1"
+  secondaryClassName="bg-tbd-gray-shade-2"
+/>
+```
+
+<BlockBg
+  minSize={20}
+  maxSize={40}
+  rows={8}
+  columns={8}
+  className="h-36 w-full bg-tbd-gray-tint-1"
+  secondaryClassName="bg-tbd-gray-shade-2"
+/>
+
+### Variant with Yellow Backgrounds
+
+Creates a vibrant yellow background grid.
+
+```jsx
+<BlockBg
+  minSize={15}
+  maxSize={35}
+  rows={8}
+  columns={8}
+  className="h-36 w-full bg-tbd-yellow"
+  secondaryClassName="bg-tbd-yellow-shade-2"
+/>
+```
+
+<BlockBg
+  minSize={15}
+  maxSize={35}
+  rows={8}
+  columns={8}
+  className="h-36 w-full bg-tbd-yellow"
+  secondaryClassName="bg-tbd-yellow-shade-2"
+/>
+
+### Variant with Teal Tints
+
+A calm teal-themed background grid.
+
+```jsx
+<BlockBg
+  minSize={15}
+  maxSize={35}
+  rows={10}
+  columns={10}
+  className="h-36 w-full bg-tbd-teal"
+  secondaryClassName="bg-tbd-teal-tint-2"
+/>
+```
+
+<BlockBg
+  minSize={15}
+  maxSize={35}
+  rows={10}
+  columns={10}
+  className="h-36 w-full bg-tbd-teal"
+  secondaryClassName="bg-tbd-teal-tint-2"
+/>
+
+### Variant with Purple Shades
+
+A background using purple shades for a unique style.
+
+```jsx
+<BlockBg
+  minSize={20}
+  maxSize={40}
+  rows={8}
+  columns={8}
+  className="h-36 w-full bg-tbd-purple-tint-2"
+  secondaryClassName="bg-tbd-gray-shade-1"
+/>
+```
+
+<BlockBg
+  minSize={20}
+  maxSize={40}
+  rows={8}
+  columns={8}
+  className="h-36 w-full bg-tbd-purple-tint-2"
+  secondaryClassName="bg-tbd-gray-shade-1"
+/>
+
+### Gray Background Variant with Overlay Content
+
+A neutral gray background with overlay content.
+
+```jsx
+<BlockBg
+  minSize={25}
+  maxSize={45}
+  rows={10}
+  columns={10}
+  className="h-36 w-full bg-tbd-gray"
+  secondaryClassName="bg-tbd-gray-shade-2"
+>
+  <h1 className="text-center text-white">Overlay Content</h1>
+</BlockBg>
+```
+
+<BlockBg
+  minSize={25}
+  maxSize={45}
+  rows={10}
+  columns={10}
+  className="h-36 w-full bg-tbd-gray"
+  secondaryClassName="bg-tbd-gray-shade-2"
+>
+  <h1 className="text-center text-white">Overlay Content</h1>
+</BlockBg>
+
+</div>

site-new/src/pages/component-guide/button-group.mdx

@@ -0,0 +1,86 @@
+import React from "react";
+import ButtonGroup from "@site/src/components/ButtonGroup";
+
+# ButtonGroup Component
+
+<div className="">
+<p>The `ButtonGroup` component renders a group of `Button` components based on an array of button data objects. This component is ideal for creating sets of related buttons with customizable layout options.</p>
+
+## Properties
+
+| Property         | Type                     | Required | Default | Description                                                                 |
+| ---------------- | ------------------------ | -------- | ------- | --------------------------------------------------------------------------- |
+| `buttons`        | `{ data: ButtonData }[]` | Yes      | `[]`    | Array of button data objects, each containing `label` and `url` properties. |
+| `className`      | `string`                 | No       | `""`    | Additional class names for styling the button group.                        |
+| `invertDarkMode` | `boolean`                | No       | `false` | Determines if the button colors should invert in dark mode.                 |
+
+### ButtonData Structure
+
+Each `ButtonData` object in the `buttons` array can contain the following properties:
+
+| Field   | Type     | Required | Description                       |
+| ------- | -------- | -------- | --------------------------------- |
+| `label` | `string` | Yes      | The text displayed on the button. |
+| `url`   | `string` | Yes      | The URL that the button links to. |
+
+## Usage
+
+To use the `ButtonGroup` component, pass an array of button data objects. Here is a sample array format for reference:
+
+```jsx
+const buttons = [
+  { data: { label: "Features", url: "/features" } },
+  { data: { label: "Pricing", url: "/pricing" } },
+  { data: { label: "Support", url: "/support" } },
+];
+```
+
+## Examples
+
+### Basic Button Group
+
+Displays a basic group of buttons.
+
+```jsx
+<ButtonGroup
+  buttons={[
+    { data: { label: "Features", url: "/features" } },
+    { data: { label: "Pricing", url: "/pricing" } },
+    { data: { label: "Support", url: "/support" } },
+  ]}
+/>
+```
+
+<ButtonGroup
+  buttons={[
+    { data: { label: "Features", url: "/features" } },
+    { data: { label: "Pricing", url: "/pricing" } },
+    { data: { label: "Support", url: "/support" } },
+  ]}
+/>
+
+### Button Group with Custom Styling
+
+Applies custom styling to the button group container.
+
+```jsx
+<ButtonGroup
+  buttons={[
+    { data: { label: "Features", url: "/features" } },
+    { data: { label: "Pricing", url: "/pricing" } },
+    { data: { label: "Support", url: "/support" } },
+  ]}
+  className="justify-center rounded-md bg-gray-200 p-4"
+/>
+```
+
+<ButtonGroup
+  buttons={[
+    { data: { label: "Features", url: "/features" } },
+    { data: { label: "Pricing", url: "/pricing" } },
+    { data: { label: "Support", url: "/support" } },
+  ]}
+  className="justify-center rounded-md bg-gray-200 p-4"
+/>
+
+</div>