Our review

Builds reusable carousel and paginated data-display UI components for React dashboards and Telegram bots.

Strengths

Provides reusable, typed components.
Supports autoplay and pagination.
Works for both web and Telegram.
Clean separation of concerns.

Limitations

Requires manual integration with data sources.
Telegram bot implementation is basic and may need extension.
Not a complete carousel library; focuses on basic functionality.

When to use it

When you need a lightweight, reusable carousel component for a React dashboard or a paginated menu for a Telegram bot.

When not to use it

When you need advanced animations, touch swipe support, or a fully-featured carousel library like Slick.

Examples

React carousel with autoplay

Create a reusable carousel component in React that displays dashboard cards with autoplay and navigation dots.

Telegram bot paginated menu

Build a paginated inline keyboard menu for a Telegram bot in Python with next/prev buttons.

Paginated data view

Implement a paginated data view component in React with previous and next buttons for navigating through items.

Carousel / UI Component Skill

Builds reusable carousel and data-display UI components.

When to Use

Building dashboard cards that display lists (balita, ibu hamil, reports)
Creating Telegram bot carousel menus with inline keyboard
Implementing paginated data views

Dashboard — React Carousel

Basic Carousel Component

// components/ui/Carousel.tsx
import { useState } from "react"

interface CarouselProps<T> {
  items: T[]
  renderItem: (item: T, index: number) => React.ReactNode
  keyExtractor: (item: T) => string
  autoPlay?: boolean
  interval?: number
}

export function Carousel<T>({ items, renderItem, keyExtractor, autoPlay, interval = 3000 }: CarouselProps<T>) {
  const [current, setCurrent] = useState(0)

  useEffect(() => {
    if (!autoPlay) return
    const timer = setInterval(() => {
      setCurrent(c => (c + 1) % items.length)
    }, interval)
    return () => clearInterval(timer)
  }, [autoPlay, interval, items.length])

  return (
    <div className="relative overflow-hidden">
      <div
        className="flex transition-transform duration-300"
        style={{ transform: `translateX(-${current * 100}%)` }}
      >
        {items.map((item, i) => (
          <div key={keyExtractor(item)} className="w-full flex-shrink-0">
            {renderItem(item, i)}
          </div>
        ))}
      </div>
      <div className="absolute bottom-2 left-1/2 flex gap-1">
        {items.map((_, i) => (
          <button
            key={i}
            onClick={() => setCurrent(i)}
            className={`w-2 h-2 rounded-full ${i === current ? "bg-blue-600" : "bg-gray-300"}`}
          />
        ))}
      </div>
    </div>
  )
}

Usage with Data Cards

<Carousel
  items={recentBalita}
  keyExtractor={(b) => b.id.toString()}
  renderItem={(balita) => <BalitaCard balita={balita} />}
/>

Telegram Bot — Inline Keyboard Carousel

Paginated Inline Keyboard

from telegram import InlineKeyboardButton, InlineKeyboardMarkup

ITEMS_PER_PAGE = 5

def build_pagination_keyboard(items: list, page: int, callback_prefix: str) -> InlineKeyboardMarkup:
    start = page * ITEMS_PER_PAGE
    end = start + ITEMS_PER_PAGE
    page_items = items[start:end]

    keyboard = []
    for item in page_items:
        keyboard.append([
            InlineKeyboardButton(
                f"📋 {item.name}",
                callback_data=f"{callback_prefix}:view:{item.id}"
            )
        ])

    nav = []
    if page > 0:
        nav.append(InlineKeyboardButton("◀️ Prev", callback_data=f"{callback_prefix}:page:{page-1}"))
    if end < len(items):
        nav.append(InlineKeyboardButton("Next ▶️", callback_data=f"{callback_prefix}:page:{page+1}"))
    if nav:
        keyboard.append(nav)

    return InlineKeyboardMarkup(keyboard)

Usage in Handler

async def list_items(update: Update, context: ContextTypes.DEFAULT_TYPE):
    items = await db.get_all()
    keyboard = build_pagination_keyboard(items, page=0, callback_prefix="item")
    await update.message.reply_text(f"Daftar ({len(items)} total):", reply_markup=keyboard)

Carousel & UI Components

Recommended for