From a1438074ea96245c95c75c1e6eab5bd8f75ea734 Mon Sep 17 00:00:00 2001
From: Calvin Walzel <calvin@pixelhub.nl>
Date: Sat, 14 Sep 2024 01:03:00 +0200
Subject: [PATCH] Add search to companies controller

---
 app/frontend/components/external_link.tsx   | 13 ++++--
 app/frontend/images/brands/github.svg       |  1 +
 app/frontend/layouts/application.tsx        |  3 ++
 app/frontend/layouts/application/footer.tsx | 47 +++++++++++++++++++++
 4 files changed, 60 insertions(+), 4 deletions(-)
 create mode 100644 app/frontend/images/brands/github.svg
 create mode 100644 app/frontend/layouts/application/footer.tsx

diff --git a/app/frontend/components/external_link.tsx b/app/frontend/components/external_link.tsx
index de666d4..54f9df8 100644
--- a/app/frontend/components/external_link.tsx
+++ b/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">
diff --git a/app/frontend/images/brands/github.svg b/app/frontend/images/brands/github.svg
new file mode 100644
index 0000000..538ec5b
--- /dev/null
+++ b/app/frontend/images/brands/github.svg
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
\ No newline at end of file
diff --git a/app/frontend/layouts/application.tsx b/app/frontend/layouts/application.tsx
index 23c687e..c8d7d80 100644
--- a/app/frontend/layouts/application.tsx
+++ b/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>
   );
 }
diff --git a/app/frontend/layouts/application/footer.tsx b/app/frontend/layouts/application/footer.tsx
new file mode 100644
index 0000000..9d05610
--- /dev/null
+++ b/app/frontend/layouts/application/footer.tsx
@@ -0,0 +1,47 @@
+import ExternalLink from "@/components/external_link";
+import { Button } from "@/components/ui/button";
+
+import githubImage from "@/images/brands/github.svg";
+import avoHQImage from "@/images/sponsors/avohq.png";
+
+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;