fix: adjust height in OG image generation and replace SVG logo with LogoMark component

Author: Aniket-508

app/og/docs/[...slug]/route.tsx

@@ -1,6 +1,7 @@
 import { notFound } from "next/navigation";
 import { ImageResponse } from "next/og";
 
+import { LogoMark } from "@/components/logo";
 import { getPageImage, source } from "@/lib/source";
 
 export const revalidate = false;
@@ -24,36 +25,7 @@ export const GET = async (
       <div tw="flex border absolute border-stone-700 inset-x-0 h-[1px] top-16" />
       <div tw="flex border absolute border-stone-700 inset-x-0 h-[1px] bottom-16" />
       <div tw="flex absolute flex-row bottom-24 right-24 text-white">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 256 256"
-          width={48}
-          height={48}
-        >
-          <rect width="256" height="256" fill="none" />
-          <line
-            x1="208"
-            y1="128"
-            x2="128"
-            y2="208"
-            fill="none"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="32"
-          />
-          <line
-            x1="192"
-            y1="40"
-            x2="40"
-            y2="192"
-            fill="none"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="32"
-          />
-        </svg>
+        <LogoMark width={48} height={48} />
       </div>
       <div tw="flex flex-col absolute w-[896px] justify-center inset-32">
         <div

app/og/route.tsx

@@ -40,7 +40,7 @@ export const GET = (request: Request) => {
       </div>
     </div>,
     {
-      height: 628,
+      height: 630,
       width: 1200,
     }
   );

hooks/use-copy-to-clipboard.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import * as React from "react";
+import { useState } from "react";
 
 const legacyCopyToClipboard = (value: string) => {
   const textArea = document.createElement("textarea");
@@ -33,7 +33,7 @@ export const useCopyToClipboard = ({
   timeout?: number;
   onCopy?: () => void;
 } = {}) => {
-  const [isCopied, setIsCopied] = React.useState(false);
+  const [isCopied, setIsCopied] = useState(false);
 
   const copyToClipboard = async (value: string) => {
     if (typeof window === "undefined") {