API/API-TRM/WZY/xhs_front/src/components/HomeFeed.jsx

import React, { useState } from 'react'
import { ThumbsUp } from 'lucide-react'
import '../style/HomeFeed.css'

const mockItems = Array.from({ length: 20 }).map((_, i) => ({
  id: i,
  title: `示例标题 ${i + 1}`,
  author: `作者 ${i + 1}`,
  avatar: `https://i.pravatar.cc/40?img=${i + 1}`,
  img: `https://picsum.photos/seed/${i}/300/200`,
  likes: Math.floor(Math.random() * 1000)
}))

const categories = [
  '推荐','穿搭','美食','彩妆','影视',
  '职场','情感','家居','游戏','旅行','健身'
]

export default function HomeFeed() {
  const [activeCat, setActiveCat] = useState('推荐')
  const items = mockItems.filter(() => true) // 可按 activeCat 过滤

  return (
    <div className="home-feed">
      {/* 顶部分类 */}
      <nav className="feed-tabs">
        {categories.map(cat => (
          <button
            key={cat}
            className={cat === activeCat ? 'tab active' : 'tab'}
            onClick={() => setActiveCat(cat)}
          >
            {cat}
          </button>
        ))}
      </nav>

      {/* 瀑布流卡片区 */}
      <div className="feed-grid">
        {items.map(item => (
          <div key={item.id} className="feed-card">
            {/* 封面图 */}
            <img
              className="card-img"
              src={item.img}
              alt={item.title}
            />

            {/* 标题 */}
            <h3 className="card-title">{item.title}</h3>

            {/* 底部作者 + 点赞 */}
            <div className="card-footer">
              <div className="card-author">
                <img
                  className="avatar"
                  src={item.avatar}
                  alt={item.author}
                />
                <span className="username">{item.author}</span>
              </div>
              <div className="card-likes">
                <ThumbsUp size={16} />
                <span className="likes-count">{item.likes}</span>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}