refactor: remove Carousel and TableComponent for code cleanup
This commit is contained in:
Ardeman
parent
9980cb90df
commit
3937cc673a
@ -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>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
Loading…
x
Reference in New Issue
Block a user