diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/Channels.tsx b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/Channels.tsx index c9f33c4c3eb..3b7b62b1670 100644 --- a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/Channels.tsx +++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/Channels.tsx @@ -16,6 +16,7 @@ import { } from '~/marketing/components'; import { useChannels } from './useChannels'; import './Channels.scss'; +import { InstalledChannelCardBody } from './InstalledChannelCardBody'; export const Channels = () => { const { @@ -90,10 +91,23 @@ export const Channels = () => { { /* TODO: registered channels here. */ } + { registeredChannels.map( ( el, idx ) => { + return ( + + + { idx < registeredChannels.length - 1 && ( + + ) } + + ); + } ) } { /* TODO: recommended channels here. */ } { recommendedChannels.length > 0 && ( - recommended + <> + + recommended + ) } ); diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/InstalledChannelCardBody.scss b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/InstalledChannelCardBody.scss new file mode 100644 index 00000000000..2f710f93e97 --- /dev/null +++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/InstalledChannelCardBody.scss @@ -0,0 +1,2 @@ +.woocommerce-marketing-installed-channel-card-body { +} diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/InstalledChannelCardBody.tsx b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/InstalledChannelCardBody.tsx new file mode 100644 index 00000000000..03daeed32ff --- /dev/null +++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/InstalledChannelCardBody.tsx @@ -0,0 +1,24 @@ +/** + * External dependencies + */ +import { CardBody } from '@wordpress/components'; + +/** + * Internal dependencies + */ +import { InstalledChannel } from '~/marketing/types'; +import './InstalledChannelCardBody.scss'; + +type InstalledChannelCardBodyProps = { + installedChannel: InstalledChannel; +}; + +export const InstalledChannelCardBody: React.FC< + InstalledChannelCardBodyProps +> = ( { installedChannel } ) => { + return ( + + InstalledChannelCardBody + + ); +};