import { useState } from "react"; import { ChevronLeft, ChevronRight } from "lucide-react"; const XZCustomMultiPostsWidget = () => { const [activeTab, setActiveTab] = useState(0); // Mock data for tabs - matches WordPress widget structure const tabs = [ { title: "热门文章", articles: [ { id: 1, title: "西装搭配技巧全解析", image: "https://placehold.co/400x250?text=西装搭配", views: 1245 }, { id: 2, title: "职场着装礼仪指南", image: "https://placehold.co/400x250?text=职场礼仪", views: 987 }, { id: 3, title: "男士正装选购要点", image: "https://placehold.co/400x250?text=正装选购", views: 876 }, { id: 4, title: "女士商务套装搭配", image: "https://placehold.co/400x250?text=商务套装", views: 765 }, { id: 5, title: "面料知识入门", image: "https://placehold.co/400x250?text=面料知识", views: 654 }, { id: 6, title: "定制西装的注意事项", image: "https://placehold.co/400x250?text=定制西装", views: 543 } ], adContent: "
广告区域
" }, { title: "最新资讯", articles: [ { id: 7, title: "2023秋冬时装周回顾", image: "https://placehold.co/400x250?text=时装周", views: 1123 }, { id: 8, title: "可持续时尚趋势", image: "https://placehold.co/400x250?text=可持续时尚", views: 987 }, { id: 9, title: "智能面料技术进展", image: "https://placehold.co/400x250?text=智能面料", views: 876 }, { id: 10, title: "国内品牌国际化", image: "https://placehold.co/400x250?text=品牌国际化", views: 765 }, { id: 11, title: "时尚行业就业前景", image: "https://placehold.co/400x250?text=就业前景", views: 654 }, { id: 12, title: "跨界合作新案例", image: "https://placehold.co/400x250?text=跨界合作", views: 543 } ], adContent: "
广告区域2
" }, { title: "专题推荐", articles: [ { id: 13, title: "商务会议着装指南", image: "https://placehold.co/400x250?text=会议着装", views: 1023 }, { id: 14, title: "面试着装注意事项", image: "https://placehold.co/400x250?text=面试着装", views: 921 }, { id: 15, title: "高端定制体验分享", image: "https://placehold.co/400x250?text=定制体验", views: 876 }, { id: 16, title: "面料保养技巧", image: "https://placehold.co/400x250?text=面料保养", views: 765 }, { id: 17, title: "职场形象管理", image: "https://placehold.co/400x250?text=形象管理", views: 654 }, { id: 18, title: "国际品牌对比", image: "https://placehold.co/400x250?text=品牌对比", views: 543 } ], adContent: "
广告区域3
" } ]; const handlePrev = () => { const container = document.querySelector(`.xz-custom-swiper-wrapper-${activeTab}`); if (container) { container.scrollBy({ left: -300, behavior: 'smooth' }); } }; const handleNext = () => { const container = document.querySelector(`.xz-custom-swiper-wrapper-${activeTab}`); if (container) { container.scrollBy({ left: 300, behavior: 'smooth' }); } }; return (
{tabs.map((tab, index) => (
{/* 广告区域 */}
{/* 内容区域 */}
{tab.articles.map((article) => (
{article.title}

{article.title}

浏览 {article.views} · 阅读
))}
{/* 导航按钮 */}
))}
); }; export default XZCustomMultiPostsWidget;
Warning: Cannot modify header information - headers already sent by (output started at /www/wwwroot/www.ssgzf.cn/wp-content/themes/zibll/func.php:1) in /www/wwwroot/www.ssgzf.cn/wp-includes/sitemaps/class-wp-sitemaps-renderer.php on line 126
https://www.ssgzf.cn/wp-sitemap-posts-post-1.xmlhttps://www.ssgzf.cn/wp-sitemap-posts-page-1.xmlhttps://www.ssgzf.cn/wp-sitemap-taxonomies-category-1.xmlhttps://www.ssgzf.cn/wp-sitemap-taxonomies-post_tag-1.xmlhttps://www.ssgzf.cn/wp-sitemap-users-1.xml