feat: update news items with new titles, content, and slugs for improved organization
This commit is contained in:
fredy.siswanto
+193
-56
@@ -1,3 +1,4 @@
|
||||
import { useState } from 'react'
|
||||
import { Link, useLocation } from 'react-router'
|
||||
import { twMerge } from 'tailwind-merge'
|
||||
|
||||
@@ -8,11 +9,139 @@ import type { TNews } from '~/types/news'
|
||||
import { Button } from './button'
|
||||
|
||||
export const Carousel = (properties: TNews) => {
|
||||
const [currentIndex, setCurrentIndex] = useState(0)
|
||||
const location = useLocation()
|
||||
const hasCategory = location.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}
|
||||
// />
|
||||
// <CarouselNextIcon
|
||||
// color="#2E2F7C"
|
||||
// className="cursor-pointer"
|
||||
// width={45}
|
||||
// height={45}
|
||||
// />
|
||||
// </div>
|
||||
// )}
|
||||
// </div>
|
||||
// <div
|
||||
// className={twMerge(
|
||||
// 'grid sm:grid sm:gap-x-8',
|
||||
// type === 'hero' ? 'grid-cols-1' : 'sm:grid-cols-3',
|
||||
// )}
|
||||
// >
|
||||
// {items.map(({ featured, title, content, tags, slug }, 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={`${type === 'hero' ? 'hidden' : ''} `}>
|
||||
// {tags?.map((item, index) => (
|
||||
// <span
|
||||
// key={index}
|
||||
// className="my-3 mr-2 inline-block rounded bg-gray-200 px-3 py-1"
|
||||
// >
|
||||
// {item}
|
||||
// </span>
|
||||
// ))}
|
||||
// </div>
|
||||
|
||||
// <div>
|
||||
// <h3
|
||||
// className={twMerge(
|
||||
// 'mt-2 w-full font-bold lg: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"
|
||||
// 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}
|
||||
// />
|
||||
// <CarouselNextIcon
|
||||
// color="#2E2F7C"
|
||||
// className="cursor-pointer"
|
||||
// width={45}
|
||||
// height={45}
|
||||
// />
|
||||
// </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">
|
||||
@@ -30,84 +159,90 @@ export const Carousel = (properties: TNews) => {
|
||||
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:grid sm:gap-x-8',
|
||||
'grid sm:gap-x-8',
|
||||
type === 'hero' ? 'grid-cols-1' : 'sm:grid-cols-3',
|
||||
)}
|
||||
>
|
||||
{items.map(({ featured, title, content, tags, slug }, 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}
|
||||
/>
|
||||
{items
|
||||
.slice(currentIndex * itemsPerPage, (currentIndex + 1) * itemsPerPage)
|
||||
.map(({ featured, title, content, tags, slug }, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={twMerge(
|
||||
'flex flex-col justify-between',
|
||||
type === 'hero' ? 'gap-7' : 'gap-4',
|
||||
'grid sm:gap-x-8',
|
||||
type === 'hero' ? 'grid-cols-1 sm:grid-cols-3' : '',
|
||||
)}
|
||||
>
|
||||
<div className={`${type === 'hero' ? 'hidden' : ''} `}>
|
||||
{tags?.map((item, index) => (
|
||||
<span
|
||||
key={index}
|
||||
className="my-3 mr-2 inline-block rounded bg-gray-200 px-3 py-1"
|
||||
>
|
||||
{item}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3
|
||||
className={twMerge(
|
||||
'mt-2 w-full font-bold lg: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"
|
||||
as={Link}
|
||||
to={`detail/${slug}`}
|
||||
className={twMerge('', type === 'hero' ? '' : 'mb-5')}
|
||||
<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',
|
||||
)}
|
||||
>
|
||||
View More
|
||||
</Button>
|
||||
<div className={`${type === 'hero' ? 'hidden' : ''} `}>
|
||||
{tags?.map((item, index) => (
|
||||
<span
|
||||
key={index}
|
||||
className="my-3 mr-2 inline-block rounded bg-gray-200 px-3 py-1"
|
||||
>
|
||||
{item}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3
|
||||
className={twMerge(
|
||||
'mt-2 w-full font-bold lg: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"
|
||||
as={Link}
|
||||
to={`detail/${slug}`}
|
||||
className={twMerge('', type === 'hero' ? '' : 'mb-5')}
|
||||
>
|
||||
View More
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
))}
|
||||
</div>
|
||||
|
||||
{hasCategory && (
|
||||
<div className="my-5 mt-5 flex flex-row-reverse">
|
||||
<div className="flex gap-2.5">
|
||||
@@ -116,12 +251,14 @@ export const Carousel = (properties: TNews) => {
|
||||
className="cursor-pointer"
|
||||
width={45}
|
||||
height={45}
|
||||
onClick={previousSlide}
|
||||
/>
|
||||
<CarouselNextIcon
|
||||
color="#2E2F7C"
|
||||
className="cursor-pointer"
|
||||
width={45}
|
||||
height={45}
|
||||
onClick={nextSlide}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user