dunkirk.sh
pstream is dead; long live pstream
taciturnaxolotl.github.io/pstream-ng/
1import { Trans, useTranslation } from "react-i18next";
2import { useNavigate } from "react-router-dom";
3
4import { Icons } from "@/components/Icon";
5import { Stepper } from "@/components/layout/Stepper";
6import { BiggerCenterContainer } from "@/components/layout/ThinContainer";
7import { VerticalLine } from "@/components/layout/VerticalLine";
8import { Heading2, Paragraph } from "@/components/utils/Text";
9import { MinimalPageLayout } from "@/pages/layouts/MinimalPageLayout";
10import { Card, CardContent, Link } from "@/pages/migration/utils";
11import { PageTitle } from "@/pages/parts/util/PageTitle";
12
13export function MigrationPage() {
14 const navigate = useNavigate();
15 const { t } = useTranslation();
16
17 return (
18 <MinimalPageLayout>
19 <PageTitle subpage k="global.pages.migration" />
20 <BiggerCenterContainer>
21 <Stepper steps={2} current={1} className="mb-12" />
22 <Heading2 className="!mt-0 !text-3xl">
23 {t("migration.start.title")}
24 </Heading2>
25 <Paragraph className="max-w-[360px]">
26 {t("migration.start.explainer")}
27 </Paragraph>
28
29 <div className="w-full flex flex-col md:flex-row gap-3">
30 <Card
31 onClick={() => navigate("/migration/direct")}
32 className="flex-1"
33 >
34 <CardContent
35 colorClass="!text-onboarding-best"
36 title={t("migration.start.options.direct.title")}
37 subtitle={t("migration.start.options.direct.quality")}
38 description={
39 <Trans i18nKey="migration.start.options.direct.description" />
40 }
41 icon={Icons.CLOUD_ARROW_UP}
42 >
43 <Link>{t("migration.start.options.direct.action")}</Link>
44 </CardContent>
45 </Card>
46 <div className="hidden md:grid grid-rows-[1fr,auto,1fr] justify-center gap-4">
47 <VerticalLine className="items-end" />
48 <span className="text-xs uppercase font-bold">
49 {t("migration.start.options.or")}
50 </span>
51 <VerticalLine />
52 </div>
53 <Card
54 onClick={() => navigate("/migration/download")}
55 className="flex-1"
56 >
57 <CardContent
58 colorClass="!text-migration-good"
59 title={t("migration.start.options.download.title")}
60 subtitle={t("migration.start.options.download.quality")}
61 description={t("migration.start.options.download.description")}
62 icon={Icons.FILE_ARROW_DOWN}
63 >
64 <Link>{t("migration.start.options.download.action")}</Link>
65 </CardContent>
66 </Card>
67 <div className="hidden md:grid grid-rows-[1fr,auto,1fr] justify-center gap-4">
68 <VerticalLine className="items-end" />
69 <span className="text-xs uppercase font-bold">
70 {t("migration.start.options.or")}
71 </span>
72 <VerticalLine />
73 </div>
74 <Card
75 onClick={() => navigate("/migration/upload")}
76 className="flex-1"
77 >
78 <CardContent
79 colorClass="!text-migration-good"
80 title={t("migration.start.options.upload.title")}
81 subtitle={t("migration.start.options.upload.quality")}
82 description={t("migration.start.options.upload.description")}
83 icon={Icons.CLOUD_ARROW_UP}
84 >
85 <Link>{t("migration.start.options.upload.action")}</Link>
86 </CardContent>
87 </Card>
88 </div>
89 </BiggerCenterContainer>
90 </MinimalPageLayout>
91 );
92}