feat: add social media icons to footer menu and update layout
This commit is contained in:
Ardeman
parent
ec0a125972
commit
25ad73aa9d
19
app/components/icons/facebook.tsx
Normal file
19
app/components/icons/facebook.tsx
Normal file
@ -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>
|
||||
)
|
||||
}
|
||||
19
app/components/icons/instagram.tsx
Normal file
19
app/components/icons/instagram.tsx
Normal file
@ -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>
|
||||
)
|
||||
}
|
||||
19
app/components/icons/linkedin.tsx
Normal file
19
app/components/icons/linkedin.tsx
Normal file
@ -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>
|
||||
)
|
||||
}
|
||||
19
app/components/icons/x.tsx
Normal file
19
app/components/icons/x.tsx
Normal file
@ -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>
|
||||
)
|
||||
}
|
||||
124
app/data/menu.ts
124
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',
|
||||
},
|
||||
]
|
||||
|
||||
@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user