From f17627bdf247bb7dc0329ed363d7cfff2e281a36 Mon Sep 17 00:00:00 2001 From: "fredy.siswanto" Date: Thu, 20 Feb 2025 01:37:35 +0700 Subject: [PATCH 1/2] style: slicing home page, adjust for mobile view slicing home page, adjust for mobile view --- app/components/ui/banner.tsx | 25 ++++ app/components/ui/button.tsx | 4 +- app/components/ui/carousel.tsx | 202 +++++++++++++++++++++-------- app/components/ui/newsletter.tsx | 44 +++++++ app/layouts/footer-links.tsx | 24 ++-- app/layouts/footer-newsletter.tsx | 81 +++++++----- app/layouts/header-menu-mobile.tsx | 88 +++++++++++++ app/layouts/header-menu.tsx | 33 +++-- app/layouts/header-search.tsx | 4 +- app/layouts/header-top.tsx | 21 ++- app/pages/news/data.ts | 6 + app/routes/_layout.news.tsx | 7 +- app/types/news.ts | 1 + 13 files changed, 412 insertions(+), 128 deletions(-) create mode 100644 app/components/ui/banner.tsx create mode 100644 app/components/ui/newsletter.tsx create mode 100644 app/layouts/header-menu-mobile.tsx diff --git a/app/components/ui/banner.tsx b/app/components/ui/banner.tsx new file mode 100644 index 0000000..3770a44 --- /dev/null +++ b/app/components/ui/banner.tsx @@ -0,0 +1,25 @@ +import { Link } from 'react-router' + +import { APP } from '~/data/meta' + +export default function Banner() { + return ( +
+
+ + {APP.title} + +

+ Lorem ipsum dolor sit, amet consectetur +

+
+
+ ) +} diff --git a/app/components/ui/button.tsx b/app/components/ui/button.tsx index d63cf17..bf4976f 100644 --- a/app/components/ui/button.tsx +++ b/app/components/ui/button.tsx @@ -29,8 +29,8 @@ const buttonVariants = cva( default: 'h-[50px] w-[150px]', block: 'h-[50px] w-full', icon: 'h-9 w-9', - // sm: 'h-8 rounded-md px-3 text-xs', - // lg: 'h-10 rounded-md px-8', + sm: 'h-8 rounded-md px-3 text-xs', + lg: 'h-10 rounded-md px-8', }, }, defaultVariants: { diff --git a/app/components/ui/carousel.tsx b/app/components/ui/carousel.tsx index c4582ed..87d3880 100644 --- a/app/components/ui/carousel.tsx +++ b/app/components/ui/carousel.tsx @@ -9,71 +9,159 @@ import { Button } from './button' export const Carousel = (properties: TNews) => { const { title, description, items, type } = properties return ( -
-
-
-

{title}

-

- {description} -

-
-
- - -
-
-
- {items.map(({ image, title, content }, index) => ( -
- {title} + {/*
+
+
+

{title}

+

+ {description} +

+
+
+ + +
+
+
+ {items.map(({ image, title, content }, index) => (
-
-

- {title} -

-

{content}

+ {title} +
+
+

+ {title} +

+

{content}

+
+
-
+ ))} +
+
*/} + +
+
+
+

+ {title} +

+

+ {description} +

- ))} + +
+ + +
+
+
+ {items.map(({ image, title, content, tag }, index) => ( +
+ {title} +
+
+ {tag?.map((item) => ( + + {item} + + ))} +
+ +
+

+ {title} +

+

+ {content} +

+
+ +
+
+ ))} +
-
+ ) } diff --git a/app/components/ui/newsletter.tsx b/app/components/ui/newsletter.tsx new file mode 100644 index 0000000..1c4f212 --- /dev/null +++ b/app/components/ui/newsletter.tsx @@ -0,0 +1,44 @@ +import { Button } from '~/components/ui/button' +import { APP } from '~/data/meta' + +export const UiNewsLetter = () => { + return ( + <> +
+
+

+ Join Our Newsletter +

+

+ Tidak ingin ketinggalan Berita Hukum terhangat? ingin mendapat + informasi kajian dan networking terbaru? ikuti Newsletter kami and + Stay up to Speed! +

+
+
+ {APP.title} +
+
+
+ + +
+
+
+ + ) +} diff --git a/app/layouts/footer-links.tsx b/app/layouts/footer-links.tsx index 0730917..afaf2cc 100644 --- a/app/layouts/footer-links.tsx +++ b/app/layouts/footer-links.tsx @@ -6,20 +6,22 @@ import { COPYRIGHT_MENU, FOOTER_MENU } from './menu' export const FooterLinks = () => { return ( -
-
+
+
{FOOTER_MENU.map(({ group, items }, index) => (
-

{group}

-
+

{group}

+
{items.map(({ url, icon: Icon, title }, subIndex) => ( {Icon && ( {
))}
-
-
- {new Date().getFullYear()} {APP.title}. All rights reserved. -
+
{COPYRIGHT_MENU.map(({ url, title }, index) => ( {title} ))}
+
+ {new Date().getFullYear()} {APP.title}. All rights reserved. +
) diff --git a/app/layouts/footer-newsletter.tsx b/app/layouts/footer-newsletter.tsx index 34648b2..eded96b 100644 --- a/app/layouts/footer-newsletter.tsx +++ b/app/layouts/footer-newsletter.tsx @@ -5,39 +5,56 @@ import { APP } from '~/data/meta' export const FooterNewsletter = () => { return ( -
-
- - {APP.title} +
+
+ + {APP.title} + +
+ +

Join Our Newsletter

+

+ Tidak ingin ketinggalan Berita Hukum terhangat? ingin mendapat + informasi kajian dan networking terbaru? ikuti Newsletter kami and + Stay up to Speed! +

+
+ - + +
-

Join Our Newsletter

-

- Tidak ingin ketinggalan Berita Hukum terhangat? ingin mendapat informasi - kajian dan networking terbaru? ikuti Newsletter kami and Stay up to - Speed! -

-
- - -
-
+
+
+ + {APP.title} + +
+
+ ) } diff --git a/app/layouts/header-menu-mobile.tsx b/app/layouts/header-menu-mobile.tsx new file mode 100644 index 0000000..da37062 --- /dev/null +++ b/app/layouts/header-menu-mobile.tsx @@ -0,0 +1,88 @@ +import { useState } from 'react' +import { Link } from 'react-router' + +import { HeaderSearch } from '~/layouts/header-search' + +import { MENU } from './menu' + +export default function HeaderMenuMobile() { + const [isMenuOpen, setIsMenuOpen] = useState(false) + + const handleToggleMenu = (): void => { + setIsMenuOpen(!isMenuOpen) + } + return ( + <> +
+
+ {/* Menu */} +
+ {/* Tombol Close */} + + + {/* List Menu */} +
    + {MENU.map((item) => ( +
  • + + {item.title} + +
    • + ))} + + +
+
+ + {/* Search dan Toggle Button */} +
+ +
+ +
+
+
+
+ + ) +} diff --git a/app/layouts/header-menu.tsx b/app/layouts/header-menu.tsx index a679d32..aca354e 100644 --- a/app/layouts/header-menu.tsx +++ b/app/layouts/header-menu.tsx @@ -1,23 +1,28 @@ import { Link } from 'react-router' +import HeaderMenuMobile from '~/layouts/header-menu-mobile' + import { HeaderSearch } from './header-search' import { MENU } from './menu' export const HeaderMenu = () => { return ( -
- {MENU.map((item) => ( - - {item.title} - - ))} - -
+ <> +
+ {MENU.map((item) => ( + + {item.title} + + ))} + +
+ + ) } diff --git a/app/layouts/header-search.tsx b/app/layouts/header-search.tsx index 844019e..adfa2dc 100644 --- a/app/layouts/header-search.tsx +++ b/app/layouts/header-search.tsx @@ -6,14 +6,14 @@ export const HeaderSearch = () => {
diff --git a/app/layouts/header-top.tsx b/app/layouts/header-top.tsx index 5c1cefe..66e49f5 100644 --- a/app/layouts/header-top.tsx +++ b/app/layouts/header-top.tsx @@ -5,24 +5,31 @@ import { APP } from '~/data/meta' export const HeaderTop = () => { return ( -
+
{APP.title} -
+
{APP.description}
- - -
+ + +
language { -
+
banner
-