2022-03-03 02:34:19 +03:00
|
|
|
import React from 'react';
|
|
|
|
import useTermState from './state';
|
|
|
|
import { Tab } from './Tab';
|
2022-03-10 01:15:24 +03:00
|
|
|
import { useAddSession } from './lib/useAddSession';
|
2022-04-01 16:59:39 +03:00
|
|
|
import { Icon } from '@tlon/indigo-react';
|
2022-03-03 02:34:19 +03:00
|
|
|
|
|
|
|
export const Tabs = () => {
|
|
|
|
const { sessions, names } = useTermState();
|
2022-03-10 01:15:24 +03:00
|
|
|
const { addSession } = useAddSession();
|
2022-03-03 02:34:19 +03:00
|
|
|
|
|
|
|
return (
|
|
|
|
<div className="tabs">
|
2022-03-04 01:58:48 +03:00
|
|
|
{names.map((n, i) => {
|
2022-03-03 02:34:19 +03:00
|
|
|
return (
|
|
|
|
<Tab session={sessions[n]} name={n} key={i} />
|
|
|
|
);
|
|
|
|
})}
|
2022-04-01 16:59:39 +03:00
|
|
|
<button className="tab" onClick={addSession}>
|
|
|
|
<Icon
|
|
|
|
icon="Plus"
|
|
|
|
size="18px"
|
|
|
|
/>
|
|
|
|
</button>
|
2022-03-03 02:34:19 +03:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|