From 86b6d356f34b4e41d28fce8387d3edad9e3177fd Mon Sep 17 00:00:00 2001 From: dayhaysoos Date: Fri, 1 Nov 2024 11:35:32 -0400 Subject: [PATCH 1/6] added background component to component guide --- .../src/pages/component-guide/block-bg.mdx | 156 ++++++++++++++++++ site-new/src/pages/component-guide/index.tsx | 1 + 2 files changed, 157 insertions(+) create mode 100644 site-new/src/pages/component-guide/block-bg.mdx diff --git a/site-new/src/pages/component-guide/block-bg.mdx b/site-new/src/pages/component-guide/block-bg.mdx new file mode 100644 index 000000000..f05aeba57 --- /dev/null +++ b/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 + +
+

The `BlockBg` component creates a background effect with randomly generated squares or tiles, providing a dynamic, grid-like background for other content.

+ +## 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" + +``` + +## Examples + +### Basic Example with Custom Colors + +Creates a static grid background with random tile sizes. + +```jsx + +``` + + + +### Variant with Yellow Backgrounds + +Creates a vibrant yellow background grid. + +```jsx + +``` + + + +### Variant with Teal Tints + +A calm teal-themed background grid. + +```jsx + +``` + + + +### Variant with Purple Shades + +A background using purple shades for a unique style. + +```jsx + +``` + + + +### Gray Background Variant with Overlay Content + +A neutral gray background with overlay content. + +```jsx + +

Overlay Content

+ +``` + + +

Overlay Content

+ + +
diff --git a/site-new/src/pages/component-guide/index.tsx b/site-new/src/pages/component-guide/index.tsx index 616c2ede8..b4399c87a 100644 --- a/site-new/src/pages/component-guide/index.tsx +++ b/site-new/src/pages/component-guide/index.tsx @@ -22,6 +22,7 @@ function ComponentList() { name: "Calendar", path: "/component-guide/calendar", }, + { name: "BlockBg", path: "/component-guide/block-bg" }, ]; return ( From 6c4974030fe78e09ad2dcc040435bb2fced9d140 Mon Sep 17 00:00:00 2001 From: dayhaysoos Date: Fri, 1 Nov 2024 12:29:42 -0400 Subject: [PATCH 2/6] add check box component to component guide --- .../components/{Checkbox => }/Checkbox.tsx | 0 .../src/pages/component-guide/checkbox.mdx | 76 +++++++++++++++++++ site-new/src/pages/component-guide/index.tsx | 27 +++---- site-new/src/theme/BlogLayout/index.tsx | 2 +- 4 files changed, 91 insertions(+), 14 deletions(-) rename site-new/src/components/{Checkbox => }/Checkbox.tsx (100%) create mode 100644 site-new/src/pages/component-guide/checkbox.mdx diff --git a/site-new/src/components/Checkbox/Checkbox.tsx b/site-new/src/components/Checkbox.tsx similarity index 100% rename from site-new/src/components/Checkbox/Checkbox.tsx rename to site-new/src/components/Checkbox.tsx diff --git a/site-new/src/pages/component-guide/checkbox.mdx b/site-new/src/pages/component-guide/checkbox.mdx new file mode 100644 index 000000000..6c97ce44a --- /dev/null +++ b/site-new/src/pages/component-guide/checkbox.mdx @@ -0,0 +1,76 @@ +import React from "react"; +import Checkbox from "@site/src/components/Checkbox"; + +# Checkbox Component + +
+

The `Checkbox` component is a styled checkbox element with an optional label. It utilizes the Radix UI Checkbox and Label primitives for accessibility and custom styling.

+ +## Properties + +| Property | Type | Required | Default | Description | +| ----------- | ----------------------- | -------- | ------- | --------------------------------------------------- | +| `label` | `string` or `ReactNode` | No | `""` | Label text or node to be displayed beside checkbox. | +| `className` | `string` | No | `""` | Additional class names for custom styling. | + +## Usage + +```jsx title="Checkbox Component" + +``` + +## Examples + +### Basic Checkbox with Label + +```jsx + +``` + + + +### Checkbox with Custom Styling + +Adds custom styles with `className`. + +```jsx + +``` + + + +### Checkbox with React Node Label + +A checkbox with a label that includes additional HTML or React components. + +```jsx + + I accept the{" "} + + terms and conditions + + + } +/> +``` + + + I accept the{" "} + + terms and conditions + + + } +/> + +
diff --git a/site-new/src/pages/component-guide/index.tsx b/site-new/src/pages/component-guide/index.tsx index b4399c87a..8b1dc6ab3 100644 --- a/site-new/src/pages/component-guide/index.tsx +++ b/site-new/src/pages/component-guide/index.tsx @@ -16,13 +16,9 @@ function ComponentList() { { name: "Admonition", path: "/component-guide/admonition" }, { name: "IconButton", path: "/component-guide/icon-button" }, { name: "CodeBlock", path: "/component-guide/code-block" }, - { name: "IconButton", path: "/component-guide/icon-button" }, - { name: "CodeBlock", path: "/component-guide/code-block" }, - { - name: "Calendar", - path: "/component-guide/calendar", - }, + { name: "Calendar", path: "/component-guide/calendar" }, { name: "BlockBg", path: "/component-guide/block-bg" }, + { name: "Checkbox", path: "/component-guide/checkbox" }, ]; return ( @@ -32,13 +28,18 @@ function ComponentList() {

Click on a component to learn more about it.

); diff --git a/site-new/src/theme/BlogLayout/index.tsx b/site-new/src/theme/BlogLayout/index.tsx index 550381bea..582a5ddd8 100644 --- a/site-new/src/theme/BlogLayout/index.tsx +++ b/site-new/src/theme/BlogLayout/index.tsx @@ -6,7 +6,7 @@ import BlogSidebar from "@theme/BlogSidebar"; import type { Props } from "@theme/BlogLayout"; import { useBlogContext } from "../BlogListContext/BlogListContext"; import Background from "@site/src/components/Background"; -import Checkbox from "@site/src/components/Checkbox/Checkbox"; +import Checkbox from "@site/src/components/Checkbox"; import Heading from "@theme/Heading"; const CheckboxLabel = ({ label }: { label: string }) => { From 95c202c6ec1a12801612c6a48dc8b7196cf3f83f Mon Sep 17 00:00:00 2001 From: dayhaysoos Date: Fri, 1 Nov 2024 20:53:32 -0400 Subject: [PATCH 3/6] added more components --- .../src/pages/component-guide/api-details.mdx | 114 ++++++++++++++++++ .../pages/component-guide/button-group.mdx | 86 +++++++++++++ site-new/src/pages/component-guide/button.mdx | 64 ++++++++++ .../pages/component-guide/dependencies.mdx | 99 +++++++++++++++ .../src/pages/component-guide/dependency.mdx | 97 +++++++++++++++ .../component-guide/homepage-features.mdx | 75 ++++++++++++ .../src/pages/component-guide/import-src.mdx | 48 ++++++++ site-new/src/pages/component-guide/index.tsx | 7 ++ .../component-guide/text-illustration.mdx | 67 ++++++++++ site-new/src/theme/BlogLayout/index.tsx | 2 +- 10 files changed, 658 insertions(+), 1 deletion(-) create mode 100644 site-new/src/pages/component-guide/api-details.mdx create mode 100644 site-new/src/pages/component-guide/button-group.mdx create mode 100644 site-new/src/pages/component-guide/button.mdx create mode 100644 site-new/src/pages/component-guide/dependencies.mdx create mode 100644 site-new/src/pages/component-guide/dependency.mdx create mode 100644 site-new/src/pages/component-guide/homepage-features.mdx create mode 100644 site-new/src/pages/component-guide/import-src.mdx create mode 100644 site-new/src/pages/component-guide/text-illustration.mdx diff --git a/site-new/src/pages/component-guide/api-details.mdx b/site-new/src/pages/component-guide/api-details.mdx new file mode 100644 index 000000000..52e79ab90 --- /dev/null +++ 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 + +
+

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.

+ +## 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: ( +
    +
  • Age: 30
    • +
  • Location: New York
    • +
+ ), + }, + }, +]; + +; +``` + +## Examples + +### Basic Example + +Displays a list of fields with types and optional statuses. + +```jsx +const 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. + +```jsx +const objectDetails = [ + { + data: { + field: "settings", + type: "object", + isObject: true, + value: ( +
    +
  • Theme: Dark
    • +
  • Notifications: Enabled
    • +
+ ), + }, + }, +]; + +; +``` + + + +
diff --git a/site-new/src/pages/component-guide/button-group.mdx b/site-new/src/pages/component-guide/button-group.mdx new file mode 100644 index 000000000..23512d935 --- /dev/null +++ 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 + +
+

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.

+ +## 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 + +``` + + + +### Button Group with Custom Styling + +Applies custom styling to the button group container. + +```jsx + +``` + + + +
diff --git a/site-new/src/pages/component-guide/button.mdx b/site-new/src/pages/component-guide/button.mdx new file mode 100644 index 000000000..3bccb2593 --- /dev/null +++ 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 + +
+

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.

+ +## 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" +
diff --git a/site-new/src/pages/component-guide/dependencies.mdx b/site-new/src/pages/component-guide/dependencies.mdx new file mode 100644 index 000000000..c0f31f105 --- /dev/null +++ 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 + +
+

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.

+ +## 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'"], + }, +]; + +; +``` + +## Examples + +### Basic Example + +Displays dependencies for JavaScript and Swift languages. + +```jsx + +``` + + + +### Example with Kotlin (Maven and Gradle) Dependencies + +The `Dependencies` component also supports Kotlin dependencies with Maven and Gradle format options. + +```jsx + +``` + + + +
diff --git a/site-new/src/pages/component-guide/dependency.mdx b/site-new/src/pages/component-guide/dependency.mdx new file mode 100644 index 000000000..efecc681f --- /dev/null +++ b/site-new/src/pages/component-guide/dependency.mdx @@ -0,0 +1,97 @@ +import React from "react"; +import Dependency from "@site/src/components/Dependency"; + +# Dependency Component + +
+

The `Dependency` component renders language-specific dependency information, including installation commands and configuration blocks for different package managers and languages. This component supports JavaScript (npm), Gradle, Maven, and Swift dependencies.

+ +## Properties + +| Property | Type | Required | Default | Description | +| -------------- | ------------------------ | -------- | ----------- | ---------------------------------------------------------------------------------- | +| `language` | `string` | Yes | `""` | Specifies the language of the dependencies. | +| `dependencies` | `string[]` | Yes | `[]` | Array of dependencies required for the specified language. | +| `display` | `"install" \| "package"` | No | `"install"` | Determines display mode, either as installation commands or package configuration. | + +### SDKVersions Structure + +This structure holds SDK version information for various programming languages: + +| Field | Type | Required | Description | +| ------- | ------------------------------------------------- | -------- | ------------------------------- | +| `js` | `Record` | Yes | SDK versions for JavaScript. | +| `jvm` | `Record` | Yes | SDK versions for JVM languages. | +| `swift` | `Record` | Yes | SDK versions for Swift. | + +## Usage + +To use the `Dependency` component, pass the language, dependencies, and any specific display option. + +```jsx title="Dependency Component" +const dependencies = ["axios", "react"]; +; +``` + +## Examples + +### JavaScript Installation Commands + +Displays installation commands for JavaScript dependencies using npm. + +```jsx + +``` + + + +### Gradle and Maven Dependencies + +Generates dependency blocks for JVM languages, with Gradle or Maven configuration based on the specified language. + +```jsx + + + +``` + + + + +### Swift Package Manager Dependencies + +Generates a package block for Swift dependencies. + +```jsx + +``` + + + +### JavaScript `package.json` Configuration + +Displays a `package.json` configuration for JavaScript dependencies with specified SDK versions. + +```jsx + +``` + + + +
diff --git a/site-new/src/pages/component-guide/homepage-features.mdx b/site-new/src/pages/component-guide/homepage-features.mdx new file mode 100644 index 000000000..be3405d01 --- /dev/null +++ b/site-new/src/pages/component-guide/homepage-features.mdx @@ -0,0 +1,75 @@ +import React from "react"; +import { HomepageFeatures } from "@site/src/components/HomepageFeatures"; + +# HomepageFeatures Component + +
+

The `HomepageFeatures` component displays a list of features, each represented by an icon, a title, and a description. This component is ideal for showcasing key attributes or selling points of a product or service on a homepage.

+ +## Properties for Feature Items + +Each feature item in `FeatureList` has the following properties: + +| Property | Type | Required | Description | +| ------------- | -------------------------------------------------- | -------- | ----------------------------------------- | +| `title` | `string` | Yes | Title of the feature. | +| `Svg` | `React.ComponentType>` | Yes | SVG icon representing the feature. | +| `description` | `JSX.Element` | Yes | Description of the feature in JSX format. | + +## Usage + +```jsx title="HomepageFeatures Component" + +``` + +## Examples + +### Basic Example + +This example renders the `HomepageFeatures` component with three sample feature items. + +```jsx + +``` + +## Feature Item Example + +Each feature item can be customized with a different SVG and text content. Here is an example of a feature item structure: + +```jsx +{ + title: 'Easy to Use', + Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default, + description: ( + <> + Docusaurus was designed from the ground up to be easily installed and + used to get your website up and running quickly. + + ), +} +``` + +## Customizing the Feature Component + +To create a custom feature, you can modify the properties in the `FeatureList` array. Each feature item renders as a column with a title, icon, and description. + +### Adding a New Feature Item + +Add a new item to the `FeatureList` array to display an additional feature. + +```jsx +const FeatureList: FeatureItem[] = [ + ...FeatureList, + { + title: 'Custom Feature', + Svg: require('@site/static/img/custom_icon.svg').default, + description: ( + <> + Customize your feature list by adding new items to the array. + + ), + }, +]; +``` + +
diff --git a/site-new/src/pages/component-guide/import-src.mdx b/site-new/src/pages/component-guide/import-src.mdx new file mode 100644 index 000000000..6b877b6b5 --- /dev/null +++ b/site-new/src/pages/component-guide/import-src.mdx @@ -0,0 +1,48 @@ +import React from "react"; +import { ImportSrc } from "@site/src/components/ImportSrc"; + +# ImportSrc Component + +
+

The `ImportSrc` component displays the correct import statement for the `Web5` API based on the specified CDN source. It dynamically generates an import URL based on the selected CDN (`unpkg` or `jsdelivr`) and the `WEB5_VERSION` from the Docusaurus custom fields.

+ +## Properties + +| Property | Type | Required | Description | +| -------- | -------- | -------- | ------------------------------------------------------------ | +| `src` | `string` | Yes | Specifies the CDN source. Accepts `"unpkg"` or `"jsdelivr"`. | + +## Usage + +To use the `ImportSrc` component, specify the `src` prop to indicate the desired CDN source. + +THREE BACK TICKS HEREjsx title="ImportSrc Component" + + +THREE BACK TICKS HERE + +## Examples + +### Import from Unpkg + +Generates an import statement for `Web5` using the Unpkg CDN. + +THREE BACK TICKS HEREjsx + + +THREE BACK TICKS HERE + + + +### Import from jsDelivr + +Generates an import statement for `Web5` using the jsDelivr CDN. + +THREE BACK TICKS HEREjsx + + +THREE BACK TICKS HERE + + + +
diff --git a/site-new/src/pages/component-guide/index.tsx b/site-new/src/pages/component-guide/index.tsx index 8b1dc6ab3..fbb92cec3 100644 --- a/site-new/src/pages/component-guide/index.tsx +++ b/site-new/src/pages/component-guide/index.tsx @@ -19,6 +19,13 @@ function ComponentList() { { name: "Calendar", path: "/component-guide/calendar" }, { name: "BlockBg", path: "/component-guide/block-bg" }, { name: "Checkbox", path: "/component-guide/checkbox" }, + { name: "HomePageFeatures", path: "/component-guide/homepage-features" }, + { name: "TextIllustration", path: "/component-guide/text-illustration" }, + { name: "ApiDetails", path: "/component-guide/api-details" }, + { name: "Button", path: "/component-guide/button" }, + { name: "ButtonGroup", path: "/component-guide/button-group" }, + { name: "Dependency", path: "/component-guide/dependency" }, + { name: "Dependencies", path: "/component-guide/dependencies" }, ]; return ( diff --git a/site-new/src/pages/component-guide/text-illustration.mdx b/site-new/src/pages/component-guide/text-illustration.mdx new file mode 100644 index 000000000..b0118c50d --- /dev/null +++ b/site-new/src/pages/component-guide/text-illustration.mdx @@ -0,0 +1,67 @@ +import React from "react"; +import { TextIllustration } from "@site/src/components/TextIllustration"; + +# TextIllustration Component + +
+

The `TextIllustration` component is used to display a styled text illustration with an icon, title text, and optional body content. It allows for different color tones and is ideal for callouts or highlighted notes.

+ +## Properties + +| Property | Type | Required | Default | Description | +| ----------- | ----------------- | -------- | ---------- | ----------------------------------------------------- | +| `tone` | `ToneTypes` | No | `"yellow"` | Defines the color tone of the illustration. | +| `titleText` | `string` | No | `"Note"` | Title text to display at the top of the illustration. | +| `body` | `React.ReactNode` | No | `""` | The content displayed below the title text. | + +## Usage + +```jsx title="TextIllustration Component" +This is an important reminder.

} +/> +``` + +## Examples + +### Default TextIllustration + +Displays a basic `TextIllustration` with default tone and title. + +```jsx +This is a default note.

} /> +``` + +This is a default note.

} /> + +### Custom Tone and Title + +Applies a custom tone and title text to the illustration. + +```jsx +This is an important message with a purple tone.

} +/> +``` + +This is an important message with a purple tone.

} +/> + +### Illustration without Body Content + +Displays a `TextIllustration` with only title text and no body content. + +```jsx + +``` + + + +
diff --git a/site-new/src/theme/BlogLayout/index.tsx b/site-new/src/theme/BlogLayout/index.tsx index 582a5ddd8..c6178fe90 100644 --- a/site-new/src/theme/BlogLayout/index.tsx +++ b/site-new/src/theme/BlogLayout/index.tsx @@ -57,7 +57,7 @@ export default function BlogLayout(props: Props): JSX.Element { return ( -
+
Date: Mon, 4 Nov 2024 09:13:06 -0500 Subject: [PATCH 4/6] fix imports --- site-new/src/pages/component-guide/api-details.mdx | 2 +- site-new/src/pages/component-guide/button.mdx | 2 +- site-new/src/pages/component-guide/import-src.mdx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/site-new/src/pages/component-guide/api-details.mdx b/site-new/src/pages/component-guide/api-details.mdx index 52e79ab90..a318fa0df 100644 --- a/site-new/src/pages/component-guide/api-details.mdx +++ b/site-new/src/pages/component-guide/api-details.mdx @@ -1,5 +1,5 @@ import React from "react"; -import { ApiDetails } from "@site/src/components/ApiDetails"; +import ApiDetails from "@site/src/components/ApiDetails"; # ApiDetails Component diff --git a/site-new/src/pages/component-guide/button.mdx b/site-new/src/pages/component-guide/button.mdx index 3bccb2593..7057a1e55 100644 --- a/site-new/src/pages/component-guide/button.mdx +++ b/site-new/src/pages/component-guide/button.mdx @@ -1,5 +1,5 @@ import React from "react"; -import { Button } from "@site/src/components/Button"; +import Button from "@site/src/components/Button"; # Button Component diff --git a/site-new/src/pages/component-guide/import-src.mdx b/site-new/src/pages/component-guide/import-src.mdx index 6b877b6b5..7a328fbc9 100644 --- a/site-new/src/pages/component-guide/import-src.mdx +++ b/site-new/src/pages/component-guide/import-src.mdx @@ -1,5 +1,5 @@ import React from "react"; -import { ImportSrc } from "@site/src/components/ImportSrc"; +import ImportSrc from "@site/src/components/ImportSrc"; # ImportSrc Component From 3be916487860f8351571f63b85ac734bc6481c4b Mon Sep 17 00:00:00 2001 From: dayhaysoos Date: Mon, 4 Nov 2024 09:35:43 -0500 Subject: [PATCH 5/6] fix api-details page --- .../src/pages/component-guide/api-details.mdx | 115 +++++++++++------- 1 file changed, 73 insertions(+), 42 deletions(-) diff --git a/site-new/src/pages/component-guide/api-details.mdx b/site-new/src/pages/component-guide/api-details.mdx index a318fa0df..eb32c0fe6 100644 --- a/site-new/src/pages/component-guide/api-details.mdx +++ b/site-new/src/pages/component-guide/api-details.mdx @@ -60,55 +60,86 @@ const apiDetailsData = [ Displays a list of fields with types and optional statuses. -```jsx -const details = [ - { - data: { - field: "email", - type: "string", - isOptional: false, - value: "user@example.com", +; -``` - - + ]} +/> + + ### 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: ( -
    -
  • Theme: Dark
    • -
  • Notifications: Enabled
    • -
- ), + +
  • Theme: Dark
    • +
  • Notifications: Enabled
    • + + ), + }, }, - }, -]; - -; -``` - - + ]} +/> + + +
  • Theme: Dark
    • +
  • Notifications: Enabled
    • + + ), + }, + }, + ]} +/>
    From 409735f5003e19de4108575d1db3b667db841659 Mon Sep 17 00:00:00 2001 From: dayhaysoos Date: Mon, 4 Nov 2024 09:58:33 -0500 Subject: [PATCH 6/6] remove backtick indicator from chat gpt lol --- site-new/src/pages/component-guide/import-src.mdx | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/site-new/src/pages/component-guide/import-src.mdx b/site-new/src/pages/component-guide/import-src.mdx index 7a328fbc9..3041ec653 100644 --- a/site-new/src/pages/component-guide/import-src.mdx +++ b/site-new/src/pages/component-guide/import-src.mdx @@ -16,10 +16,9 @@ import ImportSrc from "@site/src/components/ImportSrc"; To use the `ImportSrc` component, specify the `src` prop to indicate the desired CDN source. -THREE BACK TICKS HEREjsx title="ImportSrc Component" - +```jsx title="ImportSrc Component" -THREE BACK TICKS HERE +``` ## Examples @@ -27,10 +26,9 @@ THREE BACK TICKS HERE Generates an import statement for `Web5` using the Unpkg CDN. -THREE BACK TICKS HEREjsx - +```jsx -THREE BACK TICKS HERE +``` @@ -38,10 +36,9 @@ THREE BACK TICKS HERE Generates an import statement for `Web5` using the jsDelivr CDN. -THREE BACK TICKS HEREjsx - +```jsx -THREE BACK TICKS HERE +```