feat: restructure News layout with new header and footer components; remove redundant files
This commit is contained in:
Ardeman
@@ -0,0 +1,56 @@
|
||||
import { Link } from 'react-router'
|
||||
|
||||
import { APP } from '~/data/dummy'
|
||||
|
||||
import { COPYRIGHT_MENU, FOOTER_MENU } from './menu'
|
||||
|
||||
export const FooterLinks = () => {
|
||||
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()} {APP.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>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
import { Link } from 'react-router'
|
||||
|
||||
import { Button } from '~/components/ui/button'
|
||||
import { APP } from '~/data/dummy'
|
||||
|
||||
export const FooterNewsletter = () => {
|
||||
return (
|
||||
<div className="col-span-2 grid gap-y-6">
|
||||
<div className="h-[75px] bg-white p-3">
|
||||
<Link
|
||||
to="/news"
|
||||
className="h-full"
|
||||
>
|
||||
<img
|
||||
src={APP.logo}
|
||||
alt={APP.title}
|
||||
className="h-full w-auto"
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
<h2 className="text-4xl font-bold">Join Our Newsletter</h2>
|
||||
<p className="text-lg">
|
||||
Tidak ingin ketinggalan Berita Hukum terhangat? ingin mendapat informasi
|
||||
kajian dan networking terbaru? ikuti Newsletter kami and Stay up to
|
||||
Speed!
|
||||
</p>
|
||||
<form className="grid gap-5">
|
||||
<input
|
||||
placeholder="Daftarkan Email Disini"
|
||||
className="h-[50px] flex-1 bg-white text-center text-lg font-light text-black placeholder:text-[#777777] focus:ring-0 focus:outline-none"
|
||||
size={1}
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="newsPrimaryOutline"
|
||||
size="block"
|
||||
>
|
||||
Subscribe
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import { Link } from 'react-router'
|
||||
|
||||
import { HeaderSearch } from './header-search'
|
||||
import { MENU } from './menu'
|
||||
|
||||
export const HeaderMenu = () => {
|
||||
return (
|
||||
<div className="flex h-[60px] items-center justify-between bg-[#2E2F7C] text-xl font-medium text-white">
|
||||
{MENU.map((item) => (
|
||||
<Link
|
||||
key={item.title}
|
||||
to={item.url}
|
||||
className={
|
||||
'flex h-full items-center justify-center border-r border-white px-[35px]'
|
||||
}
|
||||
>
|
||||
{item.title}
|
||||
</Link>
|
||||
))}
|
||||
<HeaderSearch />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { SearchIcon } from '~/components/icons/search'
|
||||
import { Button } from '~/components/ui/button'
|
||||
|
||||
export const HeaderSearch = () => {
|
||||
return (
|
||||
<form className="flex flex-1 justify-between gap-[15px] px-[35px]">
|
||||
<input
|
||||
placeholder="Cari..."
|
||||
className="flex-1 placeholder:text-white focus:ring-0 focus:outline-none"
|
||||
size={1}
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="icon"
|
||||
size="icon"
|
||||
className="[&_svg]:size-[30px]"
|
||||
>
|
||||
<SearchIcon />
|
||||
</Button>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
import { Link } from 'react-router'
|
||||
|
||||
import { Button } from '~/components/ui/button'
|
||||
import { APP } from '~/data/dummy'
|
||||
|
||||
export const HeaderTop = () => {
|
||||
return (
|
||||
<div className="flex h-[100px] items-center justify-between gap-[15px] bg-white px-[50px] py-[20px]">
|
||||
<Link
|
||||
to="/news"
|
||||
className="h-full py-[5px]"
|
||||
>
|
||||
<img
|
||||
src={APP.logo}
|
||||
alt={APP.title}
|
||||
className="h-full w-auto"
|
||||
/>
|
||||
</Link>
|
||||
<div className="flex h-full items-center py-1.5 font-light whitespace-pre-line">
|
||||
{APP.description}
|
||||
</div>
|
||||
<div className="flex items-center gap-[15px]">
|
||||
<Button>About Us</Button>
|
||||
<Button variant="newsSecondary">Akun</Button>
|
||||
<div className="w-[60px]">
|
||||
<img
|
||||
alt="language"
|
||||
src="/flags/id.svg"
|
||||
className="shadow-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +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: '/news/topic?category=spotlight',
|
||||
},
|
||||
{
|
||||
title: 'Berita',
|
||||
url: '/news/topic?category=berita',
|
||||
},
|
||||
{
|
||||
title: 'Kasus',
|
||||
url: '/news/topic?category=kasus',
|
||||
},
|
||||
{
|
||||
title: 'Kajian',
|
||||
url: '/news/topic?category=kajian',
|
||||
},
|
||||
{
|
||||
title: 'Lifestyle',
|
||||
url: '/news/topic?category=lifestyle',
|
||||
},
|
||||
{
|
||||
title: 'Event',
|
||||
url: '/news/topic?category=event',
|
||||
},
|
||||
{
|
||||
title: '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',
|
||||
},
|
||||
]
|
||||
Reference in New Issue
Block a user