legalgonews/legalgo-FE-reactrouter
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: legalgonews:4aa6c8d0d4b5b788a0f1d8c98ecc5a40b825b801
Branches Tags
legalgonews:master
legalgonews:dev
...
compare: legalgonews:acb4ff64c1fa52b0ecb1d43dc6cb08fd796c33f8
Branches Tags
legalgonews:dev
legalgonews:master

6 Commits
4aa6c8d0d4 ... acb4ff64c1

Author SHA1 Message Date
fredy.siswanto
acb4ff64c1 refactor: remove KAJIAN section from news page for code simplification 2025-03-02 12:24:30 +07:00
fredy.siswanto
46db9c97dd Merge remote-tracking branch 'origin/master' into feature/slicing 2025-03-02 12:19:17 +07:00
fredy.siswanto
aaba207165 feat: add KAJIAN section to news page and update content structure 2025-03-02 12:15:31 +07:00
Ardeman
20fa80370b refactor: replace hardcoded descriptions with a constant for consistency 2025-03-02 12:37:19 +08:00
Ardeman
3937cc673a refactor: remove Carousel and TableComponent for code cleanup 2025-03-02 12:22:30 +08:00
Ardeman
9980cb90df feat: refactor subscription handling in registration form and header component 2025-03-02 12:21:18 +08:00
12 changed files with 67 additions and 388 deletions
Show Stats Expand all files Collapse all files

176
app/components/ui/carousel-section.tsx
View File

@ -1,7 +1,6 @@
import useEmblaCarousel from 'embla-carousel-react' import useEmblaCarousel from 'embla-carousel-react'
import { useCallback } from 'react' import { useCallback } from 'react'
import { Link } from 'react-router' import { Link } from 'react-router'
import { twMerge } from 'tailwind-merge'
import { CarouselNextIcon } from '~/components/icons/carousel-next' import { CarouselNextIcon } from '~/components/icons/carousel-next'
import { CarouselPreviousIcon } from '~/components/icons/carousel-previous' import { CarouselPreviousIcon } from '~/components/icons/carousel-previous'
@ -55,21 +54,21 @@ export const CarouselSection = (properties: TNews) => {
className="embla overflow-hidden" className="embla overflow-hidden"
ref={emblaReference} ref={emblaReference}
> >
{/* <div className="embla__container col-span-3 flex max-h-[586px]"> <div className="embla__container col-span-3 flex max-h-[586px] sm:gap-x-8">
{items.map( {items.map(
({ featured, title, content, tags, slug, isPremium }, index) => ( ({ featured, title, content, tags, slug, isPremium }, index) => (
<div <div
className="embla__slide w-full min-w-0 flex-none sm:w-1/3" className="embla__slide w-full min-w-0 flex-none sm:w-1/3"
key={index} key={index}
> >
<div className="flex flex-col justify-between max-sm:mt-2"> <div className="flex flex-col justify-between">
<img <img
className="aspect-[5/4] max-h-[300px] w-full rounded-md object-cover" className="aspect-[5/4] max-h-[280px] w-full rounded-md object-cover"
src={featured} src={featured}
alt={title} alt={title}
/> />
<div className={'flex flex-col justify-between gap-4'}> <div className={'flex flex-col justify-between gap-4'}>
<div className={'flex uppercase'}> <div className={'flex text-sm uppercase'}>
{tags?.map((item) => ( {tags?.map((item) => (
<span <span
key={index} key={index}
@ -93,73 +92,6 @@ export const CarouselSection = (properties: TNews) => {
{content} {content}
</p> </p>
</div> </div>
<Button
size="block"
{...(isPremium
? {
onClick: () => {
setIsSuccessOpen('warning')
},
to: '',
}
: { as: Link, to: `/news/detail/${slug}` })}
className="mb-5"
>
View More
</Button>
</div>
</div>
</div>
),
)}
</div> */}
<div className="embla__container grid sm:auto-cols-[31%] sm:grid-flow-col sm:gap-x-8">
{items.map(
({ featured, title, content, tags, slug, isPremium }, index) => (
<div
key={index}
className={twMerge('embla__slide grid sm:gap-x-8')}
>
<img
className={twMerge(
'aspect-[5/4] w-full rounded-md object-cover',
)}
src={featured}
alt={title}
/>
<div className={twMerge('flex flex-col justify-between gap-4')}>
<div
className={twMerge(
'my-3 flex gap-2 uppercase max-sm:text-sm',
)}
>
{tags?.map((item) => (
<span
key={index}
className="inline-block rounded bg-[#F4F4F4] px-3 py-1 font-bold text-[#777777]"
>
{item}
</span>
))}
{isPremium && (
<span className="inline-block rounded bg-[#D1C675] px-3 py-1 font-bold text-[#9D761D]">
Premium Content
</span>
)}
</div>
<div>
<h3
className={twMerge(
'mt-2 w-full text-xl font-bold sm:mt-0 sm:text-2xl',
)}
>
{title}
</h3>
<p className="text-md mt-5 text-[#777777] sm:text-xl">
{content}
</p>
</div>
<Button <Button
size="block" size="block"
{...(isPremium {...(isPremium
@ -176,109 +108,11 @@ export const CarouselSection = (properties: TNews) => {
</Button> </Button>
</div> </div>
</div> </div>
</div>
), ),
)} )}
</div> </div>
</div> </div>
</div> </div>
// <div className="">
// <div className="mt-3 mb-3 flex items-center justify-between border-b border-black pb-3 sm:mb-[30px] sm:pb-[30px]">
// <div className="grid">
// <h2 className="text-2xl font-extrabold text-[#2E2F7C] sm:text-4xl">
// {title}
// </h2>
// <p className="text-xl font-light text-[#777777] italic sm:text-2xl">
// {description}
// </p>
// </div>
// </div>
// <div className={twMerge('grid sm:grid-cols-3 sm:gap-x-8')}>
// {items.map(
// ({ featured, title, content, tags, slug, isPremium }, index) => (
// <div
// key={index}
// className={twMerge('grid sm:gap-x-8')}
// >
// <img
// className={twMerge(
// 'aspect-[5/4] w-full rounded-md object-cover',
// )}
// src={featured}
// alt={title}
// />
// <div className={twMerge('flex flex-col justify-between gap-4')}>
// <div
// className={twMerge(
// 'my-3 flex gap-2 uppercase max-sm:text-sm',
// )}
// >
// {tags?.map((item) => (
// <span
// key={index}
// className="inline-block rounded bg-[#F4F4F4] px-3 py-1 font-bold text-[#777777]"
// >
// {item}
// </span>
// ))}
// {isPremium && (
// <span className="inline-block rounded bg-[#D1C675] px-3 py-1 font-bold text-[#9D761D]">
// Premium Content
// </span>
// )}
// </div>
// <div>
// <h3
// className={twMerge(
// 'mt-2 w-full text-xl font-bold sm:mt-0 sm:text-2xl',
// )}
// >
// {title}
// </h3>
// <p className="text-md mt-5 text-[#777777] sm:text-xl">
// {content}
// </p>
// </div>
// <Button
// size="block"
// {...(isPremium
// ? {
// onClick: () => {
// setIsSuccessOpen('warning')
// },
// to: '',
// }
// : { as: Link, to: `/detail/${slug}` })}
// className="mb-5"
// >
// View More
// </Button>
// </div>
// </div>
// ),
// )}
// </div>
// <div className="my-5 mt-5 flex flex-row-reverse">
// <div className="flex gap-2.5">
// <CarouselPreviousIcon
// color="#DCDCDC"
// className="cursor-pointer"
// width={45}
// height={45}
// onClick={previousSlide}
// />
// <CarouselNextIcon
// color="#2E2F7C"
// className="cursor-pointer"
// width={45}
// height={45}
// onClick={nextSlide}
// />
// </div>
// </div>
// </div>
) )
} }

171
app/components/ui/carousel.tsx
View File

@ -1,171 +0,0 @@
import { useState } from 'react'
import { Link, useLocation } from 'react-router'
import { twMerge } from 'tailwind-merge'
import { CarouselNextIcon } from '~/components/icons/carousel-next'
import { CarouselPreviousIcon } from '~/components/icons/carousel-previous'
import { useNewsContext } from '~/contexts/news'
import type { TNews } from '~/types/news'
import { Button } from './button'
export const Carousel = (properties: TNews) => {
const { setIsSuccessOpen } = useNewsContext()
const [currentIndex, setCurrentIndex] = useState(0)
const { pathname } = useLocation()
const hasCategory = pathname.includes('/category/')
const { title, description, items, type } = properties
const itemsPerPage = type === 'hero' ? 1 : 3
const totalPages = Math.ceil(items.length / itemsPerPage)
const nextSlide = () => {
setCurrentIndex((previousIndex) => (previousIndex + 1) % totalPages)
}
const previousSlide = () => {
setCurrentIndex(
(previousIndex) => (previousIndex - 1 + totalPages) % totalPages,
)
}
return (
<div className="">
<div className="mt-3 mb-3 flex items-center justify-between border-b border-black pb-3 sm:mb-[30px] sm:pb-[30px]">
<div className="grid">
<h2 className="text-2xl font-extrabold text-[#2E2F7C] sm:text-4xl">
{title}
</h2>
<p className="text-xl font-light text-[#777777] italic sm:text-2xl">
{description}
</p>
</div>
{!hasCategory && (
<div className="flex gap-2.5">
<CarouselPreviousIcon
color="#DCDCDC"
className="cursor-pointer"
width={45}
height={45}
onClick={previousSlide}
/>
<CarouselNextIcon
color="#2E2F7C"
className="cursor-pointer"
width={45}
height={45}
onClick={nextSlide}
/>
</div>
)}
</div>
<div
className={twMerge(
'grid sm:gap-x-8',
type === 'hero' ? 'grid-cols-1' : 'sm:grid-cols-3',
)}
>
{items
.slice(currentIndex * itemsPerPage, (currentIndex + 1) * itemsPerPage)
.map(({ featured, title, content, tags, slug, isPremium }, index) => (
<div
key={index}
className={twMerge(
'grid sm:gap-x-8',
type === 'hero' ? 'grid-cols-1 sm:grid-cols-3' : '',
)}
>
<img
className={twMerge(
'w-full object-cover',
type === 'hero'
? 'col-span-2 aspect-[174/100]'
: 'aspect-[5/4] rounded-md',
)}
src={featured}
alt={title}
/>
<div
className={twMerge(
'flex flex-col justify-between',
type === 'hero' ? 'gap-7' : 'gap-4',
)}
>
<div
className={twMerge(
'uppercase',
type === 'hero' ? 'hidden' : '',
)}
>
{tags?.map((item) => (
<span
key={`${index}-${item}`}
className="my-3 mr-2 inline-block rounded bg-[#F4F4F4] px-3 py-1 font-bold text-[#777777]"
>
{item}
</span>
))}
{isPremium && (
<span className="my-3 mr-2 inline-block rounded bg-[#D1C675] px-3 py-1 font-bold text-[#9D761D]">
Premium Content
</span>
)}
</div>
<div>
<h3
className={twMerge(
'mt-2 w-full font-bold sm:mt-0',
type === 'hero'
? 'text-2xl sm:text-4xl'
: 'text-xl sm:text-2xl',
)}
>
{title}
</h3>
<p className="text-md mt-5 text-[#777777] sm:text-xl">
{content}
</p>
</div>
<Button
size="block"
{...(isPremium
? {
onClick: () => {
setIsSuccessOpen('warning')
},
to: '',
}
: { as: Link, to: `/detail/${slug}` })}
className={twMerge('', type === 'hero' ? '' : 'mb-5')}
>
View More
</Button>
</div>
</div>
))}
</div>
{hasCategory && (
<div className="my-5 mt-5 flex flex-row-reverse">
<div className="flex gap-2.5">
<CarouselPreviousIcon
color="#DCDCDC"
className="cursor-pointer"
width={45}
height={45}
onClick={previousSlide}
/>
<CarouselNextIcon
color="#2E2F7C"
className="cursor-pointer"
width={45}
height={45}
onClick={nextSlide}
/>
</div>
</div>
)}
</div>
)
}

22
app/components/ui/table.tsx
View File

@ -1,22 +0,0 @@
import DT from 'datatables.net-dt'
import DataTable from 'datatables.net-react'
export const TableComponent = () => {
DataTable.use(DT)
return (
<>
<h1>test</h1>
<DataTable
className="cell-border"
data={[]}
columns={[]}
options={{
paging: true,
searching: true,
ordering: true,
info: true,
}}
></DataTable>
</>
)
}

41
app/data/contents.ts
View File

@ -1,9 +1,10 @@
import type { TNews } from '~/types/news' import type { TNews } from '~/types/news'
export const DUMMY_DESCRIPTION = 'Berita Terhangat hari ini'
export const SPOTLIGHT: TNews = { export const SPOTLIGHT: TNews = {
title: 'SPOTLIGHT', title: 'SPOTLIGHT',
description: 'Berita Terhangat hari ini', description: DUMMY_DESCRIPTION,
type: 'hero',
items: [ items: [
{ {
title: '01 Hotman Paris Membuka Perpustakaan di tengah Diskotik', title: '01 Hotman Paris Membuka Perpustakaan di tengah Diskotik',
@ -31,8 +32,7 @@ export const SPOTLIGHT: TNews = {
export const BERITA: TNews = { export const BERITA: TNews = {
title: 'BERITA', title: 'BERITA',
description: 'Berita Terhangat hari ini', description: DUMMY_DESCRIPTION,
type: 'grid',
items: [ items: [
{ {
title: '01 Travelling as a way of self-discovery and progress ', title: '01 Travelling as a way of self-discovery and progress ',
@ -89,29 +89,46 @@ export const BERITA: TNews = {
export const KAJIAN: TNews = { export const KAJIAN: TNews = {
title: 'KAJIAN', title: 'KAJIAN',
description: 'Berita Terhangat hari ini', description: DUMMY_DESCRIPTION,
type: 'grid',
items: [ items: [
{ {
title: 'Travelling as a way of self-discovery and progress', title: 'Travelling as a way of self-discovery and progress ',
content: content:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
featured: '/images/news-2.jpg', featured: '/images/news-2.jpg',
tags: ['Hukum Property'], tags: ['Hukum Property'],
isPremium: true, isPremium: true,
slug: 'travelling-as-a-way-of-self-discovery-and-progress', slug: 'travelling-as-a-way-of-self-discovery-and-progress ',
}, },
{ {
title: 'Travelling as a way of self-discovery and progress', 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'],
isPremium: true,
slug: 'travelling-as-a-way-of-self-discovery-and-progress ',
},
{
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'],
isPremium: true,
slug: 'travelling-as-a-way-of-self-discovery-and-progress ',
},
{
title: 'Travelling as a way of self-discovery and progress ',
content: content:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
featured: 'https://placehold.co/600x400.png', featured: 'https://placehold.co/600x400.png',
tags: ['Hukum Property'], tags: ['Hukum Property'],
isPremium: true, isPremium: true,
slug: 'travelling-as-a-way-of-self-discovery-and-progress', slug: 'travelling-as-a-way-of-self-discovery-and-progress ',
}, },
{ {
title: 'How does writing influence your personal brand?', title: 'How does writing influence your personal brand? ',
content: content:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
featured: '/images/news-3.jpg', featured: '/images/news-3.jpg',
@ -120,7 +137,7 @@ export const KAJIAN: TNews = {
slug: 'how-does-writing-influence-your-personal-brand', slug: 'how-does-writing-influence-your-personal-brand',
}, },
{ {
title: 'Helping a local business reinvent itself', title: 'Helping a local business reinvent itself ',
content: content:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
featured: '/images/news-4.jpg', featured: '/images/news-4.jpg',

3
app/layouts/news/form-register.tsx
View File

@ -31,6 +31,7 @@ export const FormRegister = () => {
const [disabled, setDisabled] = useState(false) const [disabled, setDisabled] = useState(false)
const fetcher = useFetcher() const fetcher = useFetcher()
const loaderData = useRouteLoaderData<typeof loader>('routes/_layout') const loaderData = useRouteLoaderData<typeof loader>('routes/_layout')
const subscriptions = loaderData?.subscriptionsData
const formMethods = useRemixForm<TRegisterSchema>({ const formMethods = useRemixForm<TRegisterSchema>({
mode: 'onSubmit', mode: 'onSubmit',
@ -98,7 +99,7 @@ export const FormRegister = () => {
name="subscribe_plan" name="subscribe_plan"
label="Subscription" label="Subscription"
placeholder="Pilih Subscription" placeholder="Pilih Subscription"
options={loaderData?.subscriptionsData} options={subscriptions}
/> />
{error && ( {error && (

5
app/layouts/news/header-top.tsx
View File

@ -3,11 +3,12 @@ import { Link, useFetcher, useRouteLoaderData } from 'react-router'
import { Button } from '~/components/ui/button' import { Button } from '~/components/ui/button'
import { APP } from '~/configs/meta' import { APP } from '~/configs/meta'
import { useNewsContext } from '~/contexts/news' import { useNewsContext } from '~/contexts/news'
import type { loader } from '~/routes/_layout' import { loader } from '~/routes/_layout'
export const HeaderTop = () => { export const HeaderTop = () => {
const { setIsLoginOpen } = useNewsContext() const { setIsLoginOpen } = useNewsContext()
const loaderData = useRouteLoaderData<typeof loader>('routes/_layout') const loaderData = useRouteLoaderData<typeof loader>('routes/_layout')
const userToken = loaderData?.userToken
const fetcher = useFetcher() const fetcher = useFetcher()
return ( return (
@ -29,7 +30,7 @@ export const HeaderTop = () => {
<Button className="h-8 w-auto rounded-none px-3 text-xs sm:h-[50px] sm:w-[150px] sm:text-lg"> <Button className="h-8 w-auto rounded-none px-3 text-xs sm:h-[50px] sm:w-[150px] sm:text-lg">
About Us About Us
</Button> </Button>
{loaderData?.userToken ? ( {userToken ? (
<fetcher.Form <fetcher.Form
method="POST" method="POST"
action="/actions/logout" action="/actions/logout"

4
app/pages/news-categories/data.ts
View File

@ -1,9 +1,9 @@
import { DUMMY_DESCRIPTION } from '~/data/contents'
import type { TNews } from '~/types/news' import type { TNews } from '~/types/news'
export const BERITA: TNews = { export const BERITA: TNews = {
title: 'BERITA', title: 'BERITA',
description: 'Berita Terhangat hari ini', description: DUMMY_DESCRIPTION,
type: 'grid',
items: [ items: [
{ {
title: 'Travelling as a way of self-discovery and progress', title: 'Travelling as a way of self-discovery and progress',

17
app/pages/news-categories/index.tsx
View File

@ -1,13 +1,28 @@
import { useLocation, useRouteLoaderData } from 'react-router'
import { Card } from '~/components/ui/card' import { Card } from '~/components/ui/card'
import { CategorySection } from '~/components/ui/category-section' import { CategorySection } from '~/components/ui/category-section'
import { DUMMY_DESCRIPTION } from '~/data/contents'
import type { loader } from '~/routes/_layout'
import { BERITA } from './data' import { BERITA } from './data'
export const NewsCategoriesPage = () => { export const NewsCategoriesPage = () => {
const { pathname } = useLocation()
const code = pathname.split('/')[2]
const loaderData = useRouteLoaderData<typeof loader>('routes/_layout')
const { name } =
loaderData?.categoriesData.find((item) => item.code === code) || {}
const { items } = BERITA
return ( return (
<div className="relative"> <div className="relative">
<Card> <Card>
<CategorySection {...BERITA} /> <CategorySection
title={name || ''}
description={DUMMY_DESCRIPTION}
items={items}
/>
</Card> </Card>
</div> </div>
) )

4
app/pages/news-detail/data.ts
View File

@ -1,3 +1,4 @@
import { DUMMY_DESCRIPTION } from '~/data/contents'
import type { TNews, TNewsDetail } from '~/types/news' import type { TNews, TNewsDetail } from '~/types/news'
export const CONTENT: TNewsDetail = { export const CONTENT: TNewsDetail = {
@ -40,8 +41,7 @@ export const CONTENT: TNewsDetail = {
export const BERITA: TNews = { export const BERITA: TNews = {
title: 'BERITA', title: 'BERITA',
description: 'Berita Terhangat hari ini', description: DUMMY_DESCRIPTION,
type: 'grid',
items: [ items: [
{ {
title: 'Travelling as a way of self-discovery and progress', title: 'Travelling as a way of self-discovery and progress',

7
app/pages/news-detail/index.tsx
View File

@ -4,13 +4,14 @@ import { Breadcrumb } from '~/components/ui/breadcrumb'
import { Card } from '~/components/ui/card' import { Card } from '~/components/ui/card'
import { CarouselSection } from '~/components/ui/carousel-section' import { CarouselSection } from '~/components/ui/carousel-section'
import { IconsSocial } from '~/components/ui/social-share' import { IconsSocial } from '~/components/ui/social-share'
import { BERITA } from '~/data/contents'
import { BERITA, CONTENT } from './data' import { CONTENT } from './data'
export const NewsDetailPage = () => { export const NewsDetailPage = () => {
const { title, content, featured, slug, author, date, tags } = CONTENT const { title, content, featured, slug, author, date, tags } = CONTENT
return ( return (
<div className="relative mx-5 sm:mx-10"> <div className="sm-max:mx-5 relative">
<Card> <Card>
<div className="py-5 sm:px-30"> <div className="py-5 sm:px-30">
<Breadcrumb slug={slug} /> <Breadcrumb slug={slug} />
@ -80,7 +81,7 @@ export const NewsDetailPage = () => {
</div> </div>
</Card> </Card>
<Card className="hidden sm:block"> <Card className="bg-white p-5 max-sm:hidden">
<CarouselSection {...BERITA} /> <CarouselSection {...BERITA} />
</Card> </Card>
</div> </div>

4
app/pages/news/index.tsx
View File

@ -13,9 +13,13 @@ export const NewsPage = () => {
<div className="min-h-[400px] sm:min-h-[300px]"> <div className="min-h-[400px] sm:min-h-[300px]">
<Newsletter className="mr-0 sm:-ml-14" /> <Newsletter className="mr-0 sm:-ml-14" />
</div> </div>
<Card> <Card>
<CarouselSection {...BERITA} /> <CarouselSection {...BERITA} />
</Card> </Card>
{/* <Card>
<CarouselSection {...KAJIAN} />
</Card> */}
</div> </div>
) )
} }

1
app/types/news.ts
View File

@ -1,7 +1,6 @@
export type TNews = { export type TNews = {
title: string title: string
description: string description: string
type: 'hero' | 'grid'
items: Pick< items: Pick<
TNewsDetail, TNewsDetail,
'title' | 'content' | 'featured' | 'slug' | 'tags' | 'isPremium' 'title' | 'content' | 'featured' | 'slug' | 'tags' | 'isPremium'