Chart.js
2 months ago
ChartAreaChart.js
2 months ago
ChartContext.js
2 months ago
ChartDateFilter.js
2 months ago
ChartKPI.js
2 months ago
ChartSummary.js
2 months ago
ChartTabs.js
2 months ago
index.js
2 months ago
ChartTabs.js
41 lines
| 1 | import { useCallback } from "@wordpress/element"; |
| 2 | import { Tabs } from "@bsf/force-ui"; |
| 3 | import { __ } from "@wordpress/i18n"; |
| 4 | import { useChartContext } from "./ChartContext"; |
| 5 | |
| 6 | const ChartTabs = () => { |
| 7 | const { activeTab, setActiveTab } = useChartContext(); |
| 8 | |
| 9 | const handleChange = useCallback( |
| 10 | ({ value }) => { |
| 11 | setActiveTab(value.slug); |
| 12 | }, |
| 13 | [setActiveTab] |
| 14 | ); |
| 15 | |
| 16 | return ( |
| 17 | <Tabs.Group |
| 18 | activeItem={activeTab} |
| 19 | onChange={handleChange} |
| 20 | orientation="horizontal" |
| 21 | size="xs" |
| 22 | variant="pill" |
| 23 | width="auto" |
| 24 | className="!p-0.5" |
| 25 | > |
| 26 | <Tabs.Tab |
| 27 | slug="views" |
| 28 | text={__("Views", "presto-player")} |
| 29 | className="font-medium !px-2 !py-1" |
| 30 | /> |
| 31 | <Tabs.Tab |
| 32 | slug="watch-time" |
| 33 | text={__("Watch Time", "presto-player")} |
| 34 | className="font-medium !px-2 !py-1" |
| 35 | /> |
| 36 | </Tabs.Group> |
| 37 | ); |
| 38 | }; |
| 39 | |
| 40 | export default ChartTabs; |
| 41 |