<commit_before>import * as React from 'react';
import classNames from 'classnames';
import { FormattedMessage, useIntl } from 'react-intl';
import { Row, Col, Typography } from 'antd';
import './RecommendPage.less';

const { Title, Paragraph } = Typography;

interface Recommend {
  title: string;
  img: string;
  href: string;
  popularize?: boolean;
  description: string;
}

const LIST_CN: Recommend[] = [
  {
    title: '树形控件在生产力工具中的设计',
    description: '惊！半年实践血泪史，3000 字深度好文，一个爱树的设计师手把手教你如何设计「树 」！',
    img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Z4eXS55fMigAAAAAAAAAAAAAARQnAQ',
    href: 'https://zhuanlan.zhihu.com/p/260068653',
    popularize: true,
  },
  {
    title: '或许这就是下一代组件库',
    description: '随着 React hooks、Vue composition API 的推出，或许组件库有了新的突破点。',
    img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*SU6hQ5jHVEsAAAAAAAAAAAAAARQnAQ',
    href: 'https://zhuanlan.zhihu.com/p/252824872',
  },
  {
    title: 'Ant Design 4.0 的一些杂事儿 - VirtualList 篇',
    description:
      '在 React 中，我们常说不太需要关注性能问题。然而作为组件库，这些事你就不得不考虑一下。',
    img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*ULOBQroFRMQAAAAAAAAAAAAAARQnAQ',
    href: 'https://zhuanlan.zhihu.com/p/237996796',
  },
];

const LIST_EN: Recommend[] = [
  {
    title: 'How to Design Tree Component',
    description:
      '🌲 Surprise! With half-a-year practice of blood and tears, here comes a designer who deeply loves trees to teach you how to design 「tree」component!',
    img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Z4eXS55fMigAAAAAAAAAAAAAARQnAQ',
    href: 'https://zhuanlan.zhihu.com/p/260068653',
    popularize: true,
  },
  {
    title: 'Next Generation of Component Library?',
    description:
      '😎 With the launch of React hooks and Vue composition API, perhaps we have met a new breakthrough point of component libraries.',
    img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*SU6hQ5jHVEsAAAAAAAAAAAAAARQnAQ',
    href: 'https://zhuanlan.zhihu.com/p/252824872',
  },
  {
    title: 'Stories about Ant Design 4.0: VirtualList',
    description:
      "🏃 In React, usually you don't need to focus on performance problems. However, as a component library, we have to think about it.",
    img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*ULOBQroFRMQAAAAAAAAAAAAAARQnAQ',
    href: 'https://zhuanlan.zhihu.com/p/237996796',
  },
];

interface RecommendBlockProps extends Recommend {
  main?: boolean;
  img: string;
  href: string;
}

const RecommendBlock = ({
  main,
  title,
  popularize,
  description,
  img,<commit_msg>feat: 1024 (#27336)<commit_after>import * as React from 'react';
import classNames from 'classnames';
import { FormattedMessage, useIntl } from 'react-intl';
import { Row, Col, Typography } from 'antd';
import './RecommendPage.less';

const { Title, Paragraph } = Typography;

interface Recommend {
  title: string;
  img: string;
  href: string;
  popularize?: boolean;
  description: string;
}

const LIST_CN: Recommend[] = [
  {
    title: '这几个 Ant Design 色彩的小知识，我猜你不知道！',
    description: '今天不说大道理，就给大家科普几个 Ant Design 色彩的小知识——',
    img: 'https://pic4.zhimg.com/v2-254eebfe6b092b0b9c1f8d17f3c64d3d_1440w.jpg?source=172ae18b',
    href: 'https://zhuanlan.zhihu.com/p/268168773',
    popularize: true,
  },
  {
    title: '或许这就是下一代组件库',
    description: '随着 React hooks、Vue composition API 的推出，或许组件库有了新的突破点。',
    img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*SU6hQ5jHVEsAAAAAAAAAAAAAARQnAQ',
    href: 'https://zhuanlan.zhihu.com/p/252824872',
  },
  {
    title: 'Ant Design 4.0 的一些杂事儿 - VirtualList 篇',
    description:
      '在 React 中，我们常说不太需要关注性能问题。然而作为组件库，这些事你就不得不考虑一下。',
    img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*ULOBQroFRMQAAAAAAAAAAAAAARQnAQ',
    href: 'https://zhuanlan.zhihu.com/p/237996796',
  },
];

const LIST_EN: Recommend[] = [
  {
    title: 'These a few color knowledge of Ant Design, I guess you do not know!',
    description:
      '🎨 This time, we do not talk about theoretical knowledge, just a few color design skills of Ant Design',
    img: 'https://pic4.zhimg.com/v2-254eebfe6b092b0b9c1f8d17f3c64d3d_1440w.jpg?source=172ae18b',
    href: 'https://zhuanlan.zhihu.com/p/268168773',
    popularize: true,
  },
  {
    title: 'Next Generation of Component Library?',
    description:
      '😎 With the launch of React hooks and Vue composition API, perhaps we have met a new breakthrough point of component libraries.',
    img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*SU6hQ5jHVEsAAAAAAAAAAAAAARQnAQ',
    href: 'https://zhuanlan.zhihu.com/p/252824872',
  },
  {
    title: 'Stories about Ant Design 4.0: VirtualList',
    description:
      "🏃 In React, usually you don't need to focus on performance problems. However, as a component library, we have to think about it.",
    img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*ULOBQroFRMQAAAAAAAAAAAAAARQnAQ',
    href: 'https://zhuanlan.zhihu.com/p/237996796',
  },
];

interface RecommendBlockProps extends Recommend {
  main?: boolean;
  img: string;
  href: string;
}

const RecommendBlock = ({
  main,
  title,
  popularize,
  description,
  img,
{'fraction_non_alphanumeric': 0.13122346584330374, 'fraction_numerical': 0.04805094558085681, 'mean_word_length': 3.922127255460589, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 24, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 10, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2754992', 'n_tokens_mistral': 2275, 'n_tokens_neox': 2145, 'n_words': 421}