feat: implement CategorySection component and update carousel usage in news pages
This commit is contained in:
fredy.siswanto
parent
422f3fcba5
commit
a749759164
@ -41,7 +41,7 @@ table.dataTable tbody > tr > td {
|
|||||||
min-width: 0;
|
min-width: 0;
|
||||||
} */
|
} */
|
||||||
|
|
||||||
.embla__slide {
|
/* .embla__slide {
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
@ -51,4 +51,4 @@ table.dataTable tbody > tr > td {
|
|||||||
.embla__slide {
|
.embla__slide {
|
||||||
margin-right: 30px;
|
margin-right: 30px;
|
||||||
}
|
}
|
||||||
}
|
} */
|
||||||
|
|||||||
@ -1,6 +1,7 @@
|
|||||||
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'
|
||||||
@ -54,7 +55,7 @@ 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]">
|
||||||
{items.map(
|
{items.map(
|
||||||
({ featured, title, content, tags, slug, isPremium }, index) => (
|
({ featured, title, content, tags, slug, isPremium }, index) => (
|
||||||
<div
|
<div
|
||||||
@ -111,8 +112,173 @@ export const CarouselSection = (properties: TNews) => {
|
|||||||
</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
|
||||||
|
? {
|
||||||
|
onClick: () => {
|
||||||
|
setIsSuccessOpen('warning')
|
||||||
|
},
|
||||||
|
to: '',
|
||||||
|
}
|
||||||
|
: { as: Link, to: `/detail/${slug}` })}
|
||||||
|
className="mb-5"
|
||||||
|
>
|
||||||
|
View More
|
||||||
|
</Button>
|
||||||
|
</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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
123
app/components/ui/category-section.tsx
Normal file
123
app/components/ui/category-section.tsx
Normal file
@ -0,0 +1,123 @@
|
|||||||
|
import { Link } from 'react-router'
|
||||||
|
import { twMerge } from 'tailwind-merge'
|
||||||
|
|
||||||
|
import { CarouselNextIcon } from '~/components/icons/carousel-next'
|
||||||
|
import { CarouselPreviousIcon } from '~/components/icons/carousel-previous'
|
||||||
|
import { Button } from '~/components/ui/button'
|
||||||
|
import { useNewsContext } from '~/contexts/news'
|
||||||
|
import type { TNews } from '~/types/news'
|
||||||
|
|
||||||
|
export const CategorySection = (properties: TNews) => {
|
||||||
|
const { setIsSuccessOpen } = useNewsContext()
|
||||||
|
|
||||||
|
const { title, description, items } = properties
|
||||||
|
|
||||||
|
const nextSlide = () => {
|
||||||
|
// patch data next page
|
||||||
|
}
|
||||||
|
|
||||||
|
const previousSlide = () => {
|
||||||
|
// patch previous page
|
||||||
|
}
|
||||||
|
|
||||||
|
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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="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,5 +1,5 @@
|
|||||||
import { Card } from '~/components/ui/card'
|
import { Card } from '~/components/ui/card'
|
||||||
import { Carousel } from '~/components/ui/carousel'
|
import { CategorySection } from '~/components/ui/category-section'
|
||||||
|
|
||||||
import { BERITA } from './data'
|
import { BERITA } from './data'
|
||||||
|
|
||||||
@ -7,7 +7,7 @@ export const NewsCategoriesPage = () => {
|
|||||||
return (
|
return (
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<Card>
|
<Card>
|
||||||
<Carousel {...BERITA} />
|
<CategorySection {...BERITA} />
|
||||||
</Card>
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|||||||
@ -2,8 +2,7 @@ import { Card } from '~/components/ui/card'
|
|||||||
import { CarouselHero } from '~/components/ui/carousel-hero'
|
import { CarouselHero } from '~/components/ui/carousel-hero'
|
||||||
import { CarouselSection } from '~/components/ui/carousel-section'
|
import { CarouselSection } from '~/components/ui/carousel-section'
|
||||||
import { Newsletter } from '~/components/ui/newsletter'
|
import { Newsletter } from '~/components/ui/newsletter'
|
||||||
|
import { BERITA, SPOTLIGHT } from '~/data/contents'
|
||||||
import { SPOTLIGHT, BERITA } from './data'
|
|
||||||
|
|
||||||
export const NewsPage = () => {
|
export const NewsPage = () => {
|
||||||
return (
|
return (
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user