Update Footer component

ruchernchong · Jun 25, 2024 · a63f8bb · a63f8bb
1 parent 16f1375
commit a63f8bb
Showing 1 changed file with 101 additions and 54 deletions.
diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx
@@ -1,61 +1,108 @@
-import { AnchorHTMLAttributes, PropsWithChildren } from "react";
-import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";
-
-interface LinkProps
-  extends PropsWithChildren,
-    AnchorHTMLAttributes<HTMLAnchorElement> {
-  href: string;
-  useIcon?: boolean;
-}
-
-const Link = ({ href, rel, useIcon = true, children }: LinkProps) => {
-  rel = ["noopener", rel].join(" ");
-
-  return (
-    <a
-      href={href}
-      target="_blank"
-      rel={rel}
-      className="inline-flex items-center text-gray-900 underline underline-offset-4"
-    >
-      {children}
-      {useIcon && <ArrowTopRightOnSquareIcon width={16} height={16} />}
-    </a>
-  );
-};
+import Link from "next/link";
+import { Separator } from "@/components/ui/separator";
 
 export const Footer = () => {
   return (
-    <footer className="flex justify-center gap-4 bg-gray-100 px-4 py-8">
-      <div className="mx-auto flex w-full max-w-6xl flex-col items-center justify-center gap-y-4">
-        <div className="flex gap-x-4">
-          <span>
-            Developed by <Link href="https://ruchern.xyz">Chong Ru Chern</Link>
-          </span>
-          <span>
-            <Link href="https://github.com/ruchernchong/singapore-ev-trends">
-              Source code
-            </Link>
-          </span>
+    <footer className="bg-gray-100 p-8">
+      <div className="container mx-auto px-4">
+        <div className="grid grid-cols-2 gap-8 md:grid-cols-3">
+          <div>
+            <h3 className="mb-2 font-semibold text-primary">Cars</h3>
+            <ul className="flex flex-col gap-y-2">
+              <li>
+                <a href="/cars" className="text-gray-600 hover:text-blue-600">
+                  All Cars
+                </a>
+              </li>
+              <li>
+                <Link
+                  href="/cars/petrol"
+                  className="text-gray-600 hover:text-blue-600"
+                >
+                  Petrol Cars
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="/cars/hybrid"
+                  className="text-gray-600 hover:text-blue-600"
+                >
+                  Hybrid Cars
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="/cars/electric"
+                  className="text-gray-600 hover:text-blue-600"
+                >
+                  Electric Cars
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="/cars/diesel"
+                  className="text-gray-600 hover:text-blue-600"
+                >
+                  Diesel Cars
+                </Link>
+              </li>
+            </ul>
+          </div>
+          <div>
+            <h3 className="mb-2 font-semibold text-gray-900">COE</h3>
+            <ul className="flex flex-col gap-y-2">
+              <li>
+                <a
+                  href="/coe/prices"
+                  className="text-gray-600 hover:text-blue-600"
+                >
+                  COE Prices
+                </a>
+              </li>
+              <li>
+                <a
+                  href="/coe/bidding"
+                  className="text-gray-600 hover:text-blue-600"
+                >
+                  COE Bidding
+                </a>
+              </li>
+            </ul>
+          </div>
+          <div>
+            <h3 className="mb-2 font-semibold text-gray-900">Resources</h3>
+            <ul className="flex flex-col gap-y-2">
+              <li>
+                <a href="/about" className="text-gray-600 hover:text-blue-600">
+                  About
+                </a>
+              </li>
+              <li>
+                <a
+                  href="/contact"
+                  className="text-gray-600 hover:text-blue-600"
+                >
+                  Contact
+                </a>
+              </li>
+            </ul>
+          </div>
         </div>
-        <div>
-          Data provided by{" "}
-          <Link
-            href="https://www.lta.gov.sg/content/ltagov/en.html"
-            rel="nofollow"
-            useIcon={false}
-          >
-            Land Transport Authority (LTA)
-          </Link>
-          . For more information, visit&nbsp;
-          <Link
-            href="https://datamall.lta.gov.sg/content/datamall/en/static-data.html"
-            rel="nofollow"
-            useIcon={false}
-          >
-            Land Transport Datamall
-          </Link>
-          . &copy; {new Date().getFullYear()}. All Rights Reserved.
+        <Separator className="my-4" />
+        <div className="flex flex-col items-center justify-between gap-4 text-sm text-gray-600 md:flex-row">
+          <div>
+            Data provided by{" "}
+            <a href="https://www.lta.gov.sg/content/ltagov/en.html">
+              Land Transport Authority (LTA)
+            </a>{" "}
+            <a
+              href="https://datamall.lta.gov.sg/content/datamall/en/static-data.html"
+              className="text-blue-600 hover:underline"
+            >
+              Land Transport Datamall
+            </a>
+          </div>
+          <div> &copy; {new Date().getFullYear()}. All Rights Reserved.</div>
         </div>
       </div>
     </footer>