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

Merge remote-tracking branch 'origin/master' into feature/slicing

Browse Source
This commit is contained in:
fredy.siswanto 2025-03-02 12:19:17 +07:00
commit 46db9c97dd
9 changed files with 30 additions and 208 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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>
</>
)
}

11
app/data/contents.ts
View File

@ -1,9 +1,10 @@
import type { TNews } from '~/types/news'
export const DUMMY_DESCRIPTION = 'Berita Terhangat hari ini'
export const SPOTLIGHT: TNews = {
title: 'SPOTLIGHT',
description: 'Berita Terhangat hari ini',
type: 'hero',
description: DUMMY_DESCRIPTION,
items: [
{
title: '01 Hotman Paris Membuka Perpustakaan di tengah Diskotik',
@ -31,8 +32,7 @@ export const SPOTLIGHT: TNews = {
export const BERITA: TNews = {
title: 'BERITA',
description: 'Berita Terhangat hari ini',
type: 'grid',
description: DUMMY_DESCRIPTION,
items: [
{
title: '01 Travelling as a way of self-discovery and progress ',
@ -89,8 +89,7 @@ export const BERITA: TNews = {
export const KAJIAN: TNews = {
title: 'KAJIAN',
description: 'Berita Terhangat hari ini ',
type: 'grid',
description: DUMMY_DESCRIPTION,
items: [
{
title: 'Travelling as a way of self-discovery and progress ',

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

@ -31,6 +31,7 @@ export const FormRegister = () => {
const [disabled, setDisabled] = useState(false)
const fetcher = useFetcher()
const loaderData = useRouteLoaderData<typeof loader>('routes/_layout')
const subscriptions = loaderData?.subscriptionsData
const formMethods = useRemixForm<TRegisterSchema>({
mode: 'onSubmit',
@ -98,7 +99,7 @@ export const FormRegister = () => {
name="subscribe_plan"
label="Subscription"
placeholder="Pilih Subscription"
options={loaderData?.subscriptionsData}
options={subscriptions}
/>
{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 { APP } from '~/configs/meta'
import { useNewsContext } from '~/contexts/news'
import type { loader } from '~/routes/_layout'
import { loader } from '~/routes/_layout'
export const HeaderTop = () => {
const { setIsLoginOpen } = useNewsContext()
const loaderData = useRouteLoaderData<typeof loader>('routes/_layout')
const userToken = loaderData?.userToken
const fetcher = useFetcher()
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">
About Us
</Button>
{loaderData?.userToken ? (
{userToken ? (
<fetcher.Form
method="POST"
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'
export const BERITA: TNews = {
title: 'BERITA',
description: 'Berita Terhangat hari ini',
type: 'grid',
description: DUMMY_DESCRIPTION,
items: [
{
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 { CategorySection } from '~/components/ui/category-section'
import { DUMMY_DESCRIPTION } from '~/data/contents'
import type { loader } from '~/routes/_layout'
import { BERITA } from './data'
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 (
<div className="relative">
<Card>
<CategorySection {...BERITA} />
<CategorySection
title={name || ''}
description={DUMMY_DESCRIPTION}
items={items}
/>
</Card>
</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'
export const CONTENT: TNewsDetail = {
@ -40,8 +41,7 @@ export const CONTENT: TNewsDetail = {
export const BERITA: TNews = {
title: 'BERITA',
description: 'Berita Terhangat hari ini',
type: 'grid',
description: DUMMY_DESCRIPTION,
items: [
{
title: 'Travelling as a way of self-discovery and progress',

1
app/types/news.ts
View File

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