AIGC 系列之 AntDesign 组件生成

export interface ResponseDatasetMeta {
  code?: string;
  createdAt?: string;
  metaInfo?: string;
  name?: string;
  owner?: string;
  tenantId?: string;
  updatedAt?: string;
}

Your current role is:A code generator.
##
Here are your instructions:
1. Use AntDesign Component Library to create a component
2. Use TypeScript
3. Use React Hook Style
4. Generate the text start with ```tsx and end with ```
5. Export defined interface
6. Do not use `export default` syntax, use `export const` instead
7. add `'use client';` on the first line of the code
8. Use tailwind for classname, and do not use classname lib
Based on the text below work:
"""
{{user_defined_task}}
"""
##
 ``` typescript ``` 

Your current role is:A code generator.
##
Here are your instructions:
1. Use AntDesign Component Library to create a component
2. Use TypeScript
3. Use React Hook Style
4. Generate the text start with ```tsx and end with ```
5. Export defined interface
6. Do not use `export default` syntax, use `export const` instead
7. add `'use client';` on the first line of the code
8. Use tailwind for classname, and do not use classname lib
Based on the text below work:
"""
编写一个 HelloWorld 的按钮，点击后弹出你好世界的文字
"""
##
 ``` typescript ``` 

 
'use client';
 
import { Button } from 'antd';
import React, { FC } from 'react';
 
export interface HelloWorldButtonProps {
  onClick(): void;
}
 
const HelloWorldButton: FC<HelloWorldButtonProps> = ({ onClick }) => {
  return (
    <Button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" onClick={onClick}>
      Hello World
    </Button>
  );
};
 
export const HelloWorldButton;

Your current role is:A code generator.
##
Here are your instructions:
1. Use AntDesign Component Library to create a component
2. Use TypeScript
3. Use React Hook Style
4. Generate the text start with ```tsx and end with ```
5. Export defined interface
6. Do not use `export default` syntax, use `export const` instead
7. add `'use client';` on the first line of the code
8. Use tailwind for classname, and do not use classname lib
Based on the text below work:
"""
Write a DataSet management table with the following fields described by the interface below with the action column 'add' | 'remove' | 'detail'
"""
And here is your context:
"""
"""
export interface ResponseDatasetMeta {
  code?: string;
  createdAt?: string;
  metaInfo?: string;
  name?: string;
  owner?: string;
  tenantId?: string;
  updatedAt?: string;
}
"""
"""
##
 ``` typescript ``` 

'use client';
 
import { Table, Button } from 'antd';
import { PlusOutlined, DeleteOutlined, EyeOutlined } from '@ant-design/icons';
import { useState, useMemo } from 'react';
import classNames from 'classnames';
 
import { ResponseDatasetMeta } from './types';
 
export interface DatasetTableProps {
  datasets: ResponseDatasetMeta[];
  onAdd: () => void;
  onRemove: (id: string) => void;
  onDetail: (id: string) => void;
}
 
const DatasetTable = ({ datasets, onAdd, onRemove, onDetail }: DatasetTableProps) => {
  const [selectedRowKeys, setSelectedRowKeys] = useState<string[]>([]);
 
  const columns = useMemo(() => [
    {
      title: 'Code',
      dataIndex: 'code',
      key: 'code',
    },
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: 'Owner',
      dataIndex: 'owner',
      key: 'owner',
    },
    {
      title: 'Action',
      dataIndex: '',
      key: 'action',
      render: (text: string, record: ResponseDatasetMeta) => (
        <>
          <Button
            type="link"
            icon={<EyeOutlined />}
            className={classNames('text-blue-500', 'hover:text-blue-700')}
            onClick={() => onDetail(record.code)}
          />
          <Button
            type="link"
            icon={<DeleteOutlined />}
            className={classNames('text-red-500', 'hover:text-red-700')}
            onClick={() => onRemove(record.code)}
          />
        </>
      ),
    },
  ], [onDetail, onRemove]);
 
  const rowSelection = {
    selectedRowKeys,
    onChange: (keys: string[]) => {
      setSelectedRowKeys(keys);
    },
  };
 
  return (
    <>
      <div className="flex mb-4">
        <Button
          icon={<PlusOutlined />}
          onClick={onAdd}
          className="ml-auto"
        >
          Add Dataset
        </Button>
        <Button
          icon={<DeleteOutlined />}
          onClick={() => onRemove(selectedRowKeys.join(','))}
          disabled={selectedRowKeys.length === 0}
          className="ml-4"
        >
          Remove Selected
        </Button>
      </div>
      <Table
        columns={columns}
        dataSource={datasets}
        rowSelection={rowSelection}
        rowKey={(record) => record.code || ''}
      />
    </>
  );
};
 
export const DatasetTable;