added more components

TBD54566975 · Nov 2, 2024 · 95c202c · 95c202c
1 parent 6c49740
commit 95c202c
Show file tree

Hide file tree

Showing 10 changed files with 658 additions and 1 deletion.
diff --git a/site-new/src/pages/component-guide/api-details.mdx b/site-new/src/pages/component-guide/api-details.mdx
@@ -0,0 +1,114 @@
+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.
+
+```jsx
+const details = [
+  {
+    data: {
+      field: "email",
+      type: "string",
+      isOptional: false,
+      value: "[email protected]",
+    },
+  },
+  {
+    data: {
+      field: "password",
+      type: "string",
+      isOptional: true,
+      value: "********",
+    },
+  },
+];
+
+<ApiDetails details={details} />;
+```
+
+<ApiDetails details={details} />
+
+### Field with Expandable Object Value
+
+For fields that contain an object, the component displays an expandable section.
+
+```jsx
+const objectDetails = [
+  {
+    data: {
+      field: "settings",
+      type: "object",
+      isObject: true,
+      value: (
+        <ul>
+          <li>Theme: Dark</li>
+          <li>Notifications: Enabled</li>
+        </ul>
+      ),
+    },
+  },
+];
+
+<ApiDetails details={objectDetails} />;
+```
+
+<ApiDetails details={objectDetails} />
+
+</div>
diff --git a/site-new/src/pages/component-guide/button-group.mdx b/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>
diff --git a/site-new/src/pages/component-guide/button.mdx b/site-new/src/pages/component-guide/button.mdx
@@ -0,0 +1,64 @@
+import React from "react";
+import { Button } from "@site/src/components/Button";
+
+# Button Component
+
+<div className="">
+<p>The `Button` component renders a customizable button with a link and optional arrow icon. It supports different sizes and styles, making it versatile for various link-based actions across the site.</p>
+
+## Properties
+
+| Property    | Type                 | Required | Default   | Description                            |
+| ----------- | -------------------- | -------- | --------- | -------------------------------------- |
+| `size`      | `"large" \| "small"` | No       | `"small"` | Specifies the button size.             |
+| `text`      | `string`             | Yes      | `""`      | The button text.                       |
+| `url`       | `string`             | Yes      | `""`      | The URL that the button links to.      |
+| `className` | `string`             | No       | `""`      | Additional custom classes for styling. |
+
+## Usage
+
+```jsx title="Button Component"
+<Button size="large" text="Learn More" url="/learn-more" />
+```
+
+## Examples
+
+### Small Button (Default)
+
+Displays a button with default small size.
+
+```jsx
+<Button text="Get Started" url="/get-started" />
+```
+
+<Button text="Get Started" url="/get-started" />
+
+### Large Button
+
+A larger version of the button with custom text and link.
+
+```jsx
+<Button size="large" text="Explore Features" url="/features" />
+```
+
+<Button size="large" text="Explore Features" url="/features" />
+
+### Button with Custom Styling
+
+Applies additional custom classes for specific styling needs.
+
+```jsx
+<Button
+  text="Contact Us"
+  url="/contact"
+  className="bg-blue-500 text-white hover:bg-blue-700"
+/>
+```
+
+<Button
+  text="Contact Us"
+  url="/contact"
+  className="bg-blue-500 text-white hover:bg-blue-700"
+/>
+
+</div>
diff --git a/site-new/src/pages/component-guide/dependencies.mdx b/site-new/src/pages/component-guide/dependencies.mdx
@@ -0,0 +1,99 @@
+import React from "react";
+import Dependencies from "@site/src/components/Dependencies";
+
+# Dependencies Component
+
+<div className="">
+<p>The `Dependencies` component renders a list of dependencies for different languages, with a language switcher to toggle between dependency lists. It includes special handling for Kotlin-based dependencies, displayed in Maven and Gradle formats through the `KotlinDependencies` helper component.</p>
+
+## Properties
+
+| Property               | Type               | Required | Description                                                       |
+| ---------------------- | ------------------ | -------- | ----------------------------------------------------------------- |
+| `languageDependencies` | `DependencyItem[]` | Yes      | Array of dependency items, each with a language and dependencies. |
+
+### DependencyItem Structure
+
+Each `DependencyItem` object in the `languageDependencies` array contains the following:
+
+| Field          | Type       | Required | Description                                       |
+| -------------- | ---------- | -------- | ------------------------------------------------- |
+| `language`     | `string`   | Yes      | The programming language of the dependencies.     |
+| `dependencies` | `string[]` | Yes      | Array of dependencies for the specified language. |
+
+## Usage
+
+To use the `Dependencies` component, pass an array of `DependencyItem` objects, with each object containing the language and list of dependencies.
+
+```jsx title="Dependencies Component"
+const languageDependencies = [
+  { language: "javascript", dependencies: ["axios", "react"] },
+  { language: "swift", dependencies: ["Alamofire", "SwiftyJSON"] },
+  {
+    language: "maven",
+    dependencies: ["com.squareup.retrofit2:retrofit:2.9.0"],
+  },
+  {
+    language: "gradle",
+    dependencies: ["implementation 'com.squareup.retrofit2:retrofit:2.9.0'"],
+  },
+];
+
+<Dependencies languageDependencies={languageDependencies} />;
+```
+
+## Examples
+
+### Basic Example
+
+Displays dependencies for JavaScript and Swift languages.
+
+```jsx
+<Dependencies
+  languageDependencies={[
+    { language: "javascript", dependencies: ["axios", "react"] },
+    { language: "swift", dependencies: ["Alamofire", "SwiftyJSON"] },
+  ]}
+/>
+```
+
+<Dependencies
+  languageDependencies={[
+    { language: "javascript", dependencies: ["axios", "react"] },
+    { language: "swift", dependencies: ["Alamofire", "SwiftyJSON"] },
+  ]}
+/>
+
+### Example with Kotlin (Maven and Gradle) Dependencies
+
+The `Dependencies` component also supports Kotlin dependencies with Maven and Gradle format options.
+
+```jsx
+<Dependencies
+  languageDependencies={[
+    {
+      language: "maven",
+      dependencies: ["com.squareup.retrofit2:retrofit:2.9.0"],
+    },
+    {
+      language: "gradle",
+      dependencies: ["implementation 'com.squareup.retrofit2:retrofit:2.9.0'"],
+    },
+  ]}
+/>
+```
+
+<Dependencies
+  languageDependencies={[
+    {
+      language: "maven",
+      dependencies: ["com.squareup.retrofit2:retrofit:2.9.0"],
+    },
+    {
+      language: "gradle",
+      dependencies: ["implementation 'com.squareup.retrofit2:retrofit:2.9.0'"],
+    },
+  ]}
+/>
+
+</div>