/
Gallery.tsx
42 lines (38 loc) · 1.27 KB
/
Gallery.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
import React, { useCallback, useState } from 'react';
import { GalleryItem } from './GalleryItem';
import { Tab } from './Tab';
import { GalleryMetadata, TabsInterface } from '../../../masa';
export interface GalleryProps {
tabs: TabsInterface[];
wrapperClassName: string;
}
export const Gallery = ({ tabs, wrapperClassName }: GalleryProps) => {
const [activeTab, setActiveTab] = useState(0);
const handleActive = useCallback((index: number) => {
setActiveTab(index);
}, []);
return (
<article className="tabs-container">
<header className="tabs-header">
<nav className="tabs-wrapper">
<ul className="tabs" data-active-tab={activeTab}>
{tabs.map((tab: TabsInterface, index: number) => (
<li key={`list-header-tab-${tab.title}`}>
<Tab
title={tab.title}
active={activeTab === index}
onClick={() => handleActive(index)}
/>
</li>
))}
</ul>
</nav>
</header>
<section className={`tab-content ${wrapperClassName}`}>
{tabs[activeTab].items.map((tab: GalleryMetadata) => {
return <GalleryItem {...tab} key={tab.name} />;
})}
</section>
</article>
);
};