+
+ );
+};
+
+export default Campaigns;
diff --git a/components/ui/campaigns/create.tsx b/components/ui/campaigns/create.tsx
new file mode 100644
index 0000000..1690097
--- /dev/null
+++ b/components/ui/campaigns/create.tsx
@@ -0,0 +1,387 @@
+import React, { useState } from 'react';
+import Head from 'next/head';
+import { RadioGroup, Radio, Input, Button } from '@nextui-org/react';
+const PencilIcon = () => {
+ return (
+
+ );
+};
+
+function CampaignSetup() {
+
+
+ const [budget, setBudget] = useState('$10.00 per day');
+ const [targetAudience, setTargetAudience] = useState({
+ locations: 'All countries and territories',
+ networks: 'Search Network, Display Network',
+ keywords: 'content marketing',
+ });
+ const [bid, setBid] = useState('AdWords automatically sets your bids to help you get as many clicks as possible within your budget.');
+ const [ad, setAd] = useState('test - test\nAd www.getcodeless.com');
+
+ const [showEditBudget, setShowEditBudget] = useState(false);
+ const [showEditTargetAudience, setShowEditTargetAudience] = useState(false);
+ const [showEditBid, setShowEditBid] = useState(false);
+ const [showEditAd, setShowEditAd] = useState(false);
+
+ const [location, setLocation] = useState('');
+
+
+ const handleLocationChange = (event: React.ChangeEvent
+
+
+
+
+
+
+
+ Campaigns
+ +Welcome, Xue!
+
+
+
+
+ handleChange(event, true)}
+ aria-label={formatDate(value)}
+ classNames={{
+ base: "max-w-md",
+ filler: "bg-orange-500"
+ }}
+
+ />
+
+
+
+
+
+
+
+
+
+
+ + Top Channels +
++ By Connections ,Revenue ,Speed +
+
+
+
+
+ Your First Campaign
+
+
Your First Campaign
++ A campaign focuses on a theme or a group of products. To create a campaign, you'll set a budget, choose your audience, and write your ad. Keep in mind, you won't be charged for selecting options, and you can always make changes later. +
+
+
+
+
+ {!showEditBudget && (
+
+
+
+
)}
+ {showEditBudget && (
+ {budget}
+
+
+
+ setBudget(e.target.value)} />
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+ {showEditTargetAudience && (
+ {targetAudience.locations}
+
+
+
+
+
+
+
+ )}
+
+
+
+
+
+
+
+ {location === 'custom-location' && (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
+ + + For example, a country, city, region, or postal code. + +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {targetAudience.networks}
+
+
+
+
+
+
+ {targetAudience.keywords}
+
+
+
+
+
+
+
+
+ {showEditBid && (
+ {bid}
+
+
+ setBid(e.target.value)} />
+
+
+ )}
+
+
+
+
+
+ {showEditAd && (
+ {ad}
+
+
+