dunkirk.sh
pstream is dead; long live pstream
taciturnaxolotl.github.io/pstream-ng/
1import classNames from "classnames";
2import React from "react";
3import { Trans, useTranslation } from "react-i18next";
4
5import { ThinContainer } from "@/components/layout/ThinContainer";
6import { MwLink } from "@/components/text/Link";
7import { Heading1, Paragraph } from "@/components/utils/Text";
8import { PageTitle } from "@/pages/parts/util/PageTitle";
9import { conf } from "@/setup/config";
10
11import { SubPageLayout } from "./layouts/SubPageLayout";
12
13// From about just removed the numbers
14export function Ol(props: { items: React.ReactNode[] }) {
15 return (
16 <ol>
17 {props.items.map((child, i) => {
18 return (
19 <li
20 className={classNames(
21 "grid grid-cols-[auto,1fr] gap-6",
22 i !== props.items.length - 1 ? "pb-12" : undefined,
23 )}
24 >
25 <div className="relative z-0">
26 <div className="w-6 h-6 rounded-full bg-about-circle text-about-circleText font-medium flex justify-center items-center relative z-10" />
27 {i !== props.items.length - 1 ? (
28 <div
29 className="h-[calc(100%+1.5rem)] w-px absolute top-6 left-1/2 transform -translate-x-1/2"
30 style={{
31 backgroundImage:
32 "linear-gradient(to bottom, transparent 5px, #1F1F29 5px, #1F1F29 10px)",
33 backgroundSize: "10px 10px",
34 backgroundRepeat: "Repeat",
35 }}
36 />
37 ) : null}
38 </div>
39 <div>{child}</div>
40 </li>
41 );
42 })}
43 </ol>
44 );
45}
46
47function Item(props: { title: string; children: React.ReactNode }) {
48 return (
49 <>
50 <p className="text-white mb-2 font-medium">{props.title}</p>
51 <div className="text-type-text">{props.children}</div>
52 </>
53 );
54}
55
56export function SupportPage() {
57 const { t } = useTranslation();
58
59 return (
60 <SubPageLayout>
61 <PageTitle subpage k="global.pages.support" />
62 <ThinContainer>
63 <Heading1>{t("support.title")}</Heading1>
64 <Paragraph>
65 <Trans
66 i18nKey="support.text"
67 components={{
68 bold: <span className="font-bold" style={{ color: "#cfcfcf" }} />,
69 }}
70 />
71 </Paragraph>
72 <Ol
73 items={[
74 <Item title={t("support.q1.title")}>
75 <Trans i18nKey="support.q1.body">
76 <MwLink to={conf().FLUXER_LINK} />
77 </Trans>
78 </Item>,
79 ]}
80 />
81 </ThinContainer>
82 </SubPageLayout>
83 );
84}