@neo4j-ndl/react
Version:
React implementation of Neo4j Design System
41 lines • 3.57 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.TimeZonePickerBothMode = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
/**
*
* Copyright (c) "Neo4j"
* Neo4j Sweden AB [http://neo4j.com]
*
* This file is part of Neo4j.
*
* Neo4j is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
const react_1 = require("react");
const typography_1 = require("../../typography");
const TimeZonePicker_1 = require("../TimeZonePicker");
const TimeZonePickerBothMode = () => {
const [selectedTimezone, setSelectedTimezone] = (0, react_1.useState)('America/New_York');
return ((0, jsx_runtime_1.jsxs)("div", { style: { maxWidth: '400px', padding: '20px' }, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: "title-4", style: { marginBottom: '16px' }, children: "Both Mode - UTC and City-Based Timezones" }), (0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: "body-medium", style: { marginBottom: '24px' }, children: "This mode displays both UTC offsets and city-based timezones in separate sections within the dropdown. Perfect for users who need flexibility in choosing between precise UTC offsets or familiar city names." }), (0, jsx_runtime_1.jsx)(TimeZonePicker_1.TimeZonePicker, { label: "Select Timezone", mode: "both", value: selectedTimezone, onChange: (tz) => {
setSelectedTimezone(tz);
}, htmlAttributes: { id: 'time-zone-input' } }), (0, jsx_runtime_1.jsxs)("div", { style: {
backgroundColor: '#f5f5f5',
borderRadius: '4px',
marginTop: '24px',
padding: '16px',
}, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: "body-small", style: { fontWeight: 600, marginBottom: '8px' }, children: "Selected Timezone:" }), (0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: "body-medium", children: selectedTimezone || 'None' })] }), (0, jsx_runtime_1.jsx)("div", { style: { marginTop: '16px' }, children: (0, jsx_runtime_1.jsxs)(typography_1.Typography, { variant: "body-small", style: { color: '#666' }, children: [(0, jsx_runtime_1.jsx)("strong", { children: "Features:" }), (0, jsx_runtime_1.jsxs)("ul", { style: { marginTop: '8px', paddingLeft: '20px' }, children: [(0, jsx_runtime_1.jsx)("li", { children: "Two separate sections: \"UTC Offsets\" and \"City-Based Timezones\"" }), (0, jsx_runtime_1.jsx)("li", { children: "Search across both sections simultaneously" }), (0, jsx_runtime_1.jsx)("li", { children: "Custom UTC input support (e.g., UTC+5:30)" }), (0, jsx_runtime_1.jsx)("li", { children: "All standard UTC offsets from UTC-12 to UTC+14" }), (0, jsx_runtime_1.jsx)("li", { children: "All IANA timezone identifiers with city names" })] })] }) })] }));
};
exports.TimeZonePickerBothMode = TimeZonePickerBothMode;
exports.default = exports.TimeZonePickerBothMode;
//# sourceMappingURL=timezone-picker-both-mode.story.js.map