-
-
-
- -
- Get started by editing{" "}
-
- src/app/page.tsx
-
- .
-
- -
- Save and see your changes instantly.
-
-
-
-
-
-
+
+ Art app
);
}
diff --git a/src/components/commissions/CommissionCard.tsx b/src/components/commissions/CommissionCard.tsx
new file mode 100644
index 0000000..dd7bc91
--- /dev/null
+++ b/src/components/commissions/CommissionCard.tsx
@@ -0,0 +1,85 @@
+// components/commissions/CommissionCard.tsx
+"use client"
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { CommissionCardProps } from "@/types/commissions"
+import Image from "next/image"
+import { useState } from "react"
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/collapsible"
+
+export function CommissionCard({ type, options, extras, examples }: CommissionCardProps) {
+ const [open, setOpen] = useState(false)
+
+ return (
+
+
+
+ {type.name}
+ {type.description}
+
+
+
+ {examples && examples.length > 0 && (
+
+
+ {open ? "Hide Examples" : "See Examples"}
+
+
+
+
+ {examples.map((src, idx) => (
+
+ ))}
+
+
+
Options
+
+ {options.map((opt) => (
+ -
+ {opt.name}: {opt.price}€
+
+ ))}
+
+
+
Extras
+
+ {extras.map((extra) => (
+ -
+ {extra.name}:{" "}
+ {extra.price !== undefined
+ ? `${extra.price}€`
+ : extra.pricePercent
+ ? `+${extra.pricePercent}%`
+ : extra.priceRange
+ ? `${extra.priceRange.replace("#", "–")}€`
+ : "Included"}
+
+ ))}
+
+
+ {extras.map((extra) => (
+
+ {extra.name}
+
+ ))}
+
*/}
+
+
+
+ )
+}
diff --git a/src/components/commissions/CommissionForm.tsx b/src/components/commissions/CommissionForm.tsx
new file mode 100644
index 0000000..d9cba39
--- /dev/null
+++ b/src/components/commissions/CommissionForm.tsx
@@ -0,0 +1,55 @@
+// src/app/(frontend)/commissions/CommissionForm.tsx
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Textarea } from "@/components/ui/textarea"
+import { CommissionFormData, commissionFormSchema } from "@/schemas/commission"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+// import { CommissionFormData, commissionFormSchema } from "./schema"
+
+export function CommissionForm() {
+ const {
+ register,
+ handleSubmit,
+ formState: { errors },
+ } = useForm
({
+ resolver: zodResolver(commissionFormSchema),
+ })
+
+ function onSubmit(data: CommissionFormData) {
+ console.log("Order submitted", data)
+ }
+
+ return (
+
+ )
+}
diff --git a/src/components/global/Footer.tsx b/src/components/global/Footer.tsx
new file mode 100644
index 0000000..4abff76
--- /dev/null
+++ b/src/components/global/Footer.tsx
@@ -0,0 +1,5 @@
+export default function Footer() {
+ return (
+ Footer
+ );
+}
\ No newline at end of file
diff --git a/src/components/global/Header.tsx b/src/components/global/Header.tsx
new file mode 100644
index 0000000..4866398
--- /dev/null
+++ b/src/components/global/Header.tsx
@@ -0,0 +1,11 @@
+import ModeToggle from "./ModeToggle";
+import TopNav from "./TopNav";
+
+export default function Header() {
+ return (
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/global/ModeToggle.tsx b/src/components/global/ModeToggle.tsx
new file mode 100644
index 0000000..8fcc89a
--- /dev/null
+++ b/src/components/global/ModeToggle.tsx
@@ -0,0 +1,39 @@
+"use client"
+
+import { Moon, Sun } from "lucide-react"
+import { useTheme } from "next-themes"
+
+import { Button } from "@/components/ui/button"
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+export default function ModeToggle() {
+ const { setTheme } = useTheme()
+
+ return (
+
+
+
+
+
+ setTheme("light")}>
+ Light
+
+ setTheme("dark")}>
+ Dark
+
+ setTheme("system")}>
+ System
+
+
+
+ )
+}
diff --git a/src/components/global/ThemeProvider.tsx b/src/components/global/ThemeProvider.tsx
new file mode 100644
index 0000000..120faea
--- /dev/null
+++ b/src/components/global/ThemeProvider.tsx
@@ -0,0 +1,11 @@
+"use client"
+
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+import * as React from "react"
+
+export function ThemeProvider({
+ children,
+ ...props
+}: React.ComponentProps) {
+ return {children}
+}
\ No newline at end of file
diff --git a/src/components/global/Toaster.tsx b/src/components/global/Toaster.tsx
new file mode 100644
index 0000000..957524e
--- /dev/null
+++ b/src/components/global/Toaster.tsx
@@ -0,0 +1,25 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, ToasterProps } from "sonner"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+ const { theme = "system" } = useTheme()
+
+ return (
+
+ )
+}
+
+export { Toaster }
diff --git a/src/components/global/TopNav.tsx b/src/components/global/TopNav.tsx
new file mode 100644
index 0000000..eec31da
--- /dev/null
+++ b/src/components/global/TopNav.tsx
@@ -0,0 +1,23 @@
+"use client"
+
+import { NavigationMenu, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, navigationMenuTriggerStyle } from "@/components/ui/navigation-menu";
+import Link from "next/link";
+
+export default function TopNav() {
+ return (
+
+
+
+
+ Home
+
+
+
+
+ Commissions
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
new file mode 100644
index 0000000..0205413
--- /dev/null
+++ b/src/components/ui/badge.tsx
@@ -0,0 +1,46 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+ "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+ {
+ variants: {
+ variant: {
+ default:
+ "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+ secondary:
+ "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+ destructive:
+ "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+ outline:
+ "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ },
+ }
+)
+
+function Badge({
+ className,
+ variant,
+ asChild = false,
+ ...props
+}: React.ComponentProps<"span"> &
+ VariantProps & { asChild?: boolean }) {
+ const Comp = asChild ? Slot : "span"
+
+ return (
+
+ )
+}
+
+export { Badge, badgeVariants }
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
new file mode 100644
index 0000000..a2df8dc
--- /dev/null
+++ b/src/components/ui/button.tsx
@@ -0,0 +1,59 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+ "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+ {
+ variants: {
+ variant: {
+ default:
+ "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+ destructive:
+ "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+ outline:
+ "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+ secondary:
+ "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+ ghost:
+ "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+ link: "text-primary underline-offset-4 hover:underline",
+ },
+ size: {
+ default: "h-9 px-4 py-2 has-[>svg]:px-3",
+ sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+ lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+ icon: "size-9",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default",
+ },
+ }
+)
+
+function Button({
+ className,
+ variant,
+ size,
+ asChild = false,
+ ...props
+}: React.ComponentProps<"button"> &
+ VariantProps & {
+ asChild?: boolean
+ }) {
+ const Comp = asChild ? Slot : "button"
+
+ return (
+
+ )
+}
+
+export { Button, buttonVariants }
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
new file mode 100644
index 0000000..d05bbc6
--- /dev/null
+++ b/src/components/ui/card.tsx
@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+export {
+ Card,
+ CardHeader,
+ CardFooter,
+ CardTitle,
+ CardAction,
+ CardDescription,
+ CardContent,
+}
diff --git a/src/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx
new file mode 100644
index 0000000..fa0e4b5
--- /dev/null
+++ b/src/components/ui/checkbox.tsx
@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Checkbox({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+
+
+
+ )
+}
+
+export { Checkbox }
diff --git a/src/components/ui/collapsible.tsx b/src/components/ui/collapsible.tsx
new file mode 100644
index 0000000..ae9fad0
--- /dev/null
+++ b/src/components/ui/collapsible.tsx
@@ -0,0 +1,33 @@
+"use client"
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+function Collapsible({
+ ...props
+}: React.ComponentProps) {
+ return
+}
+
+function CollapsibleTrigger({
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function CollapsibleContent({
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }
diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
new file mode 100644
index 0000000..ec51e9c
--- /dev/null
+++ b/src/components/ui/dropdown-menu.tsx
@@ -0,0 +1,257 @@
+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function DropdownMenu({
+ ...props
+}: React.ComponentProps) {
+ return
+}
+
+function DropdownMenuPortal({
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function DropdownMenuTrigger({
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function DropdownMenuContent({
+ className,
+ sideOffset = 4,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+
+ )
+}
+
+function DropdownMenuGroup({
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function DropdownMenuItem({
+ className,
+ inset,
+ variant = "default",
+ ...props
+}: React.ComponentProps & {
+ inset?: boolean
+ variant?: "default" | "destructive"
+}) {
+ return (
+
+ )
+}
+
+function DropdownMenuCheckboxItem({
+ className,
+ children,
+ checked,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+
+
+
+
+ {children}
+
+ )
+}
+
+function DropdownMenuRadioGroup({
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function DropdownMenuRadioItem({
+ className,
+ children,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+
+
+
+
+ {children}
+
+ )
+}
+
+function DropdownMenuLabel({
+ className,
+ inset,
+ ...props
+}: React.ComponentProps & {
+ inset?: boolean
+}) {
+ return (
+
+ )
+}
+
+function DropdownMenuSeparator({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function DropdownMenuShortcut({
+ className,
+ ...props
+}: React.ComponentProps<"span">) {
+ return (
+
+ )
+}
+
+function DropdownMenuSub({
+ ...props
+}: React.ComponentProps) {
+ return
+}
+
+function DropdownMenuSubTrigger({
+ className,
+ inset,
+ children,
+ ...props
+}: React.ComponentProps & {
+ inset?: boolean
+}) {
+ return (
+
+ {children}
+
+
+ )
+}
+
+function DropdownMenuSubContent({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+export {
+ DropdownMenu,
+ DropdownMenuPortal,
+ DropdownMenuTrigger,
+ DropdownMenuContent,
+ DropdownMenuGroup,
+ DropdownMenuLabel,
+ DropdownMenuItem,
+ DropdownMenuCheckboxItem,
+ DropdownMenuRadioGroup,
+ DropdownMenuRadioItem,
+ DropdownMenuSeparator,
+ DropdownMenuShortcut,
+ DropdownMenuSub,
+ DropdownMenuSubTrigger,
+ DropdownMenuSubContent,
+}
diff --git a/src/components/ui/form.tsx b/src/components/ui/form.tsx
new file mode 100644
index 0000000..524b986
--- /dev/null
+++ b/src/components/ui/form.tsx
@@ -0,0 +1,167 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import {
+ Controller,
+ FormProvider,
+ useFormContext,
+ useFormState,
+ type ControllerProps,
+ type FieldPath,
+ type FieldValues,
+} from "react-hook-form"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+ TFieldValues extends FieldValues = FieldValues,
+ TName extends FieldPath = FieldPath,
+> = {
+ name: TName
+}
+
+const FormFieldContext = React.createContext(
+ {} as FormFieldContextValue
+)
+
+const FormField = <
+ TFieldValues extends FieldValues = FieldValues,
+ TName extends FieldPath = FieldPath,
+>({
+ ...props
+}: ControllerProps) => {
+ return (
+
+
+
+ )
+}
+
+const useFormField = () => {
+ const fieldContext = React.useContext(FormFieldContext)
+ const itemContext = React.useContext(FormItemContext)
+ const { getFieldState } = useFormContext()
+ const formState = useFormState({ name: fieldContext.name })
+ const fieldState = getFieldState(fieldContext.name, formState)
+
+ if (!fieldContext) {
+ throw new Error("useFormField should be used within ")
+ }
+
+ const { id } = itemContext
+
+ return {
+ id,
+ name: fieldContext.name,
+ formItemId: `${id}-form-item`,
+ formDescriptionId: `${id}-form-item-description`,
+ formMessageId: `${id}-form-item-message`,
+ ...fieldState,
+ }
+}
+
+type FormItemContextValue = {
+ id: string
+}
+
+const FormItemContext = React.createContext(
+ {} as FormItemContextValue
+)
+
+function FormItem({ className, ...props }: React.ComponentProps<"div">) {
+ const id = React.useId()
+
+ return (
+
+
+
+ )
+}
+
+function FormLabel({
+ className,
+ ...props
+}: React.ComponentProps) {
+ const { error, formItemId } = useFormField()
+
+ return (
+
+ )
+}
+
+function FormControl({ ...props }: React.ComponentProps) {
+ const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+ return (
+
+ )
+}
+
+function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
+ const { formDescriptionId } = useFormField()
+
+ return (
+
+ )
+}
+
+function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
+ const { error, formMessageId } = useFormField()
+ const body = error ? String(error?.message ?? "") : props.children
+
+ if (!body) {
+ return null
+ }
+
+ return (
+
+ {body}
+
+ )
+}
+
+export {
+ useFormField,
+ Form,
+ FormItem,
+ FormLabel,
+ FormControl,
+ FormDescription,
+ FormMessage,
+ FormField,
+}
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
new file mode 100644
index 0000000..03295ca
--- /dev/null
+++ b/src/components/ui/input.tsx
@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+ return (
+
+ )
+}
+
+export { Input }
diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx
new file mode 100644
index 0000000..fb5fbc3
--- /dev/null
+++ b/src/components/ui/label.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+export { Label }
diff --git a/src/components/ui/navigation-menu.tsx b/src/components/ui/navigation-menu.tsx
new file mode 100644
index 0000000..1199945
--- /dev/null
+++ b/src/components/ui/navigation-menu.tsx
@@ -0,0 +1,168 @@
+import * as React from "react"
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
+import { cva } from "class-variance-authority"
+import { ChevronDownIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function NavigationMenu({
+ className,
+ children,
+ viewport = true,
+ ...props
+}: React.ComponentProps & {
+ viewport?: boolean
+}) {
+ return (
+
+ {children}
+ {viewport && }
+
+ )
+}
+
+function NavigationMenuList({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function NavigationMenuItem({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+const navigationMenuTriggerStyle = cva(
+ "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
+)
+
+function NavigationMenuTrigger({
+ className,
+ children,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ {children}{" "}
+
+
+ )
+}
+
+function NavigationMenuContent({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function NavigationMenuViewport({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+
+ )
+}
+
+function NavigationMenuLink({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function NavigationMenuIndicator({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+
+ )
+}
+
+export {
+ NavigationMenu,
+ NavigationMenuList,
+ NavigationMenuItem,
+ NavigationMenuContent,
+ NavigationMenuTrigger,
+ NavigationMenuLink,
+ NavigationMenuIndicator,
+ NavigationMenuViewport,
+ navigationMenuTriggerStyle,
+}
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
new file mode 100644
index 0000000..dcbbc0c
--- /dev/null
+++ b/src/components/ui/select.tsx
@@ -0,0 +1,185 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Select({
+ ...props
+}: React.ComponentProps) {
+ return
+}
+
+function SelectGroup({
+ ...props
+}: React.ComponentProps) {
+ return
+}
+
+function SelectValue({
+ ...props
+}: React.ComponentProps) {
+ return
+}
+
+function SelectTrigger({
+ className,
+ size = "default",
+ children,
+ ...props
+}: React.ComponentProps & {
+ size?: "sm" | "default"
+}) {
+ return (
+
+ {children}
+
+
+
+
+ )
+}
+
+function SelectContent({
+ className,
+ children,
+ position = "popper",
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+
+
+ {children}
+
+
+
+
+ )
+}
+
+function SelectLabel({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function SelectItem({
+ className,
+ children,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+
+
+
+
+ {children}
+
+ )
+}
+
+function SelectSeparator({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ )
+}
+
+function SelectScrollUpButton({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+
+ )
+}
+
+function SelectScrollDownButton({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+
+ )
+}
+
+export {
+ Select,
+ SelectContent,
+ SelectGroup,
+ SelectItem,
+ SelectLabel,
+ SelectScrollDownButton,
+ SelectScrollUpButton,
+ SelectSeparator,
+ SelectTrigger,
+ SelectValue,
+}
diff --git a/src/components/ui/sonner.tsx b/src/components/ui/sonner.tsx
new file mode 100644
index 0000000..957524e
--- /dev/null
+++ b/src/components/ui/sonner.tsx
@@ -0,0 +1,25 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, ToasterProps } from "sonner"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+ const { theme = "system" } = useTheme()
+
+ return (
+
+ )
+}
+
+export { Toaster }
diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx
new file mode 100644
index 0000000..6a2b524
--- /dev/null
+++ b/src/components/ui/switch.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitive from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+function Switch({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+
+ )
+}
+
+export { Switch }
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
new file mode 100644
index 0000000..7f21b5e
--- /dev/null
+++ b/src/components/ui/textarea.tsx
@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+ return (
+
+ )
+}
+
+export { Textarea }
diff --git a/src/data/mockCommissions.ts b/src/data/mockCommissions.ts
new file mode 100644
index 0000000..06ccc48
--- /dev/null
+++ b/src/data/mockCommissions.ts
@@ -0,0 +1,311 @@
+
+export const commissionTypes = {
+ sketch: {
+ name: 'Sketch',
+ description: 'A quick sketch of a character',
+ },
+ flat: {
+ name: 'Flat Color / Lineart',
+ description: 'Dunno how to describe this',
+ },
+ shaded: {
+ name: 'Shaded',
+ description: 'Dunno how to describe this',
+ },
+ refsheet: {
+ name: 'Reference Sheet',
+ description: 'A reference sheet with multiple poses',
+ }
+}
+
+export const commissionOptions = {
+ headshot: {
+ name: 'Headshot',
+ basePrice: 10
+ },
+ halfbody: {
+ name: 'Halfbody',
+ basePrice: 15
+ },
+ fullbody: {
+ name: 'Fullbody',
+ basePrice: 20
+ }
+}
+
+export const commissionExtras = {
+ extraChar: {
+ name: 'Extra Character',
+ description: 'Add an extra character to the commission',
+ pricePercent: 75,
+ price: 0,
+ priceRange: ""
+ },
+ basicBackground: {
+ name: 'Basic Background',
+ description: 'Add a basic background to the commission',
+ pricePercent: 0,
+ price: 0,
+ priceRange: ""
+ },
+ abstractBackground: {
+ name: 'Abstract Background',
+ description: 'Add an abstract background to the commission',
+ pricePercent: 0,
+ price: 0,
+ priceRange: ""
+ },
+ gradientBackground: {
+ name: 'Gradient Background',
+ description: 'Add an gradient background to the commission',
+ pricePercent: 0,
+ price: 0,
+ priceRange: ""
+ },
+ customBackground: {
+ name: 'Custom Background',
+ description: 'Add a custom background to the commission',
+ pricePercent: 0,
+ price: 0,
+ priceRange: "10#50"
+ },
+ nsfw: {
+ name: 'NSFW',
+ description: 'Add NSFW content to the commission',
+ pricePercent: 15,
+ price: 0,
+ priceRange: ""
+ },
+ normalComplexity: {
+ name: 'Light Complexity',
+ description: 'Increase complexity of the commission',
+ pricePercent: 15,
+ price: 0,
+ priceRange: ""
+ },
+ highComplexity: {
+ name: 'High Complexity',
+ description: 'Highly increase complexity of the commission',
+ pricePercent: 30,
+ price: 0,
+ priceRange: ""
+ },
+ details: {
+ name: 'Details',
+ description: 'Add details to the commission (tails, eyes, ...)',
+ pricePercent: 0,
+ price: 0,
+ priceRange: "3#5"
+ },
+ shading: {
+ name: 'Shading',
+ description: 'Add shading to the commission',
+ pricePercent: 0,
+ price: 20,
+ priceRange: ""
+ }
+}
+
+export const rawCommissions = [
+ {
+ type: commissionTypes.sketch,
+ options: [
+ {
+ type: commissionOptions.headshot,
+ price: commissionOptions.headshot.basePrice
+ },
+ {
+ type: commissionOptions.halfbody,
+ price: commissionOptions.halfbody.basePrice
+ },
+ {
+ type: commissionOptions.fullbody,
+ price: commissionOptions.fullbody.basePrice
+ }
+ ],
+ extras: [
+ {
+ type: commissionExtras.extraChar,
+ pricePercent: commissionExtras.extraChar.pricePercent
+ },
+ {
+ type: commissionExtras.basicBackground,
+ price: commissionExtras.basicBackground.price
+ },
+ {
+ type: commissionExtras.abstractBackground,
+ price: commissionExtras.abstractBackground.price
+ },
+ {
+ type: commissionExtras.gradientBackground,
+ price: commissionExtras.gradientBackground.price
+ },
+ {
+ type: commissionExtras.customBackground,
+ priceRange: commissionExtras.customBackground.priceRange
+ },
+ {
+ type: commissionExtras.nsfw,
+ pricePercent: commissionExtras.nsfw.pricePercent
+ },
+ {
+ type: commissionExtras.normalComplexity,
+ pricePercent: commissionExtras.normalComplexity.pricePercent
+ },
+ {
+ type: commissionExtras.highComplexity,
+ pricePercent: commissionExtras.highComplexity.pricePercent
+ },
+ ],
+ examples: [
+ '/examples/sketch1.png'
+ ]
+ },
+ {
+ type: commissionTypes.flat,
+ options: [
+ {
+ type: commissionOptions.headshot,
+ price: 18
+ },
+ {
+ type: commissionOptions.halfbody,
+ price: 22
+ },
+ {
+ type: commissionOptions.fullbody,
+ price: 28
+ }
+ ],
+ extras: [
+ {
+ type: commissionExtras.extraChar,
+ pricePercent: commissionExtras.extraChar.pricePercent
+ },
+ {
+ type: commissionExtras.basicBackground,
+ price: commissionExtras.basicBackground.price
+ },
+ {
+ type: commissionExtras.abstractBackground,
+ price: commissionExtras.abstractBackground.price
+ },
+ {
+ type: commissionExtras.gradientBackground,
+ price: commissionExtras.gradientBackground.price
+ },
+ {
+ type: commissionExtras.customBackground,
+ priceRange: commissionExtras.customBackground.priceRange
+ },
+ {
+ type: commissionExtras.nsfw,
+ pricePercent: commissionExtras.nsfw.pricePercent
+ },
+ {
+ type: commissionExtras.normalComplexity,
+ pricePercent: commissionExtras.normalComplexity.pricePercent
+ },
+ {
+ type: commissionExtras.highComplexity,
+ pricePercent: commissionExtras.highComplexity.pricePercent
+ }
+ ],
+ examples: [
+ '/examples/flat1.png',
+ '/examples/flat2.png'
+ ]
+ },
+ {
+ type: commissionTypes.shaded,
+ options: [
+ {
+ type: commissionOptions.headshot,
+ price: 25
+ },
+ {
+ type: commissionOptions.halfbody,
+ price: 40
+ },
+ {
+ type: commissionOptions.fullbody,
+ price: 55
+ }
+ ],
+ extras: [
+ {
+ type: commissionExtras.extraChar,
+ pricePercent: commissionExtras.extraChar.pricePercent
+ },
+ {
+ type: commissionExtras.basicBackground,
+ price: commissionExtras.basicBackground.price
+ },
+ {
+ type: commissionExtras.abstractBackground,
+ price: commissionExtras.abstractBackground.price
+ },
+ {
+ type: commissionExtras.gradientBackground,
+ price: commissionExtras.gradientBackground.price
+ },
+ {
+ type: commissionExtras.customBackground,
+ priceRange: "20#100"
+ },
+ {
+ type: commissionExtras.nsfw,
+ pricePercent: commissionExtras.nsfw.pricePercent
+ },
+ {
+ type: commissionExtras.normalComplexity,
+ pricePercent: commissionExtras.normalComplexity.pricePercent
+ },
+ {
+ type: commissionExtras.highComplexity,
+ pricePercent: commissionExtras.highComplexity.pricePercent
+ }
+ ],
+ examples: [
+ '/examples/shaded1.png'
+ ]
+ },
+ {
+ type: commissionTypes.refsheet,
+ options: [
+ {
+ type: commissionOptions.fullbody,
+ price: 25
+ }
+ ],
+ extras: [
+ {
+ type: commissionExtras.customBackground,
+ priceRange: "20#100"
+ },
+ {
+ type: commissionExtras.nsfw,
+ pricePercent: commissionExtras.nsfw.pricePercent
+ },
+ {
+ type: commissionExtras.normalComplexity,
+ pricePercent: commissionExtras.normalComplexity.pricePercent
+ },
+ {
+ type: commissionExtras.highComplexity,
+ pricePercent: commissionExtras.highComplexity.pricePercent
+ },
+ {
+ type: commissionExtras.details,
+ priceRange: commissionExtras.details.priceRange
+ },
+ {
+ type: commissionExtras.shading,
+ price: commissionExtras.shading.price
+ }
+ ],
+ examples: [
+ '/examples/refsheet1.png'
+ ]
+ }
+]
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
new file mode 100644
index 0000000..bd0c391
--- /dev/null
+++ b/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs))
+}
diff --git a/src/schemas/commission.ts b/src/schemas/commission.ts
new file mode 100644
index 0000000..a437eb0
--- /dev/null
+++ b/src/schemas/commission.ts
@@ -0,0 +1,14 @@
+import { z } from "zod"
+
+export const commissionOrderSchema = z.object({
+ type: z.enum(["sketch", "flat", "shaded", "refsheet"]),
+ body: z.enum(["headshot", "portrait", "waistup", "fullbody"]).optional(),
+ extras: z.array(z.string()).optional(),
+ customExtras: z.string().optional(),
+ description: z.string().min(10),
+ contact: z.string().email("Please enter a valid email"),
+ referenceFiles: z.array(z.any()).optional(), // for now just accept any File[]
+ tosAccepted: z.literal(true), // must be checked
+})
+
+export type commissionOrderSchema = z.infer
\ No newline at end of file
diff --git a/src/types/commissions.ts b/src/types/commissions.ts
new file mode 100644
index 0000000..3c07e83
--- /dev/null
+++ b/src/types/commissions.ts
@@ -0,0 +1,59 @@
+// types/commissions.ts
+
+export interface CommissionType {
+ name: string
+ description: string
+}
+
+export interface CommissionOptionType {
+ name: string
+ basePrice: number
+}
+
+export interface CommissionOption {
+ type: CommissionOptionType
+ price: number
+}
+
+export interface CommissionExtraType {
+ name: string
+ description: string
+ pricePercent?: number
+ price?: number
+ priceRange?: string
+}
+
+export interface CommissionExtra {
+ type: CommissionExtraType
+ price?: number
+ pricePercent?: number
+ priceRange?: string
+}
+
+export interface Commission {
+ type: CommissionType
+ options: CommissionOption[]
+ extras: CommissionExtra[]
+}
+
+export interface CommissionCardProps {
+ type: {
+ key: string
+ name: string
+ description: string
+ }
+ options: {
+ key: string
+ name: string
+ price: number
+ }[]
+ extras: {
+ key: string
+ name: string
+ description: string
+ price?: number
+ pricePercent?: number
+ priceRange?: string
+ }[],
+ examples?: string[]
+}
\ No newline at end of file
diff --git a/src/utils/generateMockCommissions.ts b/src/utils/generateMockCommissions.ts
new file mode 100644
index 0000000..c85b8b7
--- /dev/null
+++ b/src/utils/generateMockCommissions.ts
@@ -0,0 +1,75 @@
+// import {
+// commissionTypes,
+// commissionOptions,
+// commissionExtras,
+// rawCommissions,
+// } from "./mockData" // adjust your import paths
+
+import { commissionExtras, commissionOptions, commissionTypes, rawCommissions } from "@/data/mockCommissions"
+
+export type CommissionCard = {
+ type: {
+ key: string
+ name: string
+ description: string
+ }
+ options: {
+ key: string
+ name: string
+ price: number
+ }[]
+ extras: {
+ key: string
+ name: string
+ description: string
+ price?: number
+ pricePercent?: number
+ priceRange?: string
+ }[]
+}
+
+export const generateMockCommissions = (): CommissionCard[] => {
+ return rawCommissions.map((commission) => {
+ const typeKey = Object.entries(commissionTypes).find(
+ ([, v]) => v.name === commission.type.name
+ )?.[0] ?? "unknown"
+
+ const options = commission.options.map((opt) => {
+ const optionKey = Object.entries(commissionOptions).find(
+ ([, v]) => v.name === opt.type.name
+ )?.[0] ?? "unknown"
+
+ return {
+ key: optionKey,
+ name: opt.type.name,
+ price: opt.price,
+ }
+ })
+
+ const extras = commission.extras.map((extra) => {
+ const extraKey = Object.entries(commissionExtras).find(
+ ([, v]) => v.name === extra.type.name
+ )?.[0] ?? "unknown"
+
+ return {
+ key: extraKey,
+ name: extra.type.name,
+ description: extra.type.description,
+ price: extra.price ?? undefined,
+ pricePercent: extra.pricePercent ?? undefined,
+ priceRange: extra.priceRange ?? undefined,
+ }
+ })
+
+ return {
+ type: {
+ key: typeKey,
+ name: commission.type.name,
+ description: commission.type.description,
+ },
+ options,
+ extras,
+ examples: commission.examples,
+ }
+ })
+}