Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 93x 93x | import { ChevronRight } from "lucide-react";
import { PropsWithChildren, ReactNode } from "react";
import { Link, LinkProps } from "react-router";
import { CardWithTopBorder } from "@/components";
import { cn } from "@/utils";
export type OptionCardFieldsetProps = PropsWithChildren<{
legend: string;
}>;
export type MACFieldsetOption = {
title: string;
description: ReactNode;
to: LinkProps["to"];
altBg?: boolean;
};
/** A fieldset for nesting {@link OptionCard} with MACCard styling */
export const OptionFieldset = ({ children, legend }: OptionCardFieldsetProps) => {
return (
<section className="max-w-3xl mx-auto mb-6">
<fieldset>
<legend className="text-2xl font-medium py-8">{legend}</legend>
<CardWithTopBorder>{children}</CardWithTopBorder>
</fieldset>
</section>
);
};
/** An element for use in options lists that lead to a destination, such as
* the new submission options found in {@link NewSubmissionInitialOptions} */
export const OptionCard = ({ title, description, to, altBg = false }: MACFieldsetOption) => {
return (
<label>
<Link to={to} relative="path">
<div
data-testid={"card-inner-wrapper"}
className={`flex items-center justify-between gap-6 px-6 py-4 ${
altBg ? "bg-slate-100" : "bg-white"
} hover:bg-sky-100`}
>
<div>
<h2 className="text-lg text-sky-700 font-bold my-2">{title}</h2>
<p className={cn("my-2 text-slate-600")}>{description}</p>
</div>
<ChevronRight className="text-sky-700 w-8 h-8" />
</div>
</Link>
</label>
);
};
|