legalgo-FE-reactrouter/app/components/ui/carousel.tsx

import { twMerge } from 'tailwind-merge'

import type { TNews } from '~/types/news'

export const Carousel = (properties: TNews) => {
  const { title, description, items, type } = properties
  return (
    <div>
      <div>
        <h2>{title}</h2>
        <p>{description}</p>
      </div>
      <div
        className={twMerge(
          type === 'hero' ? 'grid grid-cols-1' : 'grid grid-cols-3',
        )}
      >
        {items.map(({ image, title, content }, index) => (
          <div key={index}>
            <img
              src={image}
              alt={title}
            />
            <h3>{title}</h3>
            <p>{content}</p>
          </div>
        ))}
      </div>
    </div>
  )
}