90 lines
3.5 KiB
TypeScript
90 lines
3.5 KiB
TypeScript
import { CommissionCard } from "@/components/commissions/CommissionCard";
|
|
import { CommissionCustomCard } from "@/components/commissions/CommissionCustomCard";
|
|
import CommissionGuidelines from "@/components/commissions/CommissionGuidelines";
|
|
import { CommissionOrderForm } from "@/components/commissions/CommissionOrderForm";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from "@/components/ui/dialog";
|
|
import { prisma } from "@/lib/prisma";
|
|
import Image from "next/image";
|
|
|
|
export default async function CommissionsPage() {
|
|
const [commissions, customCards, guidelines] = await Promise.all([
|
|
prisma.commissionType.findMany({
|
|
include: {
|
|
options: { include: { option: true }, orderBy: { sortIndex: "asc" } },
|
|
extras: { include: { extra: true }, orderBy: { sortIndex: "asc" } },
|
|
customInputs: { include: { customInput: true }, orderBy: { sortIndex: "asc" } },
|
|
},
|
|
orderBy: [{ sortIndex: "asc" }, { name: "asc" }],
|
|
}),
|
|
prisma.commissionCustomCard.findMany({
|
|
where: { isVisible: true },
|
|
include: {
|
|
options: { include: { option: true }, orderBy: { sortIndex: "asc" } },
|
|
extras: { include: { extra: true }, orderBy: { sortIndex: "asc" } },
|
|
},
|
|
orderBy: [{ sortIndex: "asc" }, { name: "asc" }],
|
|
}),
|
|
prisma.commissionGuidelines.findFirst({
|
|
where: { isActive: true },
|
|
orderBy: { createdAt: "desc" },
|
|
select: { exampleImageUrl: true },
|
|
}),
|
|
]);
|
|
|
|
return (
|
|
<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>
|
|
<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) => (
|
|
<CommissionCard key={commission.id} commission={commission} />
|
|
))}
|
|
{customCards.map((card) => (
|
|
<CommissionCustomCard key={card.id} card={card} />
|
|
))}
|
|
<CommissionGuidelines />
|
|
</div>
|
|
<hr />
|
|
<h2 id="commission-request-form" className="text-2xl font-semibold scroll-mt-24">
|
|
Request a Commission
|
|
</h2>
|
|
<CommissionOrderForm types={commissions} customCards={customCards} />
|
|
</div>
|
|
);
|
|
}
|