• Search by APIs
• Search by Words
• Project Search

• Java
• Python
• JavaScript
• TypeScript
• C++
• Scala
• Blog

• open-source-master
  • .github
    • workflows
      • gh-pages.yml
  • Users.md
  • public
    • styles
      • blackboard.css
  • .prettierrc
  • .all-contributorsrc
  • LICENSE
  • commitlint.config.js
  • components
    • Card.jsx
    • CardList.jsx
  • README_EN.md
  • .editorconfig
  • .gitattributes
  • README.md
  • package.json
  • tsconfig.json
  • .gitignore
  • .prettierignore
  • docs
    • index.en-US.md
    • about
      • index.en-US.md
      • index.md
    • index.md
    • card
      • index.en-US.md
      • repos.js
      • index.md
    • periodical
      • 1
        • 1.asstes
        • index.en-US.md
        • index.md
  • .umirc.ts
  • typings.d.ts

import React, { useEffect, useState } from 'react';
import { Card, Space, Avatar, Tag } from 'antd';
import { StarOutlined, BranchesOutlined, EyeOutlined } from '@ant-design/icons';
import 'antd/dist/antd.css';
import classes from '../public/styles/blackboard.css';

export default ({ data }) => {
  return (
    <a href={`https://github.com/${data?.full_name}`} target="_blank">
      <Card
        className={classes.githubCard}
        actions={[
          <IconText
            icon={EyeOutlined}
            text={data?.watchers}
            key="EyeOutlined"
          />,
          <IconText
            icon={StarOutlined}
            text={data?.stars}
            key="StarOutlined"
          />,
          <IconText
            icon={BranchesOutlined}
            text={data?.forks}
            key="BranchesOutlined"
          />,
        ]}
      >
        <Card.Meta
          avatar={<Avatar size="large" src={data?.avatar_url} />}
          title={data?.full_name}
          description={data?.description}
        />
        <div className={classes.tagView}>
          {data?.topics
            ? data?.topics.map((item, index) => (
                <Tag
                  key={index.toString()}
                  className={classes.tagLine}
                  color="blue"
                >
                  {item}
                </Tag>
              ))
            : null}
        </div>
      </Card>
    </a>
  );
};

/**
 *
 * @param {  } param0
 */
const IconText = ({ icon, text }) => (
  <Space>
    {React.createElement(icon)}
    {text}
  </Space>
);