mirror of
https://github.com/Funkoala14/CreatorCenter_OOIN.git
synced 2025-06-07 12:28:15 +08:00
[dev]campaign detail
This commit is contained in:
parent
8a6c6c27b4
commit
46014fb62e
36
package-lock.json
generated
36
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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
|
||||
</div>
|
||||
</div>
|
||||
<div className='product-script-video-req'>
|
||||
<Card className='product-script-video-req'>
|
||||
<Form className='video-req-form'>
|
||||
<div className='form-header'>Video Posting Requirement</div>
|
||||
<Form.Group>
|
||||
@ -123,9 +125,101 @@ export default function CampaignScript() {
|
||||
3.正确的hashtags 以及正确@官方账号'
|
||||
/>
|
||||
</Form.Group>
|
||||
<Form.Group className='upload-group'>
|
||||
<FileUpload />
|
||||
</Form.Group>
|
||||
</Form>
|
||||
</div>
|
||||
<div className='product-ai-script'>
|
||||
<div className='header'>
|
||||
<div className='title'>Script</div>
|
||||
<Button variant='primary' className='generate-btn'>
|
||||
AI Generate
|
||||
</Button>
|
||||
</div>
|
||||
<Form className='script-versions'>
|
||||
<Form.Group>
|
||||
<Form.Label>Version 1</Form.Label>
|
||||
<Form.Control type='textarea' as='textarea' rows={4} />
|
||||
</Form.Group>
|
||||
<Form.Group>
|
||||
<Form.Label>Version 2</Form.Label>
|
||||
<Form.Control type='textarea' as='textarea' rows={4} />
|
||||
</Form.Group>
|
||||
</Form>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
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 <FaFilePdf size={24} color='#6366f1' className='me-2' />;
|
||||
if (file.name.endsWith('.docx')) return <FaFileWord size={24} color='#6366f1' className='me-2' />;
|
||||
return <Paperclip />;
|
||||
};
|
||||
|
||||
return (
|
||||
<Row>
|
||||
<Col md={6}>
|
||||
<div className='form-label'>Documents Upload</div>
|
||||
<div
|
||||
{...getRootProps()}
|
||||
style={{
|
||||
border: '2px dashed #BCC1CAFF',
|
||||
textAlign: 'center',
|
||||
padding: '24px',
|
||||
cursor: 'pointer',
|
||||
borderRadius: '10px',
|
||||
}}
|
||||
>
|
||||
<input {...getInputProps()} />
|
||||
<div className='d-flex flex-column align-items-center gap-1'>
|
||||
<CloudUpload size={60} color='#6E7787FF' />
|
||||
<strong>Drop files here</strong>
|
||||
<p className='text-muted m-0'>Supported format: PNG, JPG, CSV, PDF, DOCX, PPTX</p>
|
||||
<p className='text-muted fw-bold m-0'>OR</p>
|
||||
<span style={{ color: '#6366f1', textDecoration: 'underline' }}>Browse files</span>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
|
||||
<Col md={6}>
|
||||
<div className='form-label'>Uploaded Files</div>
|
||||
{files.length === 0 && <div className='text-muted'>No files uploaded.</div>}
|
||||
{files.map((file, index) => (
|
||||
<div key={index} className='d-flex align-items-center my-2'>
|
||||
{renderFileIcon(file)}
|
||||
<a
|
||||
href={URL.createObjectURL(file)}
|
||||
target='_blank'
|
||||
rel='noreferrer'
|
||||
className='text-primary text-decoration-none'
|
||||
>
|
||||
{file.name}
|
||||
</a>
|
||||
</div>
|
||||
))}
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
};
|
||||
|
||||
@ -51,7 +51,9 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.brand-tab-switches {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
.add-brand-form {
|
||||
.button-group {
|
||||
display: flex;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user