add api cpn for scraping api

app/(protected)/dashboard/scrape/markdown/page.tsx

@@ -3,6 +3,7 @@ import { redirect } from "next/navigation";
 import { getCurrentUser } from "@/lib/session";
 import { constructMetadata } from "@/lib/utils";
 import { DashboardHeader } from "@/components/dashboard/header";
+import ApiReference from "@/components/shared/api-reference";
 
 import { MarkdownScraping, TextScraping } from "../scrapes";
 
@@ -21,10 +22,20 @@ export default async function DashboardPage() {
     <>
       <DashboardHeader
         heading="Url&nbsp;&nbsp;to&nbsp;&nbsp;Markdown"
-        text="Quickly extract website content and convert it to Markdown format. It's free and unlimited to use!"
+        text="Quickly extract website content and convert it to Markdown format."
         link="/docs/open-api/markdown"
         linkText="Markdown API."
       />
+      <ApiReference
+        badge="POST /api/v1/scraping/markdown"
+        target="extracting url as markdown"
+        link="/docs/open-api/markdown"
+      />
+      <ApiReference
+        badge="POST /api/v1/scraping/text"
+        target="extracting url as text"
+        link="/docs/open-api/text"
+      />
       <MarkdownScraping user={{ id: user.id, apiKey: user.apiKey }} />
       <TextScraping user={{ id: user.id, apiKey: user.apiKey }} />
     </>

app/(protected)/dashboard/scrape/meta-info/page.tsx

@@ -3,6 +3,7 @@ import { redirect } from "next/navigation";
 import { getCurrentUser } from "@/lib/session";
 import { constructMetadata } from "@/lib/utils";
 import { DashboardHeader } from "@/components/dashboard/header";
+import ApiReference from "@/components/shared/api-reference";
 
 import DashboardScrapeCharts from "../charts";
 import { MetaScraping } from "../scrapes";
@@ -21,10 +22,15 @@ export default async function DashboardPage() {
     <>
       <DashboardHeader
         heading="Url&nbsp;&nbsp;to&nbsp;&nbsp;Meta&nbsp;&nbsp;Info"
-        text="Quickly extract valuable structured website data. It's free and unlimited to use!"
+        text="Quickly extract valuable structured website data."
         link="/docs/open-api/meta-info"
         linkText="Meta Info API."
       />
+      <ApiReference
+        badge="POST /api/v1/scraping/meta"
+        target="extracting url as meta info"
+        link="/docs/open-api/meta-info"
+      />
       <MetaScraping user={{ id: user.id, apiKey: user.apiKey }} />
     </>
   );

app/(protected)/dashboard/scrape/qrcode/page.tsx

@@ -3,6 +3,7 @@ import { redirect } from "next/navigation";
 import { getCurrentUser } from "@/lib/session";
 import { constructMetadata } from "@/lib/utils";
 import { DashboardHeader } from "@/components/dashboard/header";
+import ApiReference from "@/components/shared/api-reference";
 import QRCodeEditor from "@/components/shared/qr";
 
 import { CodeLight, QrCodeScraping } from "../scrapes";
@@ -25,6 +26,11 @@ export default async function DashboardPage() {
         link="/docs/open-api/qrcode"
         linkText="QR Code API."
       />
+      <ApiReference
+        badge="POST /api/v1/scraping/qrcode"
+        target="extracting url as QR code"
+        link="/docs/open-api/qrcode"
+      />
       <CodeLight content={`https://wr.do/api/v1/scraping/qrcode`} />
       <QRCodeEditor
         user={{ id: user.id, apiKey: user.apiKey || "" }}

app/(protected)/dashboard/scrape/screenshot/page.tsx

@@ -3,6 +3,7 @@ import { redirect } from "next/navigation";
 import { getCurrentUser } from "@/lib/session";
 import { constructMetadata } from "@/lib/utils";
 import { DashboardHeader } from "@/components/dashboard/header";
+import ApiReference from "@/components/shared/api-reference";
 
 import DashboardScrapeCharts from "../charts";
 import { ScreenshotScraping } from "../scrapes";
@@ -22,10 +23,15 @@ export default async function DashboardPage() {
     <>
       <DashboardHeader
         heading="Url&nbsp;&nbsp;to&nbsp;&nbsp;Screenshot"
-        text="Quickly extract website screenshots. It's free and unlimited to use!"
+        text="Quickly extract website screenshots."
         link="/docs/open-api/screenshot"
         linkText="Screenshot API."
       />
+      <ApiReference
+        badge="POST /api/v1/scraping/screenshot"
+        target="extracting url as screenshot"
+        link="/docs/open-api/screenshot"
+      />
       <ScreenshotScraping user={{ id: user.id, apiKey: user.apiKey }} />
     </>
   );

app/(protected)/dashboard/urls/page.tsx

@@ -4,7 +4,7 @@ import { getCurrentUser } from "@/lib/session";
 import { constructMetadata } from "@/lib/utils";
 import { DashboardHeader } from "@/components/dashboard/header";
 
-import ApiReference from "./api-reference";
+import ApiReference from "../../../../components/shared/api-reference";
 import LiveLog from "./live-logs";
 import UserUrlsList from "./url-list";
 
@@ -37,7 +37,11 @@ export default async function DashboardPage() {
         action="/api/url"
       />
       <LiveLog admin={false} />
-      <ApiReference />
+      <ApiReference
+        badge="POST /api/v1/short"
+        target="creating short urls"
+        link="/docs/short-urls#api-reference"
+      />
     </>
   );
 }

components/email/EmailSidebar.tsx

@@ -548,7 +548,6 @@ export default function EmailSidebar({
           currentPage={currentPage}
           setCurrentPage={setCurrentPage}
           pageSize={pageSize}
-          setPageSize={setPageSize}
           layout="center"
         />
       )}

components/shared/api-reference.tsx

@@ -9,23 +9,31 @@ import {
   CardTitle,
 } from "@/components/ui/card";
 
-export default function ApiReference() {
+export default function ApiReference({
+  badge,
+  target,
+  link,
+}: {
+  badge: string;
+  target: string;
+  link: string;
+}) {
   return (
     <Card>
       <CardHeader>
         <CardTitle>API Reference</CardTitle>
       </CardHeader>
       <CardContent>
-        <Badge>POST /api/v1/short</Badge>
+        <Badge>{badge}</Badge>
         <div className="mt-2">
-          We provide a simple API for creating short URLs. See usage
-          instructions at{" "}
+          <span style={{ fontFamily: "Bahamas Bold" }}>WR.DO</span> provide a
+          api for {target}. View the usage tutorial document{" "}
           <Link
-            href={"/docs/short-urls#api-reference"}
+            href={link}
             target="_blank"
             className="font-semibold after:content-['_↗'] hover:text-blue-500 hover:underline"
           >
-            api reference
+            here
           </Link>
           .
         </div>