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) => (
setActiveTab(index)}
>
{tab.title}
))}
{tabs.map((tab, index) => (
{/* 广告区域 */}
{/* 内容区域 */}
{tab.articles.map((article) => (
))}
{/* 导航按钮 */}
))}
);
};
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.xml https://www.ssgzf.cn/wp-sitemap-posts-page-1.xml https://www.ssgzf.cn/wp-sitemap-taxonomies-category-1.xml https://www.ssgzf.cn/wp-sitemap-taxonomies-post_tag-1.xml https://www.ssgzf.cn/wp-sitemap-users-1.xml