From 25ad73aa9dcb78552eb07e186011ae315919ed2c Mon Sep 17 00:00:00 2001
From: Ardeman <are.theman@gmail.com>
Date: Sun, 2 Feb 2025 03:15:18 +0800
Subject: [PATCH] feat: add social media icons to footer menu and update layout

---
 app/components/icons/facebook.tsx    |  19 ++++
 app/components/icons/instagram.tsx   |  19 ++++
 app/components/icons/linkedin.tsx    |  19 ++++
 app/components/icons/x.tsx           |  19 ++++
 app/data/menu.ts                     | 124 +++++++++++++++++++++++++--
 app/pages/news/footer-links.tsx      |  54 +++++++++++-
 app/pages/news/footer-newsletter.tsx |   2 +-
 app/pages/news/index.tsx             |   2 +-
 8 files changed, 248 insertions(+), 10 deletions(-)
 create mode 100644 app/components/icons/facebook.tsx
 create mode 100644 app/components/icons/instagram.tsx
 create mode 100644 app/components/icons/linkedin.tsx
 create mode 100644 app/components/icons/x.tsx

diff --git a/app/components/icons/facebook.tsx b/app/components/icons/facebook.tsx
new file mode 100644
index 0000000..e354032
--- /dev/null
+++ b/app/components/icons/facebook.tsx
@@ -0,0 +1,19 @@
+import type { JSX, SVGProps } from 'react'
+
+export const FacebookIcon = (
+  properties: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      x="0px"
+      y="0px"
+      width={100}
+      height={100}
+      viewBox="0 0 30 30"
+      {...properties}
+    >
+      <path d="M15 3C8.373 3 3 8.373 3 15c0 6.016 4.432 10.984 10.206 11.852V18.18h-2.969v-3.154h2.969v-2.099c0-3.475 1.693-5 4.581-5 1.383 0 2.115.103 2.461.149v2.753h-1.97c-1.226 0-1.654 1.163-1.654 2.473v1.724h3.593l-.487 3.154h-3.106v8.697C22.481 26.083 27 21.075 27 15c0-6.627-5.373-12-12-12z" />
+    </svg>
+  )
+}
diff --git a/app/components/icons/instagram.tsx b/app/components/icons/instagram.tsx
new file mode 100644
index 0000000..231bb57
--- /dev/null
+++ b/app/components/icons/instagram.tsx
@@ -0,0 +1,19 @@
+import type { JSX, SVGProps } from 'react'
+
+export const InstagramIcon = (
+  properties: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      x="0px"
+      y="0px"
+      width={100}
+      height={100}
+      viewBox="0 0 30 30"
+      {...properties}
+    >
+      <path d="M9.998 3C6.139 3 3 6.142 3 10.002v10C3 23.861 6.142 27 10.002 27h10C23.861 27 27 23.858 27 19.998v-10C27 6.139 23.858 3 19.998 3h-10zM22 7a1 1 0 110 2 1 1 0 010-2zm-7 2c3.309 0 6 2.691 6 6s-2.691 6-6 6-6-2.691-6-6 2.691-6 6-6zm0 2a4 4 0 00-4 4 4 4 0 004 4 4 4 0 004-4 4 4 0 00-4-4z" />
+    </svg>
+  )
+}
diff --git a/app/components/icons/linkedin.tsx b/app/components/icons/linkedin.tsx
new file mode 100644
index 0000000..c1e94e1
--- /dev/null
+++ b/app/components/icons/linkedin.tsx
@@ -0,0 +1,19 @@
+import type { JSX, SVGProps } from 'react'
+
+export const LinkedinIcon = (
+  properties: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      x="0px"
+      y="0px"
+      width={100}
+      height={100}
+      viewBox="0 0 30 30"
+      {...properties}
+    >
+      <path d="M24 4H6a2 2 0 00-2 2v18a2 2 0 002 2h18a2 2 0 002-2V6a2 2 0 00-2-2zM10.954 22h-2.95v-9.492h2.95V22zM9.449 11.151a1.72 1.72 0 110-3.44 1.72 1.72 0 010 3.44zM22.004 22h-2.948v-4.616c0-1.101-.02-2.517-1.533-2.517-1.535 0-1.771 1.199-1.771 2.437V22h-2.948v-9.492h2.83v1.297h.04c.394-.746 1.356-1.533 2.791-1.533 2.987 0 3.539 1.966 3.539 4.522V22z" />
+    </svg>
+  )
+}
diff --git a/app/components/icons/x.tsx b/app/components/icons/x.tsx
new file mode 100644
index 0000000..f3daaf5
--- /dev/null
+++ b/app/components/icons/x.tsx
@@ -0,0 +1,19 @@
+import type { JSX, SVGProps } from 'react'
+
+export const XIcon = (
+  properties: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      x="0px"
+      y="0px"
+      width={100}
+      height={100}
+      viewBox="0 0 30 30"
+      {...properties}
+    >
+      <path d="M6 4a2 2 0 00-2 2v18a2 2 0 002 2h18a2 2 0 002-2V6a2 2 0 00-2-2H6zm2.648 5h4.612l2.691 3.848L19.281 9h1.451l-4.128 4.781L21.654 21h-4.611l-2.986-4.27L10.369 21H8.895l4.505-5.205L8.648 9zm2.23 1.184l6.755 9.627h1.789l-6.756-9.627h-1.787z" />
+    </svg>
+  )
+}
diff --git a/app/data/menu.ts b/app/data/menu.ts
index b01e3c5..ba008f3 100644
--- a/app/data/menu.ts
+++ b/app/data/menu.ts
@@ -1,30 +1,140 @@
+import type { JSX } from 'react'
+
+import { FacebookIcon } from '~/components/icons/facebook'
+import { InstagramIcon } from '~/components/icons/instagram'
+import { LinkedinIcon } from '~/components/icons/linkedin'
+import { XIcon } from '~/components/icons/x'
+
 export const MENU = [
   {
     title: 'Spotlight',
-    url: '/topic?category=spotlight',
+    url: '/news/topic?category=spotlight',
   },
   {
     title: 'Berita',
-    url: '/topic?category=berita',
+    url: '/news/topic?category=berita',
   },
   {
     title: 'Kasus',
-    url: '/topic?category=kasus',
+    url: '/news/topic?category=kasus',
   },
   {
     title: 'Kajian',
-    url: '/topic?category=kajian',
+    url: '/news/topic?category=kajian',
   },
   {
     title: 'Lifestyle',
-    url: '/topic?category=lifestyle',
+    url: '/news/topic?category=lifestyle',
   },
   {
     title: 'Event',
-    url: '/topic?category=event',
+    url: '/news/topic?category=event',
   },
   {
     title: 'Travel',
-    url: '/topic?category=travel',
+    url: '/news/topic?category=travel',
+  },
+]
+
+type FooterMenu = {
+  group: string
+  items: Array<{
+    title: string
+    url: string
+    icon?: (
+      properties: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>,
+    ) => JSX.Element
+  }>
+}
+export const FOOTER_MENU: FooterMenu[] = [
+  {
+    group: 'About Us',
+    items: [
+      {
+        title: 'Popular',
+        url: '/news/list?sort=popular',
+      },
+      {
+        title: 'Trending',
+        url: '/news/list?sort=trending',
+      },
+      {
+        title: 'Contact',
+        url: '/news/contact',
+      },
+      {
+        title: 'Support/Help',
+        url: '/news/support',
+      },
+      {
+        title: 'Rquest Topic',
+        url: '/news/request-topic',
+      },
+    ],
+  },
+  {
+    group: 'Column Two',
+    items: [
+      {
+        title: 'FAQs',
+        url: '/news/faq',
+      },
+      {
+        title: 'Terms and Condition',
+        url: '/news/terms-condition',
+      },
+      {
+        title: 'Support',
+        url: '/news/support',
+      },
+      {
+        title: 'Link Nine',
+        url: '/news',
+      },
+      {
+        title: 'Link Ten',
+        url: '/news',
+      },
+    ],
+  },
+  {
+    group: 'Follow Us',
+    items: [
+      {
+        title: 'Facebook',
+        icon: FacebookIcon,
+        url: 'https://facebook.com',
+      },
+      {
+        title: 'Instagram',
+        icon: InstagramIcon,
+        url: 'https://instagram.com',
+      },
+      {
+        title: 'X',
+        icon: XIcon,
+        url: 'https://x.com',
+      },
+      {
+        title: 'Linkedin',
+        icon: LinkedinIcon,
+        url: 'https://linkedin.com',
+      },
+    ],
+  },
+]
+
+export const COPYRIGHT_MENU = [
+  {
+    title: 'Privacy Policy',
+    url: '/news/privacy-policy',
+  },
+  {
+    title: 'Terms of Service',
+    url: '/news/terms-of-service',
+  },
+  {
+    title: 'Cookies Settings',
+    url: '/news/cookies-settings',
   },
 ]
diff --git a/app/pages/news/footer-links.tsx b/app/pages/news/footer-links.tsx
index 5b9ecfc..30dff67 100644
--- a/app/pages/news/footer-links.tsx
+++ b/app/pages/news/footer-links.tsx
@@ -1,3 +1,55 @@
+import { Link } from 'react-router'
+
+import { DUMMY } from '~/data/dummy'
+import { COPYRIGHT_MENU, FOOTER_MENU } from '~/data/menu'
+
 export const FooterLinks = () => {
-  return <div className="col-span-3">FooterLinks</div>
+  return (
+    <div className="col-span-3 flex flex-col justify-between">
+      <div className="grid grid-cols-3 gap-4">
+        {FOOTER_MENU.map(({ group, items }, index) => (
+          <div
+            key={index}
+            className="flex flex-col gap-3"
+          >
+            <h3 className="text-2xl font-semibold">{group}</h3>
+            <div>
+              {items.map(({ url, icon: Icon, title }, subIndex) => (
+                <Link
+                  key={subIndex}
+                  to={url}
+                  className="flex items-center gap-3 py-2"
+                >
+                  {Icon && (
+                    <Icon
+                      fill="white"
+                      width={24}
+                      height={24}
+                    />
+                  )}
+                  {title}
+                </Link>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+      <div className="flex justify-between border-t border-white pt-8 text-sm">
+        <div>
+          {new Date().getFullYear()} {DUMMY.title}. All rights reserved.
+        </div>
+        <div className="flex gap-6">
+          {COPYRIGHT_MENU.map(({ url, title }, index) => (
+            <Link
+              key={index}
+              to={url}
+              className="text-white underline"
+            >
+              {title}
+            </Link>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
 }
diff --git a/app/pages/news/footer-newsletter.tsx b/app/pages/news/footer-newsletter.tsx
index b59b38f..4014912 100644
--- a/app/pages/news/footer-newsletter.tsx
+++ b/app/pages/news/footer-newsletter.tsx
@@ -9,7 +9,7 @@ export const FooterNewsletter = () => {
       <div className="h-[75px] bg-white p-3">
         <Link
           to="/news"
-          className="h-full py-[5px]"
+          className="h-full"
         >
           <img
             src={DUMMY.logo}
diff --git a/app/pages/news/index.tsx b/app/pages/news/index.tsx
index acb09b2..5fabfb1 100644
--- a/app/pages/news/index.tsx
+++ b/app/pages/news/index.tsx
@@ -22,7 +22,7 @@ export const NewsPage: FC<PropsWithChildren> = ({ children }) => {
           {children}
         </div>
       </div>
-      <footer className="absolute bottom-0 grid w-full grid-cols-5 gap-32 bg-[#2E2F7C] px-16 py-20 text-white">
+      <footer className="grid w-full grid-cols-5 gap-16 bg-[#2E2F7C] px-16 py-20 text-white">
         <FooterNewsletter />
         <FooterLinks />
       </footer>