Display campaign data in table in Campaigns card.

plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/Campaigns.tsx

@@ -4,6 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { Button, Card, CardHeader, CardBody } from '@wordpress/components';
 import { Icon, megaphone } from '@wordpress/icons';
+import { Table } from '@woocommerce/components';
 
 /**
  * Internal dependencies
@@ -63,5 +64,39 @@ export const Campaigns = () => {
 		);
 	}
 
-	return <div>TODO: campaigns here.</div>;
+	return (
+		<Card className="woocommerce-marketing-campaigns-card">
+			<CardHeader>
+				<CardHeaderTitle>
+					{ __( 'Campaigns', 'woocommerce' ) }
+				</CardHeaderTitle>
+				<Button variant="secondary">
+					{ __( 'Create new campaign', 'woocommerce' ) }
+				</Button>
+			</CardHeader>
+			<Table
+				title={ __( 'Campaigns', 'woocommerce' ) }
+				showMenu={ false }
+				headers={ [
+					{
+						key: 'campaign',
+						label: __( 'Campaign', 'woocommerce' ),
+					},
+					{
+						key: 'cost',
+						label: __( 'Cost', 'woocommerce' ),
+					},
+				] }
+				ids={ data.map( ( el ) => el.id ) }
+				rows={ data.map( ( el ) => {
+					return [
+						{ display: <div>{ el.title }</div> },
+						{ display: el.cost },
+					];
+				} ) }
+				rowsPerPage={ 5 }
+				totalRows={ data.length }
+			/>
+		</Card>
+	);
 };

plugins/woocommerce-admin/client/marketing/overview-multichannel/Campaigns/useCampaigns.ts

@@ -1,10 +1,10 @@
-// TODO: testing for loading state.
+// // TODO: testing for loading state.
-export const useCampaigns = () => {
+// export const useCampaigns = () => {
-	return {
+// 	return {
-		loading: true,
+// 		loading: true,
-		data: [],
+// 		data: [],
-	};
+// 	};
-};
+// };
 
 // TODO: testing for empty data.
 // export const useCampaigns = () => {
@@ -13,3 +13,82 @@ export const useCampaigns = () => {
 // 		data: [],
 // 	};
 // };
+
+// TODO: testing with campaigns data.
+export const useCampaigns = () => {
+	return {
+		loading: false,
+		data: [
+			{
+				channelSlug: 'google-listings-and-ads',
+				channelName: 'Google Listings and Ads',
+				icon: 'https://woocommerce.com/wp-content/plugins/wccom-plugins/marketing-tab-rest-api/icons/google.svg',
+				id: 'gla-campaign-01',
+				title: 'Performance Max 01',
+				description: 'New Zealand',
+				cost: '$50',
+				manageUrl: 'https://www.google.com/manage-campaign',
+			},
+			{
+				channelSlug: 'google-listings-and-ads',
+				channelName: 'Google Listings and Ads',
+				icon: 'https://woocommerce.com/wp-content/plugins/wccom-plugins/marketing-tab-rest-api/icons/google.svg',
+				id: 'gla-campaign-02',
+				title: 'Performance Max 02',
+				description: 'New Zealand',
+				cost: '$50',
+				manageUrl: 'https://www.google.com/manage-campaign',
+			},
+			{
+				channelSlug: 'google-listings-and-ads',
+				channelName: 'Google Listings and Ads',
+				icon: 'https://woocommerce.com/wp-content/plugins/wccom-plugins/marketing-tab-rest-api/icons/google.svg',
+				id: 'gla-campaign-03',
+				title: 'Performance Max 03',
+				description: 'New Zealand',
+				cost: '$50',
+				manageUrl: 'https://www.google.com/manage-campaign',
+			},
+			{
+				channelSlug: 'google-listings-and-ads',
+				channelName: 'Google Listings and Ads',
+				icon: 'https://woocommerce.com/wp-content/plugins/wccom-plugins/marketing-tab-rest-api/icons/google.svg',
+				id: 'gla-campaign-04',
+				title: 'Performance Max 04',
+				description: 'New Zealand',
+				cost: '$50',
+				manageUrl: 'https://www.google.com/manage-campaign',
+			},
+			{
+				channelSlug: 'google-listings-and-ads',
+				channelName: 'Google Listings and Ads',
+				icon: 'https://woocommerce.com/wp-content/plugins/wccom-plugins/marketing-tab-rest-api/icons/google.svg',
+				id: 'gla-campaign-05',
+				title: 'Performance Max 05',
+				description: 'New Zealand',
+				cost: '$50',
+				manageUrl: 'https://www.google.com/manage-campaign',
+			},
+			{
+				channelSlug: 'google-listings-and-ads',
+				channelName: 'Google Listings and Ads',
+				icon: 'https://woocommerce.com/wp-content/plugins/wccom-plugins/marketing-tab-rest-api/icons/google.svg',
+				id: 'gla-campaign-06',
+				title: 'Performance Max 06',
+				description: 'New Zealand',
+				cost: '$50',
+				manageUrl: 'https://www.google.com/manage-campaign',
+			},
+			{
+				channelSlug: 'google-listings-and-ads',
+				channelName: 'Google Listings and Ads',
+				icon: 'https://woocommerce.com/wp-content/plugins/wccom-plugins/marketing-tab-rest-api/icons/google.svg',
+				id: 'gla-campaign-07',
+				title: 'Performance Max 07',
+				description: 'New Zealand',
+				cost: '$50',
+				manageUrl: 'https://www.google.com/manage-campaign',
+			},
+		],
+	};
+};