fix: og image compat

docs/app/api/og/route.tsx

@@ -7,7 +7,11 @@ const ogSchema = z.object({
   mode: z.string(),
   type: z.string(),
 });
-
+const val = {
+  heading: "Some headin",
+  mode: "dark",
+  type: "documentation",
+};
 export async function GET(req: Request) {
   try {
     const geist = await fetch(
@@ -18,7 +22,7 @@ export async function GET(req: Request) {
     ).then((res) => res.arrayBuffer());
     const url = new URL(req.url);
     const urlParamsValues = Object.fromEntries(url.searchParams);
-		const validParams = ogSchema.parse(urlParamsValues);
+    const validParams = ogSchema.parse(val);
     const { heading, type } = validParams;
     const trueHeading =
       heading.length > 140 ? `${heading.substring(0, 140)}...` : heading;
@@ -27,8 +31,9 @@ export async function GET(req: Request) {
 
     const fontSize = trueHeading.length > 100 ? "30px" : "60px";
     return new ImageResponse(
+      (
         <div
-				tw="flex w-full relative flex-col p-9"
+          tw="flex w-full relative flex-col p-12"
           style={{
             color: paint,
             backgroundColor: "transparent",
@@ -38,7 +43,7 @@ export async function GET(req: Request) {
           }}
         >
           <div
-					tw={`relative flex flex-col w-full h-full border-2 border-[${paint}]/20 p-8}`}
+            tw={`relative flex flex-col w-full h-full border-2 border-[${paint}]/20 p-10}`}
           >
             <svg
               style={{
@@ -182,7 +187,8 @@ export async function GET(req: Request) {
               </div>
             </div>
           </div>
-			</div>,
+        </div>
+      ),
       {
         width: 1200,
         height: 630,