src/feature/home/Category.tsx

import React from 'react';
import { Row, Col, Typography, Divider } from 'antd';
import type { CategoryProps } from './types';
import WorkCard from './WorkCard';

const { Title } = Typography;

const Category: React.FC<CategoryProps> = ({ section, artworks }) => {
    // 如果没有作品，不渲染该分区
    if (artworks.length === 0) {
        return null;
    }

    return (
        <div style={{ marginBottom: '48px' }}>
            <Title level={2} style={{ marginBottom: '24px', color: '#1890ff' }}>
                {section.name}
            </Title>
            <Divider style={{ margin: '16px 0 24px 0' }} />

            <Row gutter={[16, 16]}>
                {artworks.map((artwork) => (
                    <Col
                        key={artwork.id}
                        xs={24}
                        sm={12}
                        md={8}
                        lg={6}
                        xl={6}
                    >
                        <WorkCard artwork={artwork} />
                    </Col>
                ))}
            </Row>
        </div>
    );
};

export default Category;