Giới thiệu Ant Design: Hệ thống thiết kế UI dành cho Website

import { Button } from 'antd';

// ------------------------------------------

function ExampleButtons() {
  return (
    <div>
      <Button type="primary">Primary</Button>
      <Button>Default</Button>
      <Button type="dashed">Dashed</Button>
      <Button type="text">Text</Button>
      <Button type="link">Link</Button>
    </div>
  );
}

import { Button } from 'antd';
import { SearchOutlined } from '@ant-design/icons';

// ------------------------------------------------

function ExampleIconButton() {
  return (
    <Button type="primary" icon={<SearchOutlined />} loading>
      Tìm kiếm
    </Button>
  );
}

import { Input } from 'antd';

// -------------------------------------------------------

function ExampleInputs() {
  return (
    <div>
      <Input placeholder="Nhập nội dung..." style={{ width: 200 }} />
      <Input addonBefore="http://" addonAfter=".com" defaultValue="mysite" style={{ width: 300 }} />
      <Input.Password placeholder="Nhập mật khẩu" style={{ width: 200 }} />
    </div>
  );
}

import { Form, Input, Button } from 'antd';

// ------------------------------------------------

function ExampleForm() {
  const [form] = Form.useForm();
  
  const onFinish = (values) => {
    console.log('Form data:', values);
  };

  return (
    <Form form={form} onFinish={onFinish} layout="vertical" style={{ width: 300 }}>
      <Form.Item name="username" label="Tên đăng nhập" 
        rules={[{ required: true, message: 'Vui lòng nhập tên đăng nhập!' }]}>
        <Input />
      </Form.Item>

      <Form.Item name="password" label="Mật khẩu" 
        rules={[{ required: true, message: 'Vui lòng nhập mật khẩu!' }]}>
        <Input.Password />
      </Form.Item>

      <Form.Item>
        <Button type="primary" htmlType="submit">Đăng nhập</Button>
      </Form.Item>
    </Form>
  );
}

import { Layout, Menu } from 'antd';
const { Header, Content, Footer, Sider } = Layout;

// -------------------------------------------------

function ExampleLayout() {
  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider>
        <div style={{ color: '#fff', textAlign: 'center', padding: '20px 0' }}>Logo</div>
        <Menu theme="dark" mode="inline"
          items={[
            { key: '1', label: 'Trang chủ' },
            { key: '2', label: 'Người dùng' },
            { key: '3', label: 'Cài đặt' },
          ]}
        />
      </Sider>
      <Layout>
        <Header style={{ background: '#fff', paddingLeft: 20 }}>Header</Header>
        <Content style={{ margin: 20, background: '#fff', padding: 20 }}>
          Nội dung chính
        </Content>
        <Footer style={{ textAlign: 'center' }}>Ant Design ©2023 Created by Ant UED</Footer>
      </Layout>
    </Layout>
  );
}

import { Breadcrumb } from 'antd';

// ---------------------------------------------

function ExampleBreadcrumb() {
  return (
    <Breadcrumb style={{ margin: '16px 0' }}>
      <Breadcrumb.Item>Trang chủ</Breadcrumb.Item>
      <Breadcrumb.Item>Danh sách</Breadcrumb.Item>
      <Breadcrumb.Item>Chi tiết</Breadcrumb.Item>
    </Breadcrumb>
  );
}

import { useState } from 'react';
import { Modal, Button } from 'antd';

// ----------------------------------------------

function ExampleModal() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setOpen(true)}>Mở Modal</Button>
      <Modal title="Thông báo" open={open} onOk={() => setOpen(false)} onCancel={() => setOpen(false)}>
        <p>Nội dung trong Modal</p>
      </Modal>
    </>
  );
}

import { Table } from 'antd';

// --------------------------------------------------------

const columns = [
  { title: 'Tên', dataIndex: 'name', key: 'name', sorter: (a,b) => a.name.localeCompare(b.name) },
  { title: 'Tuổi', dataIndex: 'age', key: 'age' },
  { title: 'Địa chỉ', dataIndex: 'address', key: 'address' },
];

const data = [
  { key:1, name:'Vy', age:23, address:'VietNam' },
  { key:2, name:'200Lab', age:100, address:'70 Huỳnh Văn Bánh, Phú Nhuận' },
  { key:3, name:'Thanh', age:22, address:'HCM' },
];

function ExampleTable() {
  return <Table columns={columns} dataSource={data} />;
}

import { ConfigProvider } from 'antd';

// ------------------------------------

function ThemedApp() {
  return (
    <ConfigProvider
      theme={{
        token: {
          colorPrimary: '#1DA57A',
          borderRadius: 4,
        },
      }}
    >
      <App />
    </ConfigProvider>
  );
}

// .babelrc
{
  "plugins": [
    ["import", { "libraryName": "antd", "style": true }]
  ]
}

import React from 'react';
import { useForm, Controller } from 'react-hook-form';
import { Input, Button, Form } from 'antd';

// -----------------------------------------------------

function ExampleHookForm() {
  const { handleSubmit, control } = useForm({
    defaultValues: {
      username: '',
      password: ''
    }
  });

  const onSubmit = (data) => {
    console.log('Dữ liệu từ form:', data);
  };

  return (
    <Form layout="vertical" style={{ width: 300 }} onFinish={handleSubmit(onSubmit)}>
      <Form.Item label="Tên đăng nhập" required>
        <Controller
          name="username"
          control={control}
          rules={{ required: 'Vui lòng nhập tên đăng nhập!' }}
          render={({ field, fieldState }) => (
            <>
              <Input {...field} placeholder="Nhập tên đăng nhập" />
              {fieldState.error && (
                <div style={{ color: 'red' }}>{fieldState.error.message}</div>
              )}
            </>
          )}
        />
      </Form.Item>

      <Form.Item label="Mật khẩu" required>
        <Controller
          name="password"
          control={control}
          rules={{ required: 'Vui lòng nhập mật khẩu!' }}
          render={({ field, fieldState }) => (
            <>
              <Input.Password {...field} placeholder="Nhập mật khẩu" />
              {fieldState.error && (
                <div style={{ color: 'red' }}>{fieldState.error.message}</div>
              )}
            </>
          )}
        />
      </Form.Item>

      <Form.Item>
        <Button type="primary" htmlType="submit">Đăng nhập</Button>
      </Form.Item>
    </Form>
  );
}

export default ExampleHookForm;

import { Row, Col } from 'antd';

// -------------------------------------------------

function ResponsiveExample() {
  return (
    <Row gutter={[16,16]}>
      <Col xs={24} sm={12} md={8} lg={6}>Cột 1</Col>
      <Col xs={24} sm={12} md={8} lg={6}>Cột 2</Col>
      <Col xs={24} sm={12} md={8} lg={6}>Cột 3</Col>
      <Col xs={24} sm={12} md={8} lg={6}>Cột 4</Col>
    </Row>
  );
}

import { SmileOutlined } from '@ant-design/icons';

// ------------------------------------------------

function IconExample() {
  return <SmileOutlined style={{ fontSize: '24px', color: '#08c' }} />;
}