chore: add links to light version (#1108)

apps/web/src/app/play/page.tsx

@@ -3,6 +3,7 @@ import {
   Clock,
   FileCode,
   Gauge,
+  Package,
   Palette,
   PanelTop,
   Table,
@@ -66,6 +67,13 @@ const playgrounds: CardProps[] = [
     description: "Easily generate curl commands to test your API endpoints.",
     icon: Terminal,
   },
+  {
+    href: "https://light.openstatus.dev",
+    title: "Vercel Edge Ping",
+    description:
+      "Lightweight one-click self-hostable checker for vercel's edge network.",
+    icon: Package,
+  },
   {
     href: "/public/monitors/1",
     title: "Public Dashboard",

apps/web/src/components/layout/marketing-footer.tsx

@@ -52,6 +52,10 @@ export function MarketingFooter({ className }: Props) {
             <FooterLink href="/play/checker" label="Speed Checker" />
             <FooterLink href="/play/curl" label="cURL Builder" />
             <FooterLink href="https://openstat.us" label="All Status Codes" />
+            <FooterLink
+              href="https://light.openstatus.dev"
+              label="Vercel Edge Ping"
+            />
           </div>
         </div>
         <div className="flex items-center justify-between gap-3">
@@ -87,14 +91,12 @@ function FooterLink({ href, label, external = false }: FooterLinkProps) {
 
   return (
     <Link
-      className="inline-flex w-fit items-center text-muted-foreground underline underline-offset-4 hover:text-foreground hover:no-underline"
+      className="flex flex-wrap gap-1 w-fit items-center text-muted-foreground underline underline-offset-4 hover:text-foreground hover:no-underline"
       href={href}
       {...externalProps}
     >
       {label}
-      {isExternal ? (
-        <ArrowUpRight className="ml-1 h-4 w-4 flex-shrink-0" />
-      ) : null}
+      {isExternal ? <ArrowUpRight className="h-4 w-4 flex-shrink-0" /> : null}
     </Link>
   );
 }