update config

src/app/(lobby)/(main)/@modal/(.)preview/product/[productId]/loading.tsx

@@ -8,7 +8,7 @@ export default function ProductModalLoading() {
     <DialogShell className="flex flex-col gap-2 overflow-visible sm:flex-row">
       <Skeleton className="absolute right-10 top-4 h-4 w-4" />
       <PlaceholderImage ratio={16 / 9} className="rounded-none" />
-      <div className="w-full space-y-6 p-6 sm:p-10">
+      <div className="w-full space-y-8 p-6 sm:p-10">
         <div className="space-y-2.5">
           <Skeleton className="h-7 w-1/2" />
           <Skeleton className="h-4 w-10" />

src/components/placeholder-image.tsx

@@ -2,6 +2,7 @@ import { Slot } from "@radix-ui/react-slot"
 
 import { cn } from "@/lib/utils"
 import { AspectRatio } from "@/components/ui/aspect-ratio"
+import { Skeleton } from "@/components/ui/skeleton"
 import { Icons } from "@/components/icons"
 
 interface PlaceholderImageProps
@@ -22,17 +23,17 @@ export function PlaceholderImage({
       {...props}
       className={cn("overflow-hidden rounded-lg", className)}
     >
-      <div
+      <Skeleton
         aria-label="Placeholder"
         role="img"
         aria-roledescription="placeholder"
-        className="flex h-full w-full items-center justify-center bg-secondary"
+        className="flex h-full w-full items-center justify-center"
       >
         <Icons.placeholder
           className="h-9 w-9 text-muted-foreground"
           aria-hidden="true"
         />
-      </div>
+      </Skeleton>
     </Comp>
   )
 }

tailwind.config.ts

@@ -59,6 +59,7 @@ module.exports = {
       },
       fontFamily: {
         sans: ["var(--font-sans)", ...fontFamily.sans],
+        mono: ["var(--font-mono)", ...fontFamily.mono],
         heading: ["var(--font-heading)", ...fontFamily.sans],
       },
       keyframes: {