chore: initialize tuhui repository

frontend/src/components/Categories.jsx

@@ -0,0 +1,67 @@
+import { useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Card, Button } from 'antd';
+import { RightOutlined } from '@ant-design/icons';
+import './Categories.css';
+
+const Categories = () => {
+  const scrollRef = useRef(null);
+  const navigate = useNavigate();
+
+  const categories = [
+    { name: '活动', count: '408131', gradient: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)' },
+    { name: '中式', count: '105545', gradient: 'linear-gradient(135deg, #c94b4b 0%, #4b134f 100%)' },
+    { name: '直播', count: '35429', gradient: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)' },
+    { name: '旅游', count: '97826', gradient: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)' },
+    { name: '周年庆', count: '15868', gradient: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)' },
+    { name: '长图', count: '130856', gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' },
+    { name: '价值点', count: '214448', gradient: 'linear-gradient(135deg, #0c3483 0%, #a2b6df 100%)' },
+    { name: '酒吧', count: '36397', gradient: 'linear-gradient(135deg, #ff6b35 0%, #ff8c42 100%)' },
+  ];
+
+  const scroll = (direction) => {
+    if (scrollRef.current) {
+      const scrollAmount = direction === 'left' ? -300 : 300;
+      scrollRef.current.scrollBy({ left: scrollAmount, behavior: 'smooth' });
+    }
+  };
+
+  const handleCategoryClick = (categoryName) => {
+    navigate(`/category/${categoryName}`);
+  };
+
+  return (
+    <section className="categories">
+      <div className="categories-container">
+        <div className="categories-scroll" ref={scrollRef}>
+          {categories.map((cat, index) => (
+            <div 
+              key={cat.name} 
+              className="category-card" 
+              style={{ '--delay': `${index * 0.1}s` }}
+              onClick={() => handleCategoryClick(cat.name)}
+            >
+              <div className="category-image" style={{ background: cat.gradient }}>
+                <div className="category-overlay">
+                  <span className="category-icon">{cat.name.charAt(0)}</span>
+                </div>
+              </div>
+              <div className="category-info">
+                <span className="category-name">{cat.name}</span>
+                <span className="category-count">{cat.count} 张</span>
+              </div>
+            </div>
+          ))}
+        </div>
+        <Button 
+          className="scroll-btn scroll-btn-right" 
+          shape="circle" 
+          icon={<RightOutlined />}
+          onClick={() => scroll('right')}
+        />
+      </div>
+    </section>
+  );
+};
+
+export default Categories;