Add footer to application layout

app/frontend/components/external_link.tsx

@@ -2,20 +2,25 @@ import { Link as LinkIcon, type LucideProps } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
 
+import { cn } from "@/utils/ui";
+
 interface Props {
   href: string;
   children: React.ReactNode;
   icon?: React.ForwardRefExoticComponent<
     Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>
-  >;
+  > | null;
+  className?: string;
 }
 
-function ExternalLink({ href, children, icon }: Props) {
+function ExternalLink({ href, children, icon, className }: Props) {
   const Icon = icon || LinkIcon;
 
   return (
-    <div className="flex items-center">
-      <Icon className="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400" />
+    <div className={cn("inline-flex items-center", className)}>
+      {icon !== null && (
+        <Icon className="mr-0.5 h-5 w-5 flex-shrink-0 text-gray-400" />
+      )}
 
       <Button variant="link" asChild className="px-0 py-0">
         <a href={href} target="_blank" rel="noopener noreferrer">

app/frontend/layouts/application.tsx

@@ -1,3 +1,5 @@
+import Footer from "@/layouts/application/footer";
+
 interface Props {
   children: React.ReactNode;
 }
@@ -13,6 +15,7 @@ function Layout({ children }: Props) {
       <main>
         <div className="container mx-auto pt-5 pb-10">{children}</div>
       </main>
+      <Footer />
     </div>
   );
 }

app/frontend/layouts/application/footer.tsx

@@ -0,0 +1,46 @@
+import ExternalLink from "@/components/external_link";
+import { Button } from "@/components/ui/button";
+
+import githubImage from "@/images/brands/github.svg";
+
+function Footer() {
+  return (
+    <footer className="bg-background border-t">
+      <div className="container mx-auto py-4 px-4 sm:px-6 lg:px-8">
+        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center space-y-4 sm:space-y-0">
+          <div className="flex flex-row items-center space-x-2">
+            <Button variant="ghost" size="icon" asChild className="p-0 h-auto">
+              <a
+                href="https://github.com/CalvinWalzel/ruby-companies"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <img src={githubImage} alt="GitHub" className="w-5 h-5 m-0" />
+                <span className="sr-only">GitHub repository</span>
+              </a>
+            </Button>
+            <div className="text-sm text-muted-foreground">
+              created by Calvin Walzel & Gitta van der Pol
+            </div>
+          </div>
+          <div className="flex items-center space-x-4">
+            <span className="text-sm text-muted-foreground flex items-center">
+              sponsored by{" "}
+              <ExternalLink
+                href="https://avohq.io"
+                className="ml-1"
+                icon={null}
+              >
+                AvoHQ
+              </ExternalLink>
+            </span>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+Footer.displayName = "layouts/application/footer";
+
+export default Footer;