From 930c21ff2fd90875e5907b340cffedc6fee36cdd Mon Sep 17 00:00:00 2001 From: susie-laptop Date: Wed, 4 Jun 2025 20:14:00 -0400 Subject: [PATCH] [dev]discovery session detail --- src/components/DiscoveryList.jsx | 46 +++++-- src/components/SessionResult.jsx | 8 ++ src/lib/utils.js | 13 ++ src/styles/custom-theme.scss | 1 + src/styles/global.scss | 200 +++++++++++++++++++++++++++---- 5 files changed, 231 insertions(+), 37 deletions(-) create mode 100644 src/components/SessionResult.jsx diff --git a/src/components/DiscoveryList.jsx b/src/components/DiscoveryList.jsx index 218e136..5ac9d21 100644 --- a/src/components/DiscoveryList.jsx +++ b/src/components/DiscoveryList.jsx @@ -1,17 +1,27 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Table } from 'react-bootstrap'; +import { useState } from 'react'; +import { Button, Modal, Table } from 'react-bootstrap'; import { useSelector, useDispatch } from 'react-redux'; import { Link } from 'react-router-dom'; +import { getCategoryClassName } from '../lib/utils'; export default function DiscoveryList() { const dispatch = useDispatch(); const { sessions, error, status } = useSelector((state) => state.discovery); + const [showSessionResultModal, setShowSessionResultModal] = useState(false); + const [selectedSession, setSelectedSession] = useState(null); + // 如果加载失败，显示错误信息 if (status === 'failed') { return
{error || 'Failed to load creators. Please try again later.'}
; } + const handleViewSession = (session) => { + setSelectedSession(session); + setShowSessionResultModal(true); + } + return (
@@ -39,7 +49,7 @@ export default function DiscoveryList() { )) @@ -52,17 +62,25 @@ export default function DiscoveryList() { )}
{session.avg_video_views} {session.date_created} - View +
+ setShowSessionResultModal(false)} />
); } -function SeesionResultModal({ session }) { - +function SeesionResultModal({ session, show, onHide }) { + if (!show) return null; + const { creators } = session || {}; + console.log(creators); return ( -
-
- - + 0 ? 'xl' : ''}> + + Session Result + + + { + creators.length > 0 ? ( +
+ )) )} - -
Creator @@ -149,9 +167,13 @@ function SeesionResultModal({ session }) {
-
-
+ + + ) : ( +
No creators found in this session.
+ ) + } + + ) } \ No newline at end of file diff --git a/src/components/SessionResult.jsx b/src/components/SessionResult.jsx new file mode 100644 index 0000000..fd33467 --- /dev/null +++ b/src/components/SessionResult.jsx @@ -0,0 +1,8 @@ +export default function SessionResult() { + return ( +
+

Session Result

+
+ ); +} + diff --git a/src/lib/utils.js b/src/lib/utils.js index ca2033e..fa11c24 100644 --- a/src/lib/utils.js +++ b/src/lib/utils.js @@ -38,3 +38,16 @@ export function formatNumber(number, decimals = 0, decimalPoint = '.', thousands const n = Number(number).toFixed(decimals); return n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, thousandsSeparator); } + +export const getCategoryClassName = (category) => { + const categoryMap = { + 'Phones & Electronics': 'phones', + 'Womenswear & Underwear': 'women', + 'Sports & Outdoor': 'sports', + 'Food & Beverage': 'food', + Health: 'health', + Kitchenware: 'kitchen', + }; + + return categoryMap[category] || ''; +}; diff --git a/src/styles/custom-theme.scss b/src/styles/custom-theme.scss index 301853c..c2aa594 100644 --- a/src/styles/custom-theme.scss +++ b/src/styles/custom-theme.scss @@ -134,3 +134,4 @@ a { box-shadow: 0px 0px 1px #171a1f12, 0px 0px 2px #171a1f1f; /* shadow-xs */ padding: 1rem; } + diff --git a/src/styles/global.scss b/src/styles/global.scss index 762f0a9..3545fa7 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -5,38 +5,188 @@ @import './variables'; .breadcrumb { - font-weight: 700; - a { - color: var(--bs-body-color) !important; - } + font-weight: 700; + a { + color: var(--bs-body-color) !important; + } } .function-bar { - display: flex; - flex-flow: row wrap; - align-items: center; - gap: 1rem; - justify-content: flex-end; - float: right; - button { - display: flex; - align-items: center; - gap: 0.25rem; - } + display: flex; + flex-flow: row wrap; + align-items: center; + gap: 1rem; + justify-content: flex-end; + float: right; + button { + display: flex; + align-items: center; + gap: 0.25rem; + } } .back-button { - cursor: pointer; + cursor: pointer; } .btn { - display: inline-flex !important; - align-items: center; - justify-content: center; + display: inline-flex !important; + align-items: center; + justify-content: center; } .back-button { - width: max-content; - display: flex; - align-items: center; - gap: 0.5rem; - cursor: pointer; -} \ No newline at end of file + width: max-content; + display: flex; + align-items: center; + gap: 0.5rem; + cursor: pointer; +} + +.creator-database-table { + position: relative; + + .creator-cell { + .creator-avatar { + position: relative; + margin-right: 12px; + flex-shrink: 0; + + img { + display: block; + width: 36px; + height: 36px; + border-radius: 50%; + object-fit: cover; + border: 2px solid #e2e8f0; + } + + .verified-badge { + position: absolute; + bottom: 0; + right: 0; + background-color: #10b981; + color: white; + border-radius: 50%; + width: 10px; + height: 10px; + font-size: 8px; + display: flex; + align-items: center; + justify-content: center; + } + } + + .creator-name { + font-weight: 700; + color: #090909; + white-space: nowrap; + } + } + + .category-pill { + display: inline-block; + padding: 0.25rem 0.75rem; + border-radius: 1rem; + background-color: #f8f9fa; + font-size: 0.75rem; + color: #495057; + white-space: nowrap; + + &.phones { + background-color: rgba(99, 102, 241, 0.1); + color: #6366f1; + } + + &.women { + background-color: rgba(244, 114, 182, 0.1); + color: #f472b6; + } + + &.sports { + background-color: rgba(52, 211, 153, 0.1); + color: #34d399; + } + + &.food { + background-color: rgba(251, 146, 60, 0.1); + color: #fb923c; + } + + &.health { + background-color: rgba(56, 189, 248, 0.1); + color: #38bdf8; + } + + &.kitchen { + background-color: rgba(168, 85, 247, 0.1); + color: #a855f7; + } + } + + .level-badge { + display: inline-block; + padding: 0.25rem 0.75rem; + border-radius: 1rem; + font-size: 0.75rem; + white-space: nowrap; + + &.ecommerce-level { + background-color: rgba(99, 102, 241, 0.1); + color: #6366f1; + } + + &.exposure-level { + background-color: rgba(14, 165, 233, 0.1); + color: #0ea5e9; + + &[data-level^='KOC'] { + background-color: rgba(52, 211, 153, 0.1); + color: #34d399; + } + + &[data-level^='KOL'] { + background-color: rgba(251, 113, 133, 0.1); + color: #fb7185; + } + } + } + + .colored-dot { + width: 8px; + height: 8px; + border-radius: 50%; + display: inline-block; + + &.blue { + background-color: #6366f1; + } + } + + .social-icon { + width: 24px; + height: 24px; + display: flex; + align-items: center; + justify-content: center; + + &.tiktok-icon { + font-size: 14px; + color: #000000; + } + } + + .table-container { + position: relative; + + .sticky-header { + position: sticky; + top: 0; + z-index: 1; + background: white; + + th { + background: white; + border-bottom: 2px solid #dee2e6; + } + } + } +}