From 2e09e8a96289f40481b0612e60928d3ca96434d8 Mon Sep 17 00:00:00 2001 From: "fredy.siswanto" Date: Thu, 20 Feb 2025 22:20:27 +0700 Subject: [PATCH 1/2] feat: adj ui page detail, add breadcom component, add media sosial group --- app/components/icons/link-icon.tsx | 22 +++++ app/components/ui/banner.tsx | 2 +- app/components/ui/breadcrumb.tsx | 24 +++++ app/components/ui/carousel.tsx | 59 ++++++++---- app/components/ui/icons-social.tsx | 60 +++++++++++++ app/components/ui/newsletter.tsx | 68 +++++++------- app/pages/news-categories/data.ts | 80 +++++++++++++++++ app/pages/news-categories/index.tsx | 14 +++ app/pages/news-detail/data.ts | 36 +++++++- app/pages/news-detail/index.tsx | 95 ++++++++++++++++++-- app/pages/news/data.ts | 12 +-- app/routes/_layout.news.categories.$slug.tsx | 7 ++ app/types/news.ts | 5 +- eslint.config.mjs | 3 +- public/images/back-to-home.svg | 58 ++++++++++++ 15 files changed, 471 insertions(+), 74 deletions(-) create mode 100644 app/components/icons/link-icon.tsx create mode 100644 app/components/ui/breadcrumb.tsx create mode 100644 app/components/ui/icons-social.tsx create mode 100644 app/pages/news-categories/data.ts create mode 100644 app/pages/news-categories/index.tsx create mode 100644 app/routes/_layout.news.categories.$slug.tsx create mode 100644 public/images/back-to-home.svg diff --git a/app/components/icons/link-icon.tsx b/app/components/icons/link-icon.tsx new file mode 100644 index 0000000..1ceb7b5 --- /dev/null +++ b/app/components/icons/link-icon.tsx @@ -0,0 +1,22 @@ +import type { JSX, SVGProps } from 'react' + +export const LinkIcon = ( + properties: JSX.IntrinsicAttributes & SVGProps, +) => { + return ( + + + + ) +} diff --git a/app/components/ui/banner.tsx b/app/components/ui/banner.tsx index a20d0eb..ab57b67 100644 --- a/app/components/ui/banner.tsx +++ b/app/components/ui/banner.tsx @@ -13,7 +13,7 @@ export const Banner = () => { {APP.title}

diff --git a/app/components/ui/breadcrumb.tsx b/app/components/ui/breadcrumb.tsx new file mode 100644 index 0000000..f77b4c3 --- /dev/null +++ b/app/components/ui/breadcrumb.tsx @@ -0,0 +1,24 @@ +import { Link } from 'react-router' + +// use slog or handel get by url +interface BreadcrumbProperty { + slug: string +} + +const Breadcrumb = (property: BreadcrumbProperty) => { + const { slug } = property + return ( +

+ Blog +
{'>'}
+ + {slug} + +
+ ) +} + +export default Breadcrumb diff --git a/app/components/ui/carousel.tsx b/app/components/ui/carousel.tsx index 3fdf648..1baf776 100644 --- a/app/components/ui/carousel.tsx +++ b/app/components/ui/carousel.tsx @@ -1,4 +1,4 @@ -import { Link } from 'react-router' +import { Link, useLocation } from 'react-router' import { twMerge } from 'tailwind-merge' import { CarouselNextIcon } from '~/components/icons/carousel-next' @@ -8,6 +8,9 @@ import type { TNews } from '~/types/news' import { Button } from './button' export const Carousel = (properties: TNews) => { + const location = useLocation() + const hasCategory = location.pathname.includes('/categories/') + const { title, description, items, type } = properties return (
@@ -20,21 +23,22 @@ export const Carousel = (properties: TNews) => { {description}

- -
- - -
+ {!hasCategory && ( +
+ + +
+ )}
{ type === 'hero' ? 'grid-cols-1' : 'sm:grid-cols-3', )} > - {items.map(({ featured, title, content, tag, slug }, index) => ( + {items.map(({ featured, title, content, tags, slug }, index) => (
{ )} >
- {tag?.map((item) => ( + {tags?.map((item) => ( {item} @@ -93,6 +97,7 @@ export const Carousel = (properties: TNews) => { size="block" as={Link} to={`detail/${slug}`} + className={twMerge('', type === 'hero' ? '' : 'mb-5 sm:mb-0')} > View More @@ -100,6 +105,24 @@ export const Carousel = (properties: TNews) => {
))}
+ {hasCategory && ( +
+
+ + +
+
+ )}
) } diff --git a/app/components/ui/icons-social.tsx b/app/components/ui/icons-social.tsx new file mode 100644 index 0000000..e297d1e --- /dev/null +++ b/app/components/ui/icons-social.tsx @@ -0,0 +1,60 @@ +import type { FC } from 'react' +import { Link } from 'react-router' +import { twMerge } from 'tailwind-merge' + +import { FacebookIcon } from '~/components/icons/facebook' +import { InstagramIcon } from '~/components/icons/instagram' +import { LinkIcon } from '~/components/icons/link-icon' +import { LinkedinIcon } from '~/components/icons/linkedin' +import { XIcon } from '~/components/icons/x' + +interface SocialMediaProperties { + className?: string +} + +const dataSocialMedia = [ + { + type: 'link', + url: 'post-id/', + icon: LinkIcon, + }, + { + type: 'facebook', + url: 'https://facebook.com/', + icon: FacebookIcon, + }, + { + type: 'linkedin', + url: 'https://linkedin.com/', + icon: LinkedinIcon, + }, + { + type: 'x', + url: 'https://x.com/', + icon: XIcon, + }, + { + type: 'instagram', + url: 'https://instagram.com/', + icon: InstagramIcon, + }, +] + +const IconsSocial: FC = ({ className }) => { + return ( +
+ {dataSocialMedia.map(({ url, icon: Icon }, index) => ( + + + + ))} +
+ ) +} + +export default IconsSocial diff --git a/app/components/ui/newsletter.tsx b/app/components/ui/newsletter.tsx index a21793b..02a34de 100644 --- a/app/components/ui/newsletter.tsx +++ b/app/components/ui/newsletter.tsx @@ -1,44 +1,38 @@ import { Button } from '~/components/ui/button' -import { APP } from '~/data/meta' export const Newsletter = () => { 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} -
-
-
- - -
-
+
+
+

Join Our Newsletter

+

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

- + +
+
+ + +
+
+
) } diff --git a/app/pages/news-categories/data.ts b/app/pages/news-categories/data.ts new file mode 100644 index 0000000..df53c39 --- /dev/null +++ b/app/pages/news-categories/data.ts @@ -0,0 +1,80 @@ +import type { TNews } from '~/types/news' + +export const SPOTLIGHT: TNews = { + title: 'SPOTLIGHT', + description: 'Berita Terhangat hari ini', + type: 'hero', + items: [ + { + title: 'Hotman Paris Membuka Perpustakaan di tengah Diskotik', + content: + 'Pengacara Kondang, Hotman Paris Hutapea, membuka sebuah perpustakaan baru di dalam diskotik nya yang berlokasi di daerah Jakarta Pusat, Hotman berkata Perpustakaan ini dibuka dengan harapan untuk meningkatkan gairah membaca masyarakat Indonesia, namun sayangnya..', + featured: '/images/news-1.jpg', + slug: 'hotman-paris-membuka-perpustakaan-di-tengah-diskotik', + }, + ], +} + +export const BERITA: TNews = { + title: 'BERITA', + description: 'Berita Terhangat hari ini', + type: 'grid', + items: [ + { + title: 'Travelling as a way of self-discovery and progress', + content: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.', + featured: '/images/news-2.jpg', + tags: ['Hukum Property'], + slug: 'travelling-as-a-way-of-self-discovery-and-progress', + }, + { + title: 'How does writing influence your personal brand?', + content: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.', + featured: '/images/news-3.jpg', + tags: ['Hukum'], + slug: 'how-does-writing-influence-your-personal-brand', + }, + { + title: 'Helping a local business reinvent itself', + content: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.', + featured: '/images/news-4.jpg', + tags: ['Hukum Property', 'PREMIUM CONTENT'], + slug: 'helping-a-local-business-reinvent-itself', + }, + ], +} + +export const KAJIAN: TNews = { + title: 'KAJIAN', + description: 'Berita Terhangat hari ini', + type: 'grid', + items: [ + { + title: 'Travelling as a way of self-discovery and progress', + content: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.', + featured: '/images/news-2.jpg', + tags: ['Hukum Property', 'PREMIUM CONTENT'], + slug: 'travelling-as-a-way-of-self-discovery-and-progress', + }, + { + title: 'How does writing influence your personal brand?', + content: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.', + featured: '/images/news-3.jpg', + tags: ['Hukum Property', 'PREMIUM CONTENT'], + slug: 'how-does-writing-influence-your-personal-brand', + }, + { + title: 'Helping a local business reinvent itself', + content: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.', + featured: '/images/news-4.jpg', + tags: ['Hukum Property', 'PREMIUM CONTENT'], + slug: 'helping-a-local-business-reinvent-itself', + }, + ], +} diff --git a/app/pages/news-categories/index.tsx b/app/pages/news-categories/index.tsx new file mode 100644 index 0000000..e3adf23 --- /dev/null +++ b/app/pages/news-categories/index.tsx @@ -0,0 +1,14 @@ +import { Card } from '~/components/ui/card' +import { Carousel } from '~/components/ui/carousel' + +import { BERITA } from './data' + +export const NewsCategoriesPage = () => { + return ( +
+ + + +
+ ) +} diff --git a/app/pages/news-detail/data.ts b/app/pages/news-detail/data.ts index 17291a7..0d943a5 100644 --- a/app/pages/news-detail/data.ts +++ b/app/pages/news-detail/data.ts @@ -1,4 +1,4 @@ -import type { TNewsDetail } from '~/types/news' +import type { TNews, TNewsDetail } from '~/types/news' export const CONTENT: TNewsDetail = { title: 'Hotman Paris Membuka Perpustakaan di tengah Diskotik', @@ -8,4 +8,38 @@ export const CONTENT: TNewsDetail = { slug: 'hotman-paris-membuka-perpustakaan-di-tengah-diskotik', author: 'John Doe', date: new Date(), + categories: [], + tags: ['Category', 'Popular'], +} + +export const BERITA: TNews = { + title: 'BERITA', + description: 'Berita Terhangat hari ini', + type: 'grid', + items: [ + { + title: 'Travelling as a way of self-discovery and progress', + content: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.', + featured: '/images/news-2.jpg', + tags: ['Hukum Property'], + slug: 'travelling-as-a-way-of-self-discovery-and-progress', + }, + { + title: 'How does writing influence your personal brand?', + content: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.', + featured: '/images/news-3.jpg', + tags: ['Hukum'], + slug: 'how-does-writing-influence-your-personal-brand', + }, + { + title: 'Helping a local business reinvent itself', + content: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.', + featured: '/images/news-4.jpg', + tags: ['Hukum Property', 'PREMIUM CONTENT'], + slug: 'helping-a-local-business-reinvent-itself', + }, + ], } diff --git a/app/pages/news-detail/index.tsx b/app/pages/news-detail/index.tsx index b1e0fa3..007d216 100644 --- a/app/pages/news-detail/index.tsx +++ b/app/pages/news-detail/index.tsx @@ -1,16 +1,95 @@ +import Breadcrumb from '~/components/ui/breadcrumb' import { Card } from '~/components/ui/card' - -import { CONTENT } from './data' +import { Carousel } from '~/components/ui/carousel' +import IconsSocial from '~/components/ui/icons-social' +// eslint-disable-next-line no-restricted-imports +import { BERITA, CONTENT } from '~/pages/news-detail/data' export const NewsDetailPage = () => { - const { title } = CONTENT + const { title, content, featured, slug, author, date, tags } = CONTENT return ( -
+
-

- {title} -

- News Detail +
+ +

+ {title} +

+ + {/* next planing create component for this section */} +
+
+ {title} +
+

{author}

+

+ {date.toJSON().slice(0, 10)} . 5 min read{' '} +

+
+
+ +
+ {/* end next planing create component for this section */} +
+ {title} +
+
+
{content}
+ Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt + asperiores corporis, facilis praesentium tenetur rerum officiis! + Perspiciatis, sed cupiditate. Libero eos, cupiditate perferendis + delectus accusamus culpa veniam voluptatem sequi soluta hic optio + dolor, provident perspiciatis nihil sit. Est facere itaque natus + saepe odio ipsam recusandae at mollitia deserunt. Laboriosam atque + id aperiam tempore corporis magnam dolores vitae, maxime modi + quibusdam architecto sed aliquam error suscipit distinctio ratione + dolorum exercitationem vero sapiente? Commodi rem quidem vitae + eaque, consequuntur maxime facilis ea aliquam odio atque magni + delectus rerum fugiat aliquid, qui omnis incidunt libero quasi + distinctio exercitationem, reprehenderit minus officiis velit enim. +
+ +
+
+

Share this post

+ +
+
+ {tags?.map((tag) => ( + + {tag} + + ))} +
+
+ +
+ {title} +
+

{author}

+

Job title, Company name

+
+
+
+ + + +
) diff --git a/app/pages/news/data.ts b/app/pages/news/data.ts index 9888613..df53c39 100644 --- a/app/pages/news/data.ts +++ b/app/pages/news/data.ts @@ -25,7 +25,7 @@ export const BERITA: TNews = { content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.', featured: '/images/news-2.jpg', - tag: ['Hukum Property'], + tags: ['Hukum Property'], slug: 'travelling-as-a-way-of-self-discovery-and-progress', }, { @@ -33,7 +33,7 @@ export const BERITA: TNews = { content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.', featured: '/images/news-3.jpg', - tag: ['Hukum'], + tags: ['Hukum'], slug: 'how-does-writing-influence-your-personal-brand', }, { @@ -41,7 +41,7 @@ export const BERITA: TNews = { content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.', featured: '/images/news-4.jpg', - tag: ['Hukum Property', 'PREMIUM CONTENT'], + tags: ['Hukum Property', 'PREMIUM CONTENT'], slug: 'helping-a-local-business-reinvent-itself', }, ], @@ -57,7 +57,7 @@ export const KAJIAN: TNews = { content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.', featured: '/images/news-2.jpg', - tag: ['Hukum Property', 'PREMIUM CONTENT'], + tags: ['Hukum Property', 'PREMIUM CONTENT'], slug: 'travelling-as-a-way-of-self-discovery-and-progress', }, { @@ -65,7 +65,7 @@ export const KAJIAN: TNews = { content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.', featured: '/images/news-3.jpg', - tag: ['Hukum Property', 'PREMIUM CONTENT'], + tags: ['Hukum Property', 'PREMIUM CONTENT'], slug: 'how-does-writing-influence-your-personal-brand', }, { @@ -73,7 +73,7 @@ export const KAJIAN: TNews = { content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.', featured: '/images/news-4.jpg', - tag: ['Hukum Property', 'PREMIUM CONTENT'], + tags: ['Hukum Property', 'PREMIUM CONTENT'], slug: 'helping-a-local-business-reinvent-itself', }, ], diff --git a/app/routes/_layout.news.categories.$slug.tsx b/app/routes/_layout.news.categories.$slug.tsx new file mode 100644 index 0000000..a0fdb3b --- /dev/null +++ b/app/routes/_layout.news.categories.$slug.tsx @@ -0,0 +1,7 @@ +import { NewsCategoriesPage } from '~/pages/news-categories' + +const NewsCategoriesLayout = () => { + return +} + +export default NewsCategoriesLayout diff --git a/app/types/news.ts b/app/types/news.ts index fdd854b..35e6b99 100644 --- a/app/types/news.ts +++ b/app/types/news.ts @@ -2,7 +2,7 @@ export type TNews = { title: string description: string type: 'hero' | 'grid' - items: Pick[] + items: Pick[] } export type TNewsDetail = { @@ -12,5 +12,6 @@ export type TNewsDetail = { author: string date: Date slug: string - tag?: Array + tags?: Array + categories?: Array } diff --git a/eslint.config.mjs b/eslint.config.mjs index 35d6ab2..517717c 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -91,7 +91,8 @@ export default tseslint.config( ], }, ], - 'linebreak-style': ['error', 'unix'], + 'linebreak-style': 0, + 'import/order': [ 'error', { diff --git a/public/images/back-to-home.svg b/public/images/back-to-home.svg new file mode 100644 index 0000000..b29af30 --- /dev/null +++ b/public/images/back-to-home.svg @@ -0,0 +1,58 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From eafe70a0210dc0412e8efca10184bbcd07b176d1 Mon Sep 17 00:00:00 2001 From: "fredy.siswanto" Date: Thu, 20 Feb 2025 23:22:04 +0700 Subject: [PATCH 2/2] feat: adj links kategory --- app/layouts/menu.ts | 14 +++++++------- app/pages/news/data.ts | 1 + ...s.$slug.tsx => _layout.news.category.$name.tsx} | 0 app/types/news.ts | 6 +++++- 4 files changed, 13 insertions(+), 8 deletions(-) rename app/routes/{_layout.news.categories.$slug.tsx => _layout.news.category.$name.tsx} (100%) diff --git a/app/layouts/menu.ts b/app/layouts/menu.ts index ba008f3..715d445 100644 --- a/app/layouts/menu.ts +++ b/app/layouts/menu.ts @@ -8,31 +8,31 @@ import { XIcon } from '~/components/icons/x' export const MENU = [ { title: 'Spotlight', - url: '/news/topic?category=spotlight', + url: '/news/category/spotlight', }, { title: 'Berita', - url: '/news/topic?category=berita', + url: '/news/category/berita', }, { title: 'Kasus', - url: '/news/topic?category=kasus', + url: '/news/category/kasus', }, { title: 'Kajian', - url: '/news/topic?category=kajian', + url: '/news/category/kajian', }, { title: 'Lifestyle', - url: '/news/topic?category=lifestyle', + url: '/news/category/lifestyle', }, { title: 'Event', - url: '/news/topic?category=event', + url: '/news/category/event', }, { title: 'Travel', - url: '/news/topic?category=travel', + url: '/news/category/travel', }, ] diff --git a/app/pages/news/data.ts b/app/pages/news/data.ts index df53c39..f63ec5c 100644 --- a/app/pages/news/data.ts +++ b/app/pages/news/data.ts @@ -42,6 +42,7 @@ export const BERITA: TNews = { 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.', featured: '/images/news-4.jpg', tags: ['Hukum Property', 'PREMIUM CONTENT'], + isPremium: true, slug: 'helping-a-local-business-reinvent-itself', }, ], diff --git a/app/routes/_layout.news.categories.$slug.tsx b/app/routes/_layout.news.category.$name.tsx similarity index 100% rename from app/routes/_layout.news.categories.$slug.tsx rename to app/routes/_layout.news.category.$name.tsx diff --git a/app/types/news.ts b/app/types/news.ts index 35e6b99..bb9ff12 100644 --- a/app/types/news.ts +++ b/app/types/news.ts @@ -2,7 +2,10 @@ export type TNews = { title: string description: string type: 'hero' | 'grid' - items: Pick[] + items: Pick< + TNewsDetail, + 'title' | 'content' | 'featured' | 'slug' | 'tags' | 'isPremium' + >[] } export type TNewsDetail = { @@ -13,5 +16,6 @@ export type TNewsDetail = { date: Date slug: string tags?: Array + isPremium?: boolean categories?: Array }