fix birdseye and empty card (#20582)

web/src/components/card/EmptyCard.tsx

@@ -1,27 +1,30 @@
 import React from "react";
 import { Button } from "../ui/button";
 import Heading from "../ui/heading";
+import { Link } from "react-router-dom";
 
 type EmptyCardProps = {
   icon: React.ReactNode;
   title: string;
   description: string;
   buttonText?: string;
+  link?: string;
 };
 export function EmptyCard({
   icon,
   title,
   description,
   buttonText,
+  link,
 }: EmptyCardProps) {
   return (
     <div className="flex flex-col items-center gap-2">
       {icon}
       <Heading as="h4">{title}</Heading>
-      <div className="text-secondary-foreground">{description}</div>
+      <div className="mb-3 text-secondary-foreground">{description}</div>
       {buttonText?.length && (
         <Button size="sm" variant="select">
-          {buttonText}
+          <Link to={link ?? "#"}>{buttonText}</Link>
         </Button>
       )}
     </div>