leetcode-cheat/src/Detail.jsx at 0.1 · leetcode-pp/leetcode-cheat · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
import React, { Fragment } from "react";
import { Button, Tabs, Collapse } from "antd";

import "highlight.js/styles/github.css";

import {
  LEETCODE_CN_URL,
  ISSUES_URL,
  CONTRIBUTE_COMPANY_URL,
} from "./constant/index";
import db from "./db/db";

import Codes from "./codes";
import TagOrLink from "./TagOrLink";

const { TabPane } = Tabs;
const { Panel } = Collapse;

const { problems, company } = db;

export default function Detail({ problemId }) {
  return (
    <Tabs defaultActiveKey="0">
      <TabPane tab="前置知识" key="pre">
        {problems[problemId].pre.map(({ link, text, color }) => (
          <TagOrLink key={text} text={text} link={link} color={color} />
        ))}
      </TabPane>
      <TabPane tab="关键点" key="key">
        {problems[problemId].keyPoints.length === 0 && (
          <Fragment>
            暂无关键点，
            <a href={ISSUES_URL} target="_blank" rel="noopener noreferrer">
              点击反馈
            </a>
          </Fragment>
        )}
        <ul>
          {problems[problemId].keyPoints.map(({ link, text }) => (
            <li key={text}>{link ? <a href={link}>text</a> : text}</li>
          ))}
        </ul>
      </TabPane>
      <TabPane tab="公司" key="company">
        {problems[problemId].companies.length === 0 && (
          <Fragment>
            暂无公司资料，
            <a
              href={CONTRIBUTE_COMPANY_URL}
              target="_blank"
              rel="noopener noreferrer"
            >
              点击反馈
            </a>
          </Fragment>
        )}
        <Collapse>
          {problems[problemId].companies.map(({ name }) => (
            <Panel header={name} key={name}>
              <ul>
                {company[name].map((id) => (
                  <li key={name}>
                    <Button
                      type="link"
                      href={`${LEETCODE_CN_URL}/problems/${id}`}
                      target="_blank"
                    >
                      {id}
                    </Button>
                  </li>
                ))}
              </ul>
            </Panel>
          ))}
        </Collapse>
      </TabPane>
      <TabPane tab="题解" key="solution">
        <Button
          type="link"
          href={problems[problemId].solution}
          target="_blank"
          rel="noopener noreferrer"
        >
          前往 github 题解（国外）
        </Button>

        <Button
          type="link"
          href={problems[problemId].giteeSolution}
          target="_blank"
        >
          前往 gitee 题解（国内）
        </Button>
      </TabPane>
      <TabPane tab="代码" key="code">
        <div className="code-block">
          <Collapse>
            <Codes codes={problems[problemId].code}></Codes>
          </Collapse>
        </div>
      </TabPane>

      <TabPane
        tab="可视化调试（敬请期待）"
        key="debug"
        disabled={true}
      ></TabPane>

      <TabPane tab="我要反馈" key="feedback">
        <a
          href={ISSUES_URL}
          target="_blank"
          rel="noopener noreferrer"
          style={{ marginRight: "20px" }}
        >
          我想反馈问题
        </a>
        <a
          href={CONTRIBUTE_COMPANY_URL}
          target="_blank"
          rel="noopener noreferrer"
          style={{ marginRight: "20px" }}
        >
          我想贡献公司和岗位信息（免费获得题目咨询服务）
        </a>
        <a
          href="https://tva1.sinaimg.cn/large/007S8ZIlly1gfcuzagjalj30p00dwabs.jpg"
          target="_blank"
          rel="noopener noreferrer"
        >
          关注更新
        </a>
      </TabPane>
    </Tabs>
  );
}