Compare commits
6 Commits
4aa6c8d0d4
...
acb4ff64c1
| Author | SHA1 | Date | |
|---|---|---|---|
|
acb4ff64c1 | ||
|
|
46db9c97dd | ||
|
|
aaba207165 | ||
|
20fa80370b | ||
|
|
3937cc673a | ||
|
|
9980cb90df |
@ -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>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -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>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -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,9 +89,26 @@ 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 ',
|
||||||
|
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 ',
|
title: 'Travelling as a way of self-discovery and progress ',
|
||||||
content:
|
content:
|
||||||
|
|||||||
@ -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 && (
|
||||||
|
|||||||
@ -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"
|
||||||
|
|||||||
@ -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',
|
||||||
|
|||||||
@ -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>
|
||||||
)
|
)
|
||||||
|
|||||||
@ -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',
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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,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'
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user