Add socials

src/app/globals.css

@@ -128,7 +128,7 @@
 }
 
 .markdown h3 {
-  @apply text-2xl font-medium mt-5 mb-2;
+  @apply text-xl font-bold mb-2;
 }
 
 .markdown p {
@@ -144,7 +144,7 @@
 }
 
 .markdown li {
-  @apply mb-1;
+  /* @apply mb-1; */
 }
 
 .markdown blockquote {

src/components/SocialLinks.tsx

@@ -4,10 +4,11 @@ import {
   siMastodon,
   siPaypal,
   siTelegram,
+  siTwitch,
   type SimpleIcon,
 } from "simple-icons";
 
-type SocialKey = "paypal" | "telegram" | "mastodon" | "bluesky" | "linktree";
+type SocialKey = "paypal" | "telegram" | "mastodon" | "bluesky" | "linktree" | "twitch";
 
 const SOCIALS: Record<
   SocialKey,
@@ -38,6 +39,11 @@ const SOCIALS: Record<
     icon: siLinktree,
     href: "https://linktr.ee/gaertan",
   },
+  twitch: {
+    label: "Twitch",
+    icon: siTwitch,
+    href: "https://www.twitch.tv/gaertan_art",
+  }
 };
 
 function BrandSvg({ icon }: { icon: SimpleIcon }) {
@@ -54,7 +60,7 @@ function BrandSvg({ icon }: { icon: SimpleIcon }) {
 }
 
 export function SocialLinks({
-  items = ["paypal", "telegram", "mastodon", "bluesky", "linktree"],
+  items = ["paypal", "telegram", "mastodon", "bluesky", "linktree", "twitch"],
   size = "md",
 }: {
   items?: SocialKey[];

src/components/commissions/CommissionCard.tsx

@@ -53,11 +53,11 @@ export function CommissionCard({ commission }: { commission: CommissionTypeWithI
               {commission.options.map((option) => (
                 <li key={option.id}>
                   {option.option?.name}:{" "}
-                  {option.price
+                  {option.price && option.price !== 0
                     ? `${option.price}€`
                     : option.pricePercent
                       ? `+${option.pricePercent}%`
-                      : option.priceRange
+                      : option.priceRange && option.priceRange !== "0–0"
                         ? `${option.priceRange}€`
                         : "Included"}
                 </li>
@@ -66,16 +66,16 @@ export function CommissionCard({ commission }: { commission: CommissionTypeWithI
           </div>
 
           <div>
-            <h4 className="font-semibold">Extras</h4>
+            {commission.extras.length > 0 && <h4 className="font-semibold">Extras</h4>}
             <ul className="pl-4 list-disc">
               {commission.extras.map((extra) => (
                 <li key={extra.id}>
                   {extra.extra?.name}:{" "}
-                  {extra.price
+                  {extra.price && extra.price !== 0
                     ? `${extra.price}€`
                     : extra.pricePercent
                       ? `+${extra.pricePercent}%`
-                      : extra.priceRange
+                      : extra.priceRange && extra.priceRange !== "0–0"
                         ? `${extra.priceRange}€`
                         : "Included"}
                 </li>

src/components/commissions/CommissionOrderForm.tsx

@@ -40,6 +40,7 @@ export function CommissionOrderForm({ types }: Props) {
       extraIds: [],
       customerName: "",
       customerEmail: "",
+      customerSocials: "",
       message: "",
     },
   })
@@ -190,7 +191,20 @@ export function CommissionOrderForm({ types }: Props) {
               <FormItem>
                 <FormLabel>Email</FormLabel>
                 <FormControl>
-                  <Input placeholder="jane@example.com" {...field} />
+                  <Input placeholder="E-Mail address for invoice and/or contact" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="customerSocials"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Socials</FormLabel>
+                <FormControl>
+                  <Input placeholder="Alternative for contact (telegram, bsky, fediverse/mastodon)" {...field} />
                 </FormControl>
                 <FormMessage />
               </FormItem>

src/schemas/commissionOrder.ts

@@ -7,5 +7,6 @@ export const commissionOrderSchema = z.object({
   customFields: z.record(z.string(), z.any()).optional(),
   customerName: z.string().min(2, "Enter your name"),
   customerEmail: z.email("Invalid email"),
+  customerSocials: z.string().optional(),
   message: z.string().min(5, "Please describe what you want"),
 })