@neo4j-ndl/react
Version:
React implementation of Neo4j Design System
37 lines • 3.01 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "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/>.
*/
import { useState } from 'react';
import { Typography } from '../../typography';
import { TimeZonePicker } from '../TimeZonePicker';
export const TimeZonePickerBothMode = () => {
const [selectedTimezone, setSelectedTimezone] = useState('America/New_York');
return (_jsxs("div", { style: { maxWidth: '400px', padding: '20px' }, children: [_jsx(Typography, { variant: "title-4", style: { marginBottom: '16px' }, children: "Both Mode - UTC and City-Based Timezones" }), _jsx(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." }), _jsx(TimeZonePicker, { label: "Select Timezone", mode: "both", value: selectedTimezone, onChange: (tz) => {
setSelectedTimezone(tz);
}, htmlAttributes: { id: 'time-zone-input' } }), _jsxs("div", { style: {
backgroundColor: '#f5f5f5',
borderRadius: '4px',
marginTop: '24px',
padding: '16px',
}, children: [_jsx(Typography, { variant: "body-small", style: { fontWeight: 600, marginBottom: '8px' }, children: "Selected Timezone:" }), _jsx(Typography, { variant: "body-medium", children: selectedTimezone || 'None' })] }), _jsx("div", { style: { marginTop: '16px' }, children: _jsxs(Typography, { variant: "body-small", style: { color: '#666' }, children: [_jsx("strong", { children: "Features:" }), _jsxs("ul", { style: { marginTop: '8px', paddingLeft: '20px' }, children: [_jsx("li", { children: "Two separate sections: \"UTC Offsets\" and \"City-Based Timezones\"" }), _jsx("li", { children: "Search across both sections simultaneously" }), _jsx("li", { children: "Custom UTC input support (e.g., UTC+5:30)" }), _jsx("li", { children: "All standard UTC offsets from UTC-12 to UTC+14" }), _jsx("li", { children: "All IANA timezone identifiers with city names" })] })] }) })] }));
};
export default TimeZonePickerBothMode;
//# sourceMappingURL=timezone-picker-both-mode.story.js.map