diff --git a/packages/i18nify-playground/src/constants/date/index.js b/packages/i18nify-playground/src/constants/date/index.js index 3dc40d5f..099c0fa3 100644 --- a/packages/i18nify-playground/src/constants/date/index.js +++ b/packages/i18nify-playground/src/constants/date/index.js @@ -3,7 +3,7 @@ export const DATE_FORMAT_INTL_INPUTS = [ key: 'calendar', label: 'Calendar', type: 'select', - supportedUtilName: ['formatDate', 'formatDateTime', 'parseDateTime'], + supportedUtilName: ['formatDateTime', 'parseDateTime'], options: [ 'buddhist', 'chinese', @@ -31,13 +31,7 @@ export const DATE_FORMAT_INTL_INPUTS = [ key: 'numberingSystem', label: 'Numbering System', type: 'select', - supportedUtilName: [ - 'formatDate', - 'formatDateTime', - 'formatTime', - 'getRelativeTime', - 'parseDateTime', - ], + supportedUtilName: ['formatDateTime', 'getRelativeTime', 'parseDateTime'], options: [ 'adlm', 'ahom', @@ -132,7 +126,7 @@ export const DATE_FORMAT_INTL_INPUTS = [ key: 'hourCycle', label: 'Hour Cycle', type: 'select', - supportedUtilName: ['formatDateTime', 'formatTime'], + supportedUtilName: ['formatDateTime'], options: ['h12', 'h24'], defaultValue: 'h12', }, @@ -140,90 +134,85 @@ export const DATE_FORMAT_INTL_INPUTS = [ key: 'weekday', label: 'Weekday', type: 'select', - supportedUtilName: [ - 'formatDate', - 'formatDateTime', - 'formatTime', - 'parseDateTime', - 'getWeekdays', - ], + supportedUtilName: ['formatDateTime', 'parseDateTime', 'getWeekdays'], options: ['long', 'short', 'narrow'], + defaultValue: 'long', }, { key: 'year', label: 'Year', type: 'select', - supportedUtilName: ['formatDate', 'formatDateTime', 'formatTime', 'parseDateTime'], + supportedUtilName: ['formatDateTime', 'parseDateTime'], options: ['numeric', '2-digit'], }, { key: 'month', label: 'Month', type: 'select', - supportedUtilName: ['formatDate', 'formatDateTime', 'formatTime', 'parseDateTime'], + supportedUtilName: ['formatDateTime', 'parseDateTime'], options: ['numeric', '2-digit', 'long', 'short', 'narrow'], }, { key: 'day', label: 'Day', type: 'select', - supportedUtilName: ['formatDate', 'formatDateTime', 'formatTime', 'parseDateTime'], + supportedUtilName: ['formatDateTime', 'parseDateTime'], options: ['numeric', '2-digit'], }, { key: 'dayPeriod', label: 'Day Period', type: 'select', - supportedUtilName: ['formatDate', 'formatDateTime', 'formatTime', 'parseDateTime'], + supportedUtilName: ['formatDateTime', 'parseDateTime'], options: ['narrow', 'short', 'long'], }, { key: 'hour', label: 'Hour', type: 'select', - supportedUtilName: ['formatDate', 'formatDateTime', 'formatTime', 'parseDateTime'], + supportedUtilName: ['formatDateTime', 'parseDateTime'], options: ['numeric', '2-digit'], }, { key: 'minute', label: 'Minute', type: 'select', - supportedUtilName: ['formatDate', 'formatDateTime', 'formatTime', 'parseDateTime'], + supportedUtilName: ['formatDateTime', 'parseDateTime'], options: ['numeric', '2-digit'], }, { key: 'second', label: 'Second', type: 'select', - supportedUtilName: ['formatDate', 'formatDateTime', 'formatTime', 'parseDateTime'], + supportedUtilName: ['formatDateTime', 'parseDateTime'], options: ['numeric', '2-digit'], }, { key: 'fractionalSecondDigits', label: 'Fractional Second Digits', type: 'select', - supportedUtilName: ['formatDateTime', 'formatTime', 'parseDateTime'], + supportedUtilName: ['formatDateTime', 'parseDateTime'], options: [1, 2, 3], }, { key: 'timeZoneName', label: 'Timezone Name', type: 'select', - supportedUtilName: ['formatDate', 'formatDateTime', 'formatTime', 'parseDateTime'], + supportedUtilName: ['formatDateTime', 'parseDateTime'], options: ['long', 'short'], }, { key: 'dateStyle', label: 'Date Style', type: 'select', - supportedUtilName: ['parseDateTime'], + supportedUtilName: ['formatDateTime', 'parseDateTime'], options: ['full', 'long', 'medium', 'short'], }, { key: 'timeStyle', label: 'Time Style', type: 'select', - supportedUtilName: ['parseDateTime'], + supportedUtilName: ['formatDateTime', 'parseDateTime'], options: ['full', 'long', 'medium', 'short'], }, ]; diff --git a/packages/i18nify-playground/src/layouts/dashboard/config-navigation.jsx b/packages/i18nify-playground/src/layouts/dashboard/config-navigation.jsx index f866639f..8bccc0e7 100644 --- a/packages/i18nify-playground/src/layouts/dashboard/config-navigation.jsx +++ b/packages/i18nify-playground/src/layouts/dashboard/config-navigation.jsx @@ -52,9 +52,7 @@ const navConfig = [ path: '/date', icon: icon('ic_date'), children: [ - { title: 'FormatDate', path: '/date/formatDate' }, { title: 'FormatDateTime', path: '/date/formatDateTime' }, - { title: 'FormatTime', path: '/date/formatTime' }, { title: 'GetRelativeTime', path: '/date/getRelativeTime' }, { title: 'GetWeekdays', path: '/date/getWeekdays' }, { title: 'ParseDateTime', path: '/date/parseDateTime' }, @@ -65,11 +63,15 @@ const navConfig = [ path: '/geo', icon: icon('ic_geo'), children: [ - { title: 'GetFlagByCountry', path: '/geo/getFlagByCountry' }, - { title: 'GetListOfAllFlags', path: '/geo/getListOfAllFlags' }, + { title: 'GetFlagOfCountry', path: '/geo/getFlagOfCountry' }, + { + title: 'GetFlagsForAllCountries', + path: '/geo/getFlagsForAllCountries', + }, { title: 'GetAllCountries', path: '/geo/getAllCountries' }, - { title: 'GetStatesByCountry', path: '/geo/getStatesByCountry' }, + { title: 'GetStates', path: '/geo/getStates' }, { title: 'GetCities', path: '/geo/getCities' }, + { title: 'GetZipcodes', path: '/geo/getZipcodes' }, ], }, { diff --git a/packages/i18nify-playground/src/pages/date/formatDate.jsx b/packages/i18nify-playground/src/pages/date/formatDate.jsx deleted file mode 100644 index 795adecb..00000000 --- a/packages/i18nify-playground/src/pages/date/formatDate.jsx +++ /dev/null @@ -1,99 +0,0 @@ -import { useState } from 'react'; -import { formatDateTime } from '@razorpay/i18nify-js'; - -import dayjs from 'dayjs'; -import Container from '@mui/material/Container'; -import { Grid, useTheme, Typography, useMediaQuery } from '@mui/material'; - -import { removeEmptyValues } from 'src/utils'; -import { useIntlOptionsDateContext } from 'src/context/intlOptionsDateContext'; - -import DateForm from 'src/sections/date/date-form'; -import { useI18nContext } from '@razorpay/i18nify-react'; - -// ---------------------------------------------------------------------- - -export default function FormatDate() { - const [inpValue, setInpValue] = useState(new Date()); - const { intlDateOptions } = useIntlOptionsDateContext(); - const theme = useTheme(); - const isMobile = useMediaQuery(theme.breakpoints.down('sm')); - const { i18nState } = useI18nContext(); - const { locale } = i18nState; - - return ( - - - - - FormatDate - - - - πŸŒπŸ“† This global time stylist effortlessly turns your dates into - beautifully formatted strings, tailored to different locales. - Whether you're dealing with international clients or just love the - beauty of diverse date formats, `formatDate` is your go-to function. - It leverages the power of the Intl.DateTimeFormat API, ensuring that - your dates always dress to impress, no matter where they're - displayed. 🎩🌟 - - - {isMobile && ( - - - - - {formatDateTime(new Date(inpValue), { - locale, - intlOptions: removeEmptyValues(intlDateOptions), - })} - - - - - )} - - { - setInpValue(dayjs(val)); - }} - includeIntlOptions={true} - /> - - {!isMobile && ( - - - - - {formatDateTime(new Date(inpValue), { - locale, - intlOptions: removeEmptyValues(intlDateOptions), - })} - - - - - )} - - - ); -} diff --git a/packages/i18nify-playground/src/pages/date/formatTime.jsx b/packages/i18nify-playground/src/pages/date/formatTime.jsx deleted file mode 100644 index 0bfd52f8..00000000 --- a/packages/i18nify-playground/src/pages/date/formatTime.jsx +++ /dev/null @@ -1,99 +0,0 @@ -import { useState } from 'react'; -import { formatDateTime } from '@razorpay/i18nify-js'; - -import dayjs from 'dayjs'; -import Container from '@mui/material/Container'; -import { Grid, useTheme, Typography, useMediaQuery } from '@mui/material'; - -import { removeEmptyValues } from 'src/utils'; -import { useIntlOptionsDateContext } from 'src/context/intlOptionsDateContext'; - -import DateForm from 'src/sections/date/date-form'; -import { useI18nContext } from '@razorpay/i18nify-react'; - -// ---------------------------------------------------------------------- - -export default function FormatTime() { - const [inpValue, setInpValue] = useState(new Date()); - const { intlDateOptions } = useIntlOptionsDateContext(); - const theme = useTheme(); - const isMobile = useMediaQuery(theme.breakpoints.down('sm')); - const { i18nState } = useI18nContext(); - const { locale } = i18nState; - - return ( - - - - - FormatTime - - - - ⏰🌐 This timely charmer is your key to unlocking the secrets of - time presentation across different cultures. Using the wizardry of - the Internationalization API (Intl), formatTime translates your time - into a format that resonates with local customs and practices. - Whether it’s for scheduling international calls or just making sure - you’re in sync with the world’s timezones, this function is your - trusty sidekick in the realm of time formatting! 🌟⌚ - - - {isMobile && ( - - - - - {formatDateTime(new Date(inpValue), { - locale, - intlOptions: removeEmptyValues(intlDateOptions), - })} - - - - - )} - - { - setInpValue(dayjs(val)); - }} - includeIntlOptions={true} - /> - - {!isMobile && ( - - - - - {formatDateTime(new Date(inpValue), { - locale, - intlOptions: removeEmptyValues(intlDateOptions), - })} - - - - - )} - - - ); -} diff --git a/packages/i18nify-playground/src/pages/date/getRelativeTime.jsx b/packages/i18nify-playground/src/pages/date/getRelativeTime.jsx index 15b690d6..6658a878 100644 --- a/packages/i18nify-playground/src/pages/date/getRelativeTime.jsx +++ b/packages/i18nify-playground/src/pages/date/getRelativeTime.jsx @@ -30,17 +30,23 @@ export default function GetRelativeTime() { - ⏳🌏 This time-traveling virtuoso effortlessly bridges the gap between dates, offering a - glimpse into the past or a peek into the future. With the help of the - Internationalization API (Intl), getRelativeTime transforms absolute dates into - relatable, human-friendly phrases like β€˜3 hours ago’ or β€˜in 2 days’. Whether you’re - reminiscing the past or anticipating the future, this function keeps you connected to - time in the most intuitive way! πŸš€πŸ•°οΈ + ⏳🌏 This time-traveling virtuoso effortlessly bridges the gap + between dates, offering a glimpse into the past or a peek into the + future. With the help of the Internationalization API (Intl), + getRelativeTime transforms absolute dates into relatable, + human-friendly phrases like β€˜3 hours ago’ or β€˜in 2 days’. Whether + you’re reminiscing the past or anticipating the future, this + function keeps you connected to time in the most intuitive way! πŸš€πŸ•°οΈ {isMobile && ( - + {getRelativeTime(new Date(inpValue), new Date(), { @@ -55,7 +61,9 @@ export default function GetRelativeTime() { {!isMobile && ( - + {getRelativeTime(new Date(inpValue), new Date(), { diff --git a/packages/i18nify-playground/src/pages/date/getWeekdays.jsx b/packages/i18nify-playground/src/pages/date/getWeekdays.jsx index ac4ca002..f22ad824 100644 --- a/packages/i18nify-playground/src/pages/date/getWeekdays.jsx +++ b/packages/i18nify-playground/src/pages/date/getWeekdays.jsx @@ -20,9 +20,12 @@ export default function GetWeekdays() { const { locale } = i18nState; const code = JSON.stringify( - getWeekdays({ locale, intlOptions: { weekday: removeEmptyValues(intlDateOptions).weekday } }), + getWeekdays({ + locale, + weekday: removeEmptyValues(intlDateOptions).weekday, + }), null, - 2 + 2, ); return ( @@ -34,18 +37,28 @@ export default function GetWeekdays() { - πŸ“…πŸŒ This global day-namer is your trusty guide through the week, no matter where you - are in the world. Using the power of the Internationalization API (Intl), getWeekdays - serves up the names of all seven days tailored to your chosen locale. From planning - international meetings to creating a multilingual planner, this function provides the - perfect blend of cultural awareness and practical utility, keeping you in sync with the - local rhythm of life, one day at a time! πŸŒŸπŸ—“οΈ + πŸ“…πŸŒ This global day-namer is your trusty guide through the week, no + matter where you are in the world. Using the power of the + Internationalization API (Intl), getWeekdays serves up the names of + all seven days tailored to your chosen locale. From planning + international meetings to creating a multilingual planner, this + function provides the perfect blend of cultural awareness and + practical utility, keeping you in sync with the local rhythm of + life, one day at a time! πŸŒŸπŸ—“οΈ {isMobile && ( - - + + @@ -54,14 +67,24 @@ export default function GetWeekdays() { {!isMobile && ( - - + + diff --git a/packages/i18nify-playground/src/pages/geo/getAllCountries.jsx b/packages/i18nify-playground/src/pages/geo/getAllCountries.jsx index 09df5b47..655f391c 100644 --- a/packages/i18nify-playground/src/pages/geo/getAllCountries.jsx +++ b/packages/i18nify-playground/src/pages/geo/getAllCountries.jsx @@ -31,17 +31,26 @@ export default function GetAllCountries() { - 🌍 Ready to dive into the world of nations? Say hello to getAllCountries! This dynamic - function is your gateway to a comprehensive list of countries spanning the globe. With - just a simple call, you'll unlock a treasure trove of international data, perfect for - any coding adventurer. πŸ—ΊοΈπŸš€ + 🌍 Ready to dive into the world of nations? Say hello to + getAllCountries! This dynamic function is your gateway to a + comprehensive list of countries spanning the globe. With just a + simple call, you'll unlock a treasure trove of international data, + perfect for any coding adventurer. πŸ—ΊοΈπŸš€ {isMobile && ( - - + + @@ -50,7 +59,9 @@ export default function GetAllCountries() { {!isMobile && ( - - + + diff --git a/packages/i18nify-playground/src/pages/geo/getCities.jsx b/packages/i18nify-playground/src/pages/geo/getCities.jsx index 0403cf94..b26b2564 100644 --- a/packages/i18nify-playground/src/pages/geo/getCities.jsx +++ b/packages/i18nify-playground/src/pages/geo/getCities.jsx @@ -52,7 +52,7 @@ export default function GetCities() { if (!stateInp) return; getCities(countryInp, stateInp).then((res) => { setCities(res); - setCityInp(res[0]); + setCityInp(res[0].name); setCode(JSON.stringify(res, null, 2)); }); }, [stateInp]); @@ -121,7 +121,7 @@ export default function GetCities() { }} > {cities.map((city) => ( - + -
{city}
+
{city.name}
 ))} diff --git a/packages/i18nify-playground/src/pages/geo/getFlagByCountry.jsx b/packages/i18nify-playground/src/pages/geo/getFlagOfCountry.jsx similarity index 99% rename from packages/i18nify-playground/src/pages/geo/getFlagByCountry.jsx rename to packages/i18nify-playground/src/pages/geo/getFlagOfCountry.jsx index 25e9def5..206de986 100644 --- a/packages/i18nify-playground/src/pages/geo/getFlagByCountry.jsx +++ b/packages/i18nify-playground/src/pages/geo/getFlagOfCountry.jsx @@ -57,7 +57,7 @@ const Dropdown = ({ countryCode, onClick }) => { ); }; -export default function GetFlagByCountry() { +export default function GetFlagOfCountry() { const [inpValue, setInpValue] = useState(''); const [countryCode, setCountryCode] = useState('US'); const theme = useTheme(); diff --git a/packages/i18nify-playground/src/pages/geo/getFlagsForAllCountries.jsx b/packages/i18nify-playground/src/pages/geo/getFlagsForAllCountries.jsx new file mode 100644 index 00000000..9b2bed9b --- /dev/null +++ b/packages/i18nify-playground/src/pages/geo/getFlagsForAllCountries.jsx @@ -0,0 +1,103 @@ +import { getFlagsForAllCountries } from '@razorpay/i18nify-js'; + +import Container from '@mui/material/Container'; +import { Grid, useTheme, Typography, useMediaQuery, Box } from '@mui/material'; +import SVG from 'react-inlinesvg'; +import CodeEditor from 'src/components/codeEditor'; + +// ---------------------------------------------------------------------- + +export default function GetFlagsForAllCountries() { + const flags = getFlagsForAllCountries(); + const code = JSON.stringify(flags, null, 2); + const theme = useTheme(); + const isMobile = useMediaQuery(theme.breakpoints.down('sm')); + + return ( + + + + + GetFlagsForAllCountries + + + + Access a comprehensive collection of global flags with an ISO + country code πŸŒβœˆοΈβ€”serving as your digital passport πŸ›‚ to a visually + unified world. This feature amplifies your app's international flair + 🌐 and celebrates cultural diversity πŸ³οΈπŸ” by embedding flags from + every recognized nation. + + + + {isMobile && ( + + + + + + + + )} + + + {Object.entries(flags).map(([countryCode, countrySvg]) => { + return ( + + + + {countryCode} + + + ); + })} + + + {!isMobile && ( + + + + + + + + )} + + + ); +} diff --git a/packages/i18nify-playground/src/pages/geo/getListOfAllFlags.jsx b/packages/i18nify-playground/src/pages/geo/getListOfAllFlags.jsx deleted file mode 100644 index 38c866ee..00000000 --- a/packages/i18nify-playground/src/pages/geo/getListOfAllFlags.jsx +++ /dev/null @@ -1,111 +0,0 @@ -import { useState, useEffect } from 'react'; -import { getFlagsForAllCountries } from '@razorpay/i18nify-js'; - -import Container from '@mui/material/Container'; -import { Grid, useTheme, Typography, useMediaQuery, Box } from '@mui/material'; -import SVG from 'react-inlinesvg'; - -// ---------------------------------------------------------------------- - -export default function GetListOfAllFlags() { - const [countryCodes, setCountryCodes] = useState({}); - const theme = useTheme(); - const isMobile = useMediaQuery(theme.breakpoints.down('sm')); - - useEffect(() => { - setCountryCodes(getFlagsForAllCountries()); - }, []); - - return ( - - - - - getFlagsForAllCountries - - - - 🌍🚩 Imagine a virtual globe where you can spin and pick any country - – that's what `getFlagsForAllCountries` brings to your codebase. - This function maps out the whole world by returning an object with - country codes as keys and their respective flag SVGs as values. It's - like having a world atlas in your hands, but instead of pages, you - get digital, vibrant flags of each nation. If any issue arises - during this global flag gathering, the function won't just sweep it - under the rug; it'll raise a flag (pun intended) to let you know. - - - - {isMobile && ( - - - {Object.entries(countryCodes).map(([countryCode, countrySvg]) => { - return ( - <> - - - {countryCode} - - - ); - })} - - - )} - {!isMobile && ( - - - {Object.entries(countryCodes).map(([countryCode, countrySvg]) => { - return ( - <> - - - {countryCode} - - - ); - })} - - - )} - - - ); -} diff --git a/packages/i18nify-playground/src/pages/geo/getStatesByCountry.jsx b/packages/i18nify-playground/src/pages/geo/getStates.jsx similarity index 87% rename from packages/i18nify-playground/src/pages/geo/getStatesByCountry.jsx rename to packages/i18nify-playground/src/pages/geo/getStates.jsx index da44e933..a630ef37 100644 --- a/packages/i18nify-playground/src/pages/geo/getStatesByCountry.jsx +++ b/packages/i18nify-playground/src/pages/geo/getStates.jsx @@ -9,7 +9,7 @@ import StateDropdown from 'src/components/stateDropdown'; // ---------------------------------------------------------------------- -export default function GetStatesByCountry() { +export default function GetStates() { const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down('sm')); const [code, setCode] = useState(''); @@ -43,15 +43,13 @@ export default function GetStatesByCountry() { - GetStatesByCountry + GetStates - 🌍 Want to explore countries by continent? Meet getStatesByCountry! - This savvy function lets you delve into specific continents, - unlocking a trove of countries waiting to be discovered. Whether - you're curious about Africa, Asia, or any other continent, just call - this function and let the geographical journey begin! πŸ—ΊοΈπŸ” + 🌍 Embark on a state-by-state discovery with the getStates API! Get + access to a treasure trove of state information, including names, + time zones, and even a list of vibrant cities within each state. diff --git a/packages/i18nify-playground/src/pages/geo/getZipcodes.jsx b/packages/i18nify-playground/src/pages/geo/getZipcodes.jsx new file mode 100644 index 00000000..d7d93df5 --- /dev/null +++ b/packages/i18nify-playground/src/pages/geo/getZipcodes.jsx @@ -0,0 +1,155 @@ +import Container from '@mui/material/Container'; +import { + Box, + Grid, + MenuItem, + Select, + Typography, + useMediaQuery, + useTheme, +} from '@mui/material'; +import { getAllCountries, getStates, getZipcodes } from '@razorpay/i18nify-js'; +import { useEffect, useState } from 'react'; +import { ALLOWED_COUNTRIES } from 'src/constants/geo'; +import CodeEditor from 'src/components/codeEditor'; +import CountryDropdown from 'src/components/countryDropdown'; +import StateDropdown from 'src/components/stateDropdown'; + +// ---------------------------------------------------------------------- + +export default function GetZipcodes() { + const theme = useTheme(); + const isMobile = useMediaQuery(theme.breakpoints.down('sm')); + const [code, setCode] = useState(''); + const [countryInp, setCountryInp] = useState('IN'); + const [countryList, setCountryList] = useState([]); + const [stateInp, setStateInp] = useState(''); + const [stateList, setStateList] = useState([]); + const [zipcodes, setZipcodes] = useState([]); + const [zipcodeInp, setZipcodeInp] = useState(''); + + useEffect(() => { + getAllCountries().then((res) => + setCountryList( + res.filter((country) => ALLOWED_COUNTRIES.includes(country.code)), + ), + ); + }, []); + + useEffect(() => { + setStateInp(''); + setCode(''); + getStates(countryInp).then((res) => { + const states = Object.entries(res).map(([_code, state]) => ({ + code: _code, + name: state.name, + })); + setStateList(states); + }); + }, [countryInp]); + + useEffect(() => { + if (!stateInp) return; + getZipcodes(countryInp, stateInp).then((res) => { + setZipcodes(res); + setZipcodeInp(res[0]); + setCode(JSON.stringify(res, null, 2)); + }); + }, [stateInp]); + + return ( + + + + + GetZipcodes + + + + Explore postal codes with the getZipcodes API! Discover a list of + unique zip codes organized by country and state, making it easy to + navigate geographic areas and streamline address-based operations. + + + + {isMobile && ( + + + + + + + + )} + + setCountryInp(country)} + /> + setStateInp(e)} + list={stateList} + /> + + List of Zipcodes + + + {!isMobile && ( + + + + + + + + )} + + + ); +} diff --git a/packages/i18nify-playground/src/routes/sections.jsx b/packages/i18nify-playground/src/routes/sections.jsx index 4a639f3c..38acb670 100644 --- a/packages/i18nify-playground/src/routes/sections.jsx +++ b/packages/i18nify-playground/src/routes/sections.jsx @@ -26,17 +26,16 @@ import GetDialCodeByCountryCode from 'src/pages/phone/getDialCodeByCountryCode'; // Geo Pages import GeoPage from 'src/pages/geo'; -import GetFlagByCountry from 'src/pages/geo/getFlagByCountry'; -import GetListOfAllFlags from 'src/pages/geo/getListOfAllFlags'; +import GetFlagOfCountry from 'src/pages/geo/getFlagOfCountry'; +import GetFlagsForAllCountries from 'src/pages/geo/getFlagsForAllCountries'; import GetAllCountries from 'src/pages/geo/getAllCountries'; import GetCities from 'src/pages/geo/getCities'; -import GetStatesByCountry from 'src/pages/geo/getStatesByCountry'; +import GetZipcodes from 'src/pages/geo/getZipcodes'; +import GetStates from 'src/pages/geo/getStates'; // Date Time Pages import DatePage from 'src/pages/date'; -import FormatDate from 'src/pages/date/formatDate'; import FormatDateTime from 'src/pages/date/formatDateTime'; -import FormatTime from 'src/pages/date/formatTime'; import GetRelativeTime from 'src/pages/date/getRelativeTime'; import GetWeekdays from 'src/pages/date/getWeekdays'; import ParseDateTime from 'src/pages/date/parseDateTime'; @@ -104,12 +103,12 @@ export default function Router() { element: , }, { - path: 'geo/getListOfAllFlags', - element: , + path: 'geo/getFlagsForAllCountries', + element: , }, { - path: 'geo/getFlagByCountry', - element: , + path: 'geo/getFlagOfCountry', + element: , }, { @@ -117,24 +116,20 @@ export default function Router() { element: , }, { - path: 'geo/getStatesByCountry', - element: , + path: 'geo/getStates', + element: , }, { path: 'geo/getCities', element: , }, { - path: 'geo', - element: , + path: 'geo/getZipcodes', + element: , }, { - path: 'date/formatDate', - element: ( - - - - ), + path: 'geo', + element: , }, { path: 'date/formatDateTime', @@ -144,14 +139,6 @@ export default function Router() { ), }, - { - path: 'date/formatTime', - element: ( - - - - ), - }, { path: 'date/getRelativeTime', element: ( diff --git a/packages/i18nify-playground/src/sections/date/date-form.jsx b/packages/i18nify-playground/src/sections/date/date-form.jsx index 570a6d44..df73fc4f 100644 --- a/packages/i18nify-playground/src/sections/date/date-form.jsx +++ b/packages/i18nify-playground/src/sections/date/date-form.jsx @@ -24,7 +24,11 @@ const DateForm = ({ - +