dunkirk.sh
pstream is dead; long live pstream
taciturnaxolotl.github.io/pstream-ng/
1import classNames from "classnames";
2import { ReactNode } from "react";
3import { useNavigate } from "react-router-dom";
4
5import { Icon, Icons } from "@/components/Icon";
6import { Heading2, Heading3, Paragraph } from "@/components/utils/Text";
7
8export function Card(props: {
9 children?: React.ReactNode;
10 className?: string;
11 onClick?: () => void;
12}) {
13 return (
14 <div
15 className={classNames(
16 {
17 "bg-onboarding-card duration-300 border border-onboarding-border rounded-lg p-7": true,
18 "hover:bg-onboarding-cardHover transition-colors cursor-pointer":
19 !!props.onClick,
20 },
21 props.className,
22 )}
23 onClick={props.onClick}
24 >
25 {props.children}
26 </div>
27 );
28}
29
30export function CardContent(props: {
31 title: ReactNode;
32 description: ReactNode;
33 subtitle: ReactNode;
34 colorClass: string;
35 children?: React.ReactNode;
36 icon: Icons;
37}) {
38 return (
39 <div className="grid grid-rows-[1fr,auto] h-full">
40 <div>
41 <Icon
42 icon={props.icon}
43 className={classNames("text-4xl mb-8 block", props.colorClass)}
44 />
45 <Heading3
46 className={classNames(
47 "!mt-0 !mb-0 !text-xs uppercase",
48 props.colorClass,
49 )}
50 >
51 {props.subtitle}
52 </Heading3>
53 <Heading2 className="!mb-0 !mt-1 !text-base">{props.title}</Heading2>
54 <Paragraph className="max-w-[320px] !my-4">
55 {props.description}
56 </Paragraph>
57 </div>
58 <div>{props.children}</div>
59 </div>
60 );
61}
62
63export function Link(props: {
64 children?: React.ReactNode;
65 to?: string;
66 href?: string;
67 className?: string;
68 target?: "_blank";
69}) {
70 const navigate = useNavigate();
71 return (
72 <a
73 onClick={() => {
74 if (props.to) navigate(props.to);
75 }}
76 href={props.href}
77 target={props.target}
78 className={classNames(
79 "text-onboarding-link cursor-pointer inline-flex gap-2 items-center group hover:opacity-75 transition-opacity",
80 props.className,
81 )}
82 rel="noreferrer"
83 >
84 {props.children}
85 <Icon
86 icon={Icons.ARROW_RIGHT}
87 className="group-hover:translate-x-0.5 transition-transform text-xl group-active:translate-x-0"
88 />
89 </a>
90 );
91}