@seasketch/geoprocessing
Version:
Geoprocessing and reporting framework for SeaSketch 2.0
34 lines • 1.58 kB
JavaScript
import React, { useState } from "react";
import { SegmentControl } from "./SegmentControl.js";
import { createReportDecorator } from "./storybook/ReportDecorator.js";
import Translator from "./i18n/TranslatorAsync.js";
import { ReportPage } from "./ReportPage.js";
import Card from "./Card.js";
import Skeleton from "./Skeleton.js";
export const segmentControl = () => {
const [tab, setTab] = useState("one");
return (React.createElement(Translator, null,
React.createElement(SegmentControl, { value: tab, onClick: (segment) => setTab(segment), segments: [
{ id: "one", label: "One" },
{ id: "two", label: "Two" },
{ id: "three", label: "Three" },
] }),
React.createElement(ReportPage, { hidden: tab !== "one" },
React.createElement(Card, null,
React.createElement(Skeleton, null),
React.createElement(Skeleton, null))),
React.createElement(ReportPage, { hidden: tab !== "two" },
React.createElement(Card, null,
React.createElement(Skeleton, null),
React.createElement(Skeleton, null),
React.createElement(Skeleton, null))),
React.createElement(ReportPage, { hidden: tab !== "three" },
React.createElement(Card, null,
React.createElement(Skeleton, null)))));
};
export default {
component: SegmentControl,
title: "Components/SegmentControl",
decorators: [createReportDecorator()],
};
//# sourceMappingURL=SegmentControl.stories.js.map