From 46014fb62e3a34b6a126546629b83d752cf1cfd4 Mon Sep 17 00:00:00 2001 From: susie-laptop Date: Wed, 21 May 2025 21:22:28 -0400 Subject: [PATCH] [dev]campaign detail --- package-lock.json | 36 +++++++++++++ package.json | 1 + src/pages/CampaignScript.jsx | 102 +++++++++++++++++++++++++++++++++-- src/styles/Brands.scss | 4 +- src/styles/Campaign.scss | 22 ++++++++ 5 files changed, 160 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1a74721..7db4de0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,6 +25,7 @@ "react-bootstrap-range-slider": "^3.0.8", "react-chartjs-2": "^5.3.0", "react-dom": "^19.1.0", + "react-dropzone": "^14.3.8", "react-redux": "^9.2.0", "react-router-dom": "^7.6.0", "redux-persist": "^6.0.0" @@ -1962,6 +1963,14 @@ "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", "dev": true }, + "node_modules/attr-accept": { + "version": "2.2.5", + "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.5.tgz", + "integrity": "sha512-0bDNnY/u6pPwHDMoF0FieU354oBi0a8rD9FcsLwzcGWbc8KS8KPIi7y+s13OlVY+gMWc/9xEMUgNE6Qm8ZllYQ==", + "engines": { + "node": ">=4" + } + }, "node_modules/balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", @@ -2790,6 +2799,17 @@ "node": ">=16.0.0" } }, + "node_modules/file-selector": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-2.1.2.tgz", + "integrity": "sha512-QgXo+mXTe8ljeqUFaX3QVHc5osSItJ/Km+xpocx0aSqWGMSCf6qYs/VnzZgS864Pjn5iceMRFigeAV7AfTlaig==", + "dependencies": { + "tslib": "^2.7.0" + }, + "engines": { + "node": ">= 12" + } + }, "node_modules/fill-range": { "version": "7.1.1", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz", @@ -4037,6 +4057,22 @@ "react": "^19.1.0" } }, + "node_modules/react-dropzone": { + "version": "14.3.8", + "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.3.8.tgz", + "integrity": "sha512-sBgODnq+lcA4P296DY4wacOZz3JFpD99fp+hb//iBO2HHnyeZU3FwWyXJ6salNpqQdsZrgMrotuko/BdJMV8Ug==", + "dependencies": { + "attr-accept": "^2.2.4", + "file-selector": "^2.1.0", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">= 10.13" + }, + "peerDependencies": { + "react": ">= 16.8 || 18.0.0" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/package.json b/package.json index f9ca440..f62ac6c 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "react-bootstrap-range-slider": "^3.0.8", "react-chartjs-2": "^5.3.0", "react-dom": "^19.1.0", + "react-dropzone": "^14.3.8", "react-redux": "^9.2.0", "react-router-dom": "^7.6.0", "redux-persist": "^6.0.0" diff --git a/src/pages/CampaignScript.jsx b/src/pages/CampaignScript.jsx index 3152304..487bb12 100644 --- a/src/pages/CampaignScript.jsx +++ b/src/pages/CampaignScript.jsx @@ -1,6 +1,8 @@ import { useDispatch, useSelector } from 'react-redux'; -import { useEffect, useState } from 'react'; -import { Form } from 'react-bootstrap'; +import { useCallback, useEffect, useState } from 'react'; +import { Button, Card, Col, Form, Row } from 'react-bootstrap'; +import { CloudUpload, Paperclip } from 'lucide-react'; +import { useDropzone } from 'react-dropzone'; export default function CampaignScript() { const dispatch = useDispatch(); @@ -75,7 +77,7 @@ export default function CampaignScript() { Campaigns & Collaborated Creators -
+
Video Posting Requirement
@@ -123,9 +125,101 @@ export default function CampaignScript() { 3.正确的hashtags 以及正确@官方账号' /> + + +
-
+
+
+
Script
+ +
+
+ + Version 1 + + + + Version 2 + + +
+
+ ) ); } + +const FileUpload = () => { + const [files, setFiles] = useState([]); + + const onDrop = useCallback((acceptedFiles) => { + setFiles((prev) => [...prev, ...acceptedFiles]); + }, []); + + const { getRootProps, getInputProps, isDragActive } = useDropzone({ + onDrop, + accept: { + 'application/pdf': [], + 'application/vnd.openxmlformats-officedocument.wordprocessingml.document': [], + 'image/png': [], + 'image/jpeg': [], + 'text/csv': [], + 'application/vnd.openxmlformats-officedocument.presentationml.presentation': [], + }, + }); + + const renderFileIcon = (file) => { + if (file.name.endsWith('.pdf')) return ; + if (file.name.endsWith('.docx')) return ; + return ; + }; + + return ( + + +
Documents Upload
+
+ +
+ + Drop files here +

Supported format: PNG, JPG, CSV, PDF, DOCX, PPTX

+

OR

+ Browse files +
+
+ + + +
Uploaded Files
+ {files.length === 0 &&
No files uploaded.
} + {files.map((file, index) => ( +
+ {renderFileIcon(file)} + + {file.name} + +
+ ))} + + + ); +}; diff --git a/src/styles/Brands.scss b/src/styles/Brands.scss index ae5d34e..66cc522 100644 --- a/src/styles/Brands.scss +++ b/src/styles/Brands.scss @@ -51,7 +51,9 @@ } } } - +.brand-tab-switches { + margin: 1rem 0; +} .add-brand-form { .button-group { display: flex; diff --git a/src/styles/Campaign.scss b/src/styles/Campaign.scss index 53430d7..87d72db 100644 --- a/src/styles/Campaign.scss +++ b/src/styles/Campaign.scss @@ -71,6 +71,8 @@ display: flex; flex-flow: column nowrap; gap: 0.5rem; + padding-bottom: 1rem; + border-bottom: 1px solid $neutral-200; .form-header { font-size: 1.25rem; @@ -80,6 +82,26 @@ color: $neutral-700; font-weight: 700; margin: 0; + margin-bottom: 0.25rem; + } + } + .product-ai-script { + padding: 1rem 0; + .header { + display: flex; + flex-flow: row nowrap; + justify-content: space-between; + align-items: center; + .title { + font-weight: 700; + font-size: 1.125rem; + } + } + .form-label { + color: $neutral-700; + font-weight: 700; + margin: 0; + margin-bottom: 0.25rem; } } }