diff --git a/components/Asyncapi3Comparison/Asyncapi3ChannelComparison.tsx b/components/Asyncapi3Comparison/Asyncapi3ChannelComparison.tsx new file mode 100644 index 00000000000..4b86855e035 --- /dev/null +++ b/components/Asyncapi3Comparison/Asyncapi3ChannelComparison.tsx @@ -0,0 +1,136 @@ +import React, { useState } from 'react'; + +export interface HoverState { + Paths: boolean; + PathItem: boolean; + Operation: boolean; + Message: boolean; +} + +export interface AsyncAPI3ChannelComparisonProps { + className?: string; +} + +/** + * @description Component to compare AsyncAPI 2.x and AsyncAPI 3.0 channels. + * @param {string} [props.className=''] - Additional CSS classes for styling. + */ +export default function Asyncapi3ChannelComparison({ className = '' }: AsyncAPI3ChannelComparisonProps) { + const [hoverState, setHoverState] = useState({ + Paths: false, + PathItem: false, + Operation: false, + Message: false + }); + + const handleMouseEnter = (key: keyof HoverState) => { + setHoverState((prevState) => ({ ...prevState, [key]: true })); + }; + + const handleMouseLeave = (key: keyof HoverState) => { + setHoverState((prevState) => ({ ...prevState, [key]: false })); + }; + + return ( +
+
+

AsyncAPI 2.x

+
+
handleMouseEnter('Paths')} + onMouseLeave={() => handleMouseLeave('Paths')} + > + Channels +
+
handleMouseEnter('PathItem')} + onMouseLeave={() => handleMouseLeave('PathItem')} + > + Channel Item +
+
handleMouseEnter('Operation')} + onMouseLeave={() => handleMouseLeave('Operation')} + > + Operation (Publish and Subscribe) +
+
+
handleMouseEnter('Message')} + onMouseLeave={() => handleMouseLeave('Message')} + > + Messages +
+ Message +
Headers
+
Payload
+
+
+
+
+
+
+
+
+
+
+
+
+

AsyncAPI 3.0

+
+
handleMouseEnter('Paths')} + onMouseLeave={() => handleMouseLeave('Paths')} + > + Channels +
handleMouseEnter('PathItem')} + onMouseLeave={() => handleMouseLeave('PathItem')} + > + Channel +
+
handleMouseEnter('Message')} + onMouseLeave={() => handleMouseLeave('Message')} + > + Messages +
+ Message +
Headers
+
Payload
+
+
+
+
+
+
handleMouseEnter('Operation')} + onMouseLeave={() => handleMouseLeave('Operation')} + > + Operations +
+
+ Operation +
+
+ action (send or receive) +
+
channel
+
messages
+
+
+
+
+
+
+
+ ); +} diff --git a/components/Asyncapi3Comparison/Asyncapi3IdAndAddressComparison.tsx b/components/Asyncapi3Comparison/Asyncapi3IdAndAddressComparison.tsx new file mode 100644 index 00000000000..14ec15ee2bf --- /dev/null +++ b/components/Asyncapi3Comparison/Asyncapi3IdAndAddressComparison.tsx @@ -0,0 +1,75 @@ +import React, { useState } from 'react'; + +export interface HoverState { + Paths: boolean; + PathItem: boolean; +} + +export interface AsyncAPI3IdAndAddressComparisonProps { + className?: string; +} + +/** + * @description Component for comparing AsyncAPI versions based on ID and address. + * @param {string} [props.className=''] - Additional CSS classes for styling. + */ +export default function Asyncapi3IdAndAddressComparison({ className = '' }: AsyncAPI3IdAndAddressComparisonProps) { + const [hoverState, setHoverState] = useState({ + Paths: false, + PathItem: false + }); + + const handleMouseEnter = (key: keyof HoverState) => { + setHoverState((prevState) => ({ ...prevState, [key]: true })); + }; + + const handleMouseLeave = (key: keyof HoverState) => { + setHoverState((prevState) => ({ ...prevState, [key]: false })); + }; + + return ( +
+
+

AsyncAPI 2.x

+
+
handleMouseEnter('Paths')} + onMouseLeave={() => handleMouseLeave('Paths')} + > + Channels +
handleMouseEnter('PathItem')} + onMouseLeave={() => handleMouseLeave('PathItem')} + > + Channel Item +
+
+
+
+
+

AsyncAPI 3.0

+
+
handleMouseEnter('Paths')} + onMouseLeave={() => handleMouseLeave('Paths')} + > + Channels +
handleMouseEnter('PathItem')} + onMouseLeave={() => handleMouseLeave('PathItem')} + > + Channel +
+
address
+
+
+
+
+
+
+ ); +} diff --git a/components/Asyncapi3Comparison/Asyncapi3MetaComparison.tsx b/components/Asyncapi3Comparison/Asyncapi3MetaComparison.tsx new file mode 100644 index 00000000000..a979c17f459 --- /dev/null +++ b/components/Asyncapi3Comparison/Asyncapi3MetaComparison.tsx @@ -0,0 +1,84 @@ +import React, { useState } from 'react'; + +export interface Asyncapi3MetaComparisonProps { + className?: string; +} + +export interface HoverState { + Info: boolean; + Tags: boolean; + External: boolean; +} + +/** + * @description React component for comparing AsyncAPI metadata between versions 2.x and 3.0. + * @param {string} [props.className=''] - Additional CSS classes for styling. + */ +export default function Asyncapi3MetaComparison({ className = '' }: Asyncapi3MetaComparisonProps) { + const [hoverState, setHoverState] = useState({ + Info: false, + Tags: false, + External: false + }); + + return ( +
+
+

AsyncAPI 2.x

+
+
setHoverState((prevState) => ({ ...prevState, Info: true }))} + onMouseLeave={() => setHoverState((prevState) => ({ ...prevState, Info: false }))} + > + Info +
+
+
setHoverState((prevState) => ({ ...prevState, Tags: true }))} + onMouseLeave={() => setHoverState((prevState) => ({ ...prevState, Tags: false }))} + > +

Tags

+
+
setHoverState((prevState) => ({ ...prevState, External: true }))} + onMouseLeave={() => setHoverState((prevState) => ({ ...prevState, External: false }))} + > +

External Docs

+
+
+
+
+
+

AsyncAPI 3.0

+
+
setHoverState((prevState) => ({ ...prevState, Info: true }))} + onMouseLeave={() => setHoverState((prevState) => ({ ...prevState, Info: false }))} + > + Info +
+
setHoverState((prevState) => ({ ...prevState, Tags: true }))} + onMouseLeave={() => setHoverState((prevState) => ({ ...prevState, Tags: false }))} + > +

Tags

+
+
setHoverState((prevState) => ({ ...prevState, External: true }))} + onMouseLeave={() => setHoverState((prevState) => ({ ...prevState, External: false }))} + > +

External Docs

+
+
+
+
+
+
+ ); +} diff --git a/components/Asyncapi3Comparison/Asyncapi3OperationComparison.tsx b/components/Asyncapi3Comparison/Asyncapi3OperationComparison.tsx new file mode 100644 index 00000000000..a2dee6abca2 --- /dev/null +++ b/components/Asyncapi3Comparison/Asyncapi3OperationComparison.tsx @@ -0,0 +1,48 @@ +import React from 'react'; + +export interface Asyncapi3OperationComparisonProps { + className?: string; +} + +/** + * @description React component for comparing AsyncAPI operations between versions 2.x and 3.0. + * @param {string} [props.className=''] - Additional CSS classes for styling. + */ +export default function Asyncapi3OperationComparison({ className = '' }: Asyncapi3OperationComparisonProps) { + return ( +
+
+

AsyncAPI 2.x

+
+
+ Channels +
+
+ Channel Item +
+
Operation (Publish and Subscribe)
+
+
+
+
+
+
+
+

AsyncAPI 3.0

+
+
+ Operations +
+
+ Operation +
+
action (send or receive)
+
+
+
+
+
+
+
+ ); +} diff --git a/components/Asyncapi3Comparison/Asyncapi3ParameterComparison.tsx b/components/Asyncapi3Comparison/Asyncapi3ParameterComparison.tsx new file mode 100644 index 00000000000..e5ad893aa02 --- /dev/null +++ b/components/Asyncapi3Comparison/Asyncapi3ParameterComparison.tsx @@ -0,0 +1,150 @@ +import React, { useState } from 'react'; + +export interface Asyncapi3ParameterComparisonProps { + className?: string; +} + +/** + * @description React component for comparing AsyncAPI parameters between versions 2.x and 3.0. + * @param {string} [props.className=''] - Additional CSS classes for styling. + */ +export default function Asyncapi3ParameterComparison({ className = '' }: Asyncapi3ParameterComparisonProps) { + const [hoverState, setHoverState] = useState({ + location: false, + description: false, + enum: false, + examples: false, + default: false + }); + + return ( +
+
+

AsyncAPI 2.x

+
+
+ components | channels +
+
+ parameters +
+
+ parameter +
+
setHoverState((prevState) => ({ ...prevState, location: true }))} + onMouseLeave={() => setHoverState((prevState) => ({ ...prevState, location: false }))} + > + location +
+
setHoverState((prevState) => ({ ...prevState, description: true }))} + onMouseLeave={() => setHoverState((prevState) => ({ ...prevState, description: false }))} + > + description +
+
+ schema +
+
type
+
setHoverState((prevState) => ({ ...prevState, enum: true }))} + onMouseLeave={() => setHoverState((prevState) => ({ ...prevState, enum: false }))} + > + enum +
+
setHoverState((prevState) => ({ ...prevState, examples: true }))} + onMouseLeave={() => setHoverState((prevState) => ({ ...prevState, examples: false }))} + > + examples +
+
setHoverState((prevState) => ({ ...prevState, default: true }))} + onMouseLeave={() => setHoverState((prevState) => ({ ...prevState, default: false }))} + > + default +
+
setHoverState((prevState) => ({ ...prevState, description: true }))} + onMouseLeave={() => setHoverState((prevState) => ({ ...prevState, description: false }))} + > + description +
+
pattern
+
multipleOf
+
And all other properties
+
+
+
+
+
+
+
+
+
+
+
+

AsyncAPI 3.0

+
+
+ components | channels +
+
+ parameters +
+
+ parameter +
+
setHoverState((prevState) => ({ ...prevState, location: true }))} + onMouseLeave={() => setHoverState((prevState) => ({ ...prevState, location: false }))} + > + location +
+
setHoverState((prevState) => ({ ...prevState, description: true }))} + onMouseLeave={() => setHoverState((prevState) => ({ ...prevState, description: false }))} + > + description +
+
setHoverState((prevState) => ({ ...prevState, enum: true }))} + onMouseLeave={() => setHoverState((prevState) => ({ ...prevState, enum: false }))} + > + enum +
+
setHoverState((prevState) => ({ ...prevState, examples: true }))} + onMouseLeave={() => setHoverState((prevState) => ({ ...prevState, examples: false }))} + > + examples +
+
setHoverState((prevState) => ({ ...prevState, default: true }))} + onMouseLeave={() => setHoverState((prevState) => ({ ...prevState, default: false }))} + > + default +
+
+
+
+
+
+
+
+
+
+ ); +} diff --git a/components/Asyncapi3Comparison/Asyncapi3SchemaFormatComparison.tsx b/components/Asyncapi3Comparison/Asyncapi3SchemaFormatComparison.tsx new file mode 100644 index 00000000000..baa19415bca --- /dev/null +++ b/components/Asyncapi3Comparison/Asyncapi3SchemaFormatComparison.tsx @@ -0,0 +1,108 @@ +import React, { useState } from 'react'; + +export interface Asyncapi3SchemaFormatComparisonProps { + className?: string; +} + +/** + * @description React component for comparing AsyncAPI schema formats between versions 2.x and 3.0. + * @param {string} [props.className=''] - Additional CSS classes for styling. + */ +export default function Asyncapi3SchemaFormatComparison({ className = '' }: Asyncapi3SchemaFormatComparisonProps) { + const [hoverState, setHoverState] = useState({ + SchemaFormat: false, + Payload: false, + Schema: false + }); + + return ( +
+
+

AsyncAPI 2.x

+
+
+ components | channels +
+
+ messages +
+
+ message +
+
setHoverState((prevState) => ({ ...prevState, SchemaFormat: true }))} + onMouseLeave={() => setHoverState((prevState) => ({ ...prevState, SchemaFormat: false }))} + > + schemaFormat +
+
setHoverState((prevState) => ({ ...prevState, Payload: true }))} + onMouseLeave={() => setHoverState((prevState) => ({ ...prevState, Payload: false }))} + > + payload +
+
setHoverState((prevState) => ({ ...prevState, Schema: true }))} + onMouseLeave={() => setHoverState((prevState) => ({ ...prevState, Schema: false }))} + > + schema +
+
+
+
+
+
+
+
+
+
+
+
+

AsyncAPI 3.0

+
+
+ components | channels +
+
+ messages +
+
+ message +
+
setHoverState((prevState) => ({ ...prevState, Payload: true }))} + onMouseLeave={() => setHoverState((prevState) => ({ ...prevState, Payload: false }))} + > + payload +
+
setHoverState((prevState) => ({ ...prevState, SchemaFormat: true }))} + onMouseLeave={() => setHoverState((prevState) => ({ ...prevState, SchemaFormat: false }))} + > + schemaFormat +
+
setHoverState((prevState) => ({ ...prevState, Schema: true }))} + onMouseLeave={() => setHoverState((prevState) => ({ ...prevState, Schema: false }))} + > + schema +
+
+
+
+
+
+
+
+
+
+
+
+ ); +} diff --git a/components/Asyncapi3Comparison/Asyncapi3ServerComparison.tsx b/components/Asyncapi3Comparison/Asyncapi3ServerComparison.tsx new file mode 100644 index 00000000000..bbc5b74e314 --- /dev/null +++ b/components/Asyncapi3Comparison/Asyncapi3ServerComparison.tsx @@ -0,0 +1,77 @@ +import React, { useState } from 'react'; + +export interface Asyncapi3ServerComparisonProps { + className?: string; +} + +export interface HoverState { + Host: boolean; + Path: boolean; +} + +/** + * @description React component for comparing AsyncAPI servers between versions 2.x and 3.0. + * @param {string} [props.className=''] - Additional CSS classes for styling. + */ +export default function Asyncapi3ServerComparison({ className = '' }: Asyncapi3ServerComparisonProps) { + const [hoverState, setHoverState] = useState({ + Host: false, + Path: false + }); + + return ( +
+
+

AsyncAPI 2.x

+
+
+ Servers +
+
+ Server +
+
setHoverState((prevState) => ({ ...prevState, Host: true, Path: true }))} + onMouseLeave={() => setHoverState((prevState) => ({ ...prevState, Host: false, Path: false }))} + > +

Url

+
+
+
+
+
+
+
+
+

AsyncAPI 3.0

+
+
+ Servers +
+
+ Server +
+
setHoverState((prevState) => ({ ...prevState, Host: true }))} + onMouseLeave={() => setHoverState((prevState) => ({ ...prevState, Host: false }))} + > +

Host

+
+
setHoverState((prevState) => ({ ...prevState, Path: true }))} + onMouseLeave={() => setHoverState((prevState) => ({ ...prevState, Path: false }))} + > +

Pathname

+
+
+
+
+
+
+
+
+ ); +} diff --git a/components/tabs/Tabs.tsx b/components/tabs/Tabs.tsx new file mode 100644 index 00000000000..836f73e22a9 --- /dev/null +++ b/components/tabs/Tabs.tsx @@ -0,0 +1,49 @@ +import React, { useState } from 'react'; + +export interface Tab { + id: string; + content: React.ReactNode; +} + +export interface TabsProps { + tabs?: Tab[]; + className?: string; +} + +/** + * @description Tabs component to display a set of tabs with associated content. + * @param {Tab[]} [tabs=[]] - An array of tab objects. + * @param {string} [className=''] - Additional CSS classes to apply to the Tabs component. + */ +export default function Tabs({ tabs = [], className = '' }: TabsProps): React.ReactElement { + const filteredTabs = tabs.filter(Boolean); + const [showTab, setShowTab] = useState(filteredTabs[0]?.id); + + const tabItemsCommonClassNames = + 'inline-block border-teal-300 pt-3 pb-1 px-2 mx-px cursor-pointer hover:text-teal-300 font-bold'; + const tabItemsClassNames = `${tabItemsCommonClassNames} text-gray-300`; + const tabItemsActiveClassNames = `${tabItemsCommonClassNames} text-teal-300 border-b-2`; + + return ( +
+
    + {filteredTabs.map(({ id }) => ( +
  • setShowTab(id)} + className={id === showTab ? tabItemsActiveClassNames : tabItemsClassNames} + > + {id} +
    • + ))} +
+
+ {filteredTabs.map(({ content, id }) => ( +
+ {content} +
+ ))} +
+
+ ); +}