-
-
Notifications
You must be signed in to change notification settings - Fork 758
/
index.jsx
87 lines (82 loc) · 2.32 KB
/
index.jsx
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
import React from "react";
import clsx from "clsx";
import Layout from "@theme/Layout";
import { extensions } from "@site/src/data/marketplace";
import MarketplaceCard from "./_components/MarketplaceCard";
import styles from "./styles.module.css";
const TITLE = "Detekt 3rd-party Marketplace";
const DESCRIPTION =
"List of Detekt Rules that have been built by the community 🎉";
const SUBMIT_URL =
"https://github.com/detekt/detekt/blob/main/website/src/data/marketplace.js";
const SEARCH_RULES_URL = "https://github.com/topics/detekt-rules";
function MarketplaceHeader() {
return (
<section className="margin-top--lg margin-bottom--lg text--center">
<h1>{TITLE}</h1>
<p>
List of Detekt Rules, Extensions & Plugins that have been built by the community.
</p>
<a
className={clsx(
"button",
"button--primary",
styles.marketplaceHeaderButton
)}
href={SUBMIT_URL}
target="_blank"
rel="noreferrer"
>
🙏 Please add your ruleset
</a>
<a
className={clsx(
"button",
"button--secondary",
styles.marketplaceHeaderButton
)}
href={SEARCH_RULES_URL}
target="_blank"
rel="noreferrer"
>
Find more rules on Github
</a>
</section>
);
}
function MarketplaceCards() {
// No Results scenario
if (extensions.length === 0) {
return (
<section className="margin-top--lg margin-bottom--xl">
<div className="container padding-vert--md text--center">
<h2>No results</h2>
</div>
</section>
);
}
return (
<section className="margin-top--lg margin-bottom--xl">
<>
<div className="container margin-top--lg">
<h2 className={styles.marketplaceHeader}>All extensions</h2>
<ul className={clsx("clean-list", styles.marketplaceList)}>
{extensions.map((extension) => (
<MarketplaceCard key={extension.title} extension={extension} />
))}
</ul>
</div>
</>
</section>
);
}
export default function Marketplace() {
return (
<Layout title={TITLE} description={DESCRIPTION}>
<main className="margin-vert--lg">
<MarketplaceHeader />
<MarketplaceCards />
</main>
</Layout>
);
}