feat: add KAJIAN section to news page and update content structure
This commit is contained in:
fredy.siswanto
parent
4aa6c8d0d4
commit
aaba207165
@ -1,7 +1,6 @@
|
||||
import useEmblaCarousel from 'embla-carousel-react'
|
||||
import { useCallback } from 'react'
|
||||
import { Link } from 'react-router'
|
||||
import { twMerge } from 'tailwind-merge'
|
||||
|
||||
import { CarouselNextIcon } from '~/components/icons/carousel-next'
|
||||
import { CarouselPreviousIcon } from '~/components/icons/carousel-previous'
|
||||
@ -55,21 +54,21 @@ export const CarouselSection = (properties: TNews) => {
|
||||
className="embla overflow-hidden"
|
||||
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(
|
||||
({ featured, title, content, tags, slug, isPremium }, index) => (
|
||||
<div
|
||||
className="embla__slide w-full min-w-0 flex-none sm:w-1/3"
|
||||
key={index}
|
||||
>
|
||||
<div className="flex flex-col justify-between max-sm:mt-2">
|
||||
<div className="flex flex-col justify-between">
|
||||
<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}
|
||||
alt={title}
|
||||
/>
|
||||
<div className={'flex flex-col justify-between gap-4'}>
|
||||
<div className={'flex uppercase'}>
|
||||
<div className={'flex text-sm uppercase'}>
|
||||
{tags?.map((item) => (
|
||||
<span
|
||||
key={index}
|
||||
@ -93,73 +92,6 @@ export const CarouselSection = (properties: TNews) => {
|
||||
{content}
|
||||
</p>
|
||||
</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
|
||||
size="block"
|
||||
{...(isPremium
|
||||
@ -176,109 +108,11 @@ export const CarouselSection = (properties: TNews) => {
|
||||
</Button>
|
||||
</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>
|
||||
)
|
||||
}
|
||||
|
||||
@ -89,29 +89,47 @@ export const BERITA: TNews = {
|
||||
|
||||
export const KAJIAN: TNews = {
|
||||
title: 'KAJIAN',
|
||||
description: 'Berita Terhangat hari ini',
|
||||
description: 'Berita Terhangat hari ini ',
|
||||
type: 'grid',
|
||||
items: [
|
||||
{
|
||||
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',
|
||||
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:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
|
||||
featured: 'https://placehold.co/600x400.png',
|
||||
tags: ['Hukum Property'],
|
||||
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:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.',
|
||||
featured: '/images/news-3.jpg',
|
||||
@ -120,7 +138,7 @@ export const KAJIAN: TNews = {
|
||||
slug: 'how-does-writing-influence-your-personal-brand',
|
||||
},
|
||||
{
|
||||
title: 'Helping a local business reinvent itself',
|
||||
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',
|
||||
|
||||
@ -4,13 +4,14 @@ import { Breadcrumb } from '~/components/ui/breadcrumb'
|
||||
import { Card } from '~/components/ui/card'
|
||||
import { CarouselSection } from '~/components/ui/carousel-section'
|
||||
import { IconsSocial } from '~/components/ui/social-share'
|
||||
import { BERITA } from '~/data/contents'
|
||||
|
||||
import { BERITA, CONTENT } from './data'
|
||||
import { CONTENT } from './data'
|
||||
|
||||
export const NewsDetailPage = () => {
|
||||
const { title, content, featured, slug, author, date, tags } = CONTENT
|
||||
return (
|
||||
<div className="relative mx-5 sm:mx-10">
|
||||
<div className="sm-max:mx-5 relative">
|
||||
<Card>
|
||||
<div className="py-5 sm:px-30">
|
||||
<Breadcrumb slug={slug} />
|
||||
@ -80,7 +81,7 @@ export const NewsDetailPage = () => {
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="hidden sm:block">
|
||||
<Card className="bg-white p-5 max-sm:hidden">
|
||||
<CarouselSection {...BERITA} />
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
@ -2,7 +2,7 @@ import { Card } from '~/components/ui/card'
|
||||
import { CarouselHero } from '~/components/ui/carousel-hero'
|
||||
import { CarouselSection } from '~/components/ui/carousel-section'
|
||||
import { Newsletter } from '~/components/ui/newsletter'
|
||||
import { BERITA, SPOTLIGHT } from '~/data/contents'
|
||||
import { BERITA, KAJIAN, SPOTLIGHT } from '~/data/contents'
|
||||
|
||||
export const NewsPage = () => {
|
||||
return (
|
||||
@ -13,9 +13,14 @@ export const NewsPage = () => {
|
||||
<div className="min-h-[400px] sm:min-h-[300px]">
|
||||
<Newsletter className="mr-0 sm:-ml-14" />
|
||||
</div>
|
||||
<div>
|
||||
<Card>
|
||||
<CarouselSection {...BERITA} />
|
||||
</Card>
|
||||
<Card>
|
||||
<CarouselSection {...KAJIAN} />
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user