dunkirk.sh
pstream is dead; long live pstream
taciturnaxolotl.github.io/pstream-ng/
1import classNames from "classnames";
2
3export function LargeCard(props: {
4 children: React.ReactNode;
5 top?: React.ReactNode;
6}) {
7 return (
8 <div className="flex flex-col items-center">
9 {props.top ? (
10 <div className="inline-block transform translate-y-1/2">
11 {props.top}
12 </div>
13 ) : null}
14 <div className="w-full rounded-xl bg-largeCard-background bg-opacity-50 max-w-[600px] mx-auto p-[3rem]">
15 {props.children}
16 </div>
17 </div>
18 );
19}
20
21export function LargeCardText(props: {
22 title: string;
23 children?: React.ReactNode;
24 icon?: React.ReactNode;
25}) {
26 return (
27 <div className="flex flex-col items-center text-center mb-8">
28 <div className="flex flex-col items-center text-center max-w-[320px]">
29 {props.icon ? (
30 <div className="text-2xl mb-4 text-largeCard-icon">{props.icon}</div>
31 ) : null}
32 <h2 className="text-xl text-white font-bold">{props.title}</h2>
33 {props.children ? (
34 <div className="text-type-text mt-4">{props.children}</div>
35 ) : null}
36 </div>
37 </div>
38 );
39}
40
41export function LargeCardButtons(props: {
42 children: React.ReactNode;
43 splitAlign?: boolean;
44}) {
45 return (
46 <div className="mt-12">
47 <div
48 className={classNames("mx-auto", {
49 "flex flex-row-reverse justify-between items-center":
50 props.splitAlign,
51 "flex max-w-xs flex-col-reverse gap-3": !props.splitAlign,
52 })}
53 >
54 {props.children}
55 </div>
56 </div>
57 );
58}