NLX | Developers

This carousel component presents list-type information in a rich, visually-appealing manner.
1const Carousel = ({ data }) => {
2  const [selectedId, setSelectedId] = React.useState<string | null>(null);
3
4  return html`
5    <div className="chat-carousel-container">
6      <div className="chat-carousel-slides">
7        ${data.map(
8          document =>
9            html`
10              <div
11                className=${`chat-carousel-slide ${
12                  selectedId === document.id
13                    ? "chat-carousel-slide--active"
14                    : ""
15                }`}
16                key=${document.id}
17                onClick=${() => {
18                  setSelectedId(document.id);
19                }}
20              >
21                <div className="chat-carousel-title">${document.name}</div>
22                <div
23                  className="chat-carousel-image"
24                  style=${{
25                    backgroundImage: `url(${document.imageUrl})`
26                  }}
27                />
28                <div className="chat-carousel-description">
29                  ${document.description}
30                </div>
31              </div>
32            `
33        )}
34      </div>
35    </div>
36  `;
37};