Fix incosistencies in the custom commission types

This commit is contained in:
2026-02-01 23:21:35 +01:00
parent 145770afbe
commit d6695e4c1d
3 changed files with 145 additions and 114 deletions

View File

@ -42,28 +42,33 @@ export default async function CommissionsPage() {
<div className="mx-auto w-full max-w-6xl px-4 py-8 flex flex-col gap-8">
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
<h1 className="text-3xl font-bold">Commission Pricing</h1>
{guidelines?.exampleImageUrl ? (
<Dialog>
<DialogTrigger asChild>
<Button variant="secondary">View example</Button>
</DialogTrigger>
<DialogContent className="flex w-auto! max-w-[95vw]! flex-col p-4 sm:p-6">
<DialogHeader className="sr-only">
<DialogTitle>Commission example</DialogTitle>
</DialogHeader>
<div className="flex max-h-[85vh] max-w-[85vw] items-center justify-center rounded-xl border-border/60 bg-muted p-2 shadow-2xl">
<Image
src={guidelines.exampleImageUrl}
alt="Commission example"
width={1600}
height={1200}
sizes="85vw"
className="h-auto max-h-[85vh] w-auto max-w-[85vw] rounded-lg object-contain"
/>
</div>
</DialogContent>
</Dialog>
) : null}
<div className="flex flex-wrap gap-3">
<Button asChild>
<a href="#commission-request-form">Get to the request form</a>
</Button>
{guidelines?.exampleImageUrl ? (
<Dialog>
<DialogTrigger asChild>
<Button variant="secondary">View example</Button>
</DialogTrigger>
<DialogContent className="flex w-auto! max-w-[95vw]! flex-col p-4 sm:p-6">
<DialogHeader className="sr-only">
<DialogTitle>Commission example</DialogTitle>
</DialogHeader>
<div className="flex max-h-[85vh] max-w-[85vw] items-center justify-center rounded-xl border-border/60 bg-muted p-2 shadow-2xl">
<Image
src={guidelines.exampleImageUrl}
alt="Commission example"
width={1600}
height={1200}
sizes="85vw"
className="h-auto max-h-[85vh] w-auto max-w-[85vw] rounded-lg object-contain"
/>
</div>
</DialogContent>
</Dialog>
) : null}
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 items-start">
{commissions.map((commission) => (
@ -75,7 +80,9 @@ export default async function CommissionsPage() {
<CommissionGuidelines />
</div>
<hr />
<h2 className="text-2xl font-semibold">Request a Commission</h2>
<h2 id="commission-request-form" className="text-2xl font-semibold scroll-mt-24">
Request a Commission
</h2>
<CommissionOrderForm types={commissions} customCards={customCards} />
</div>
);