npm - @undp/create-app - Versions diffs - 0.2.14 → 0.2.16 - Mend

@undp/create-app 0.2.14 → 0.2.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (137) hide show

package/bin/templates/viteWithLanguage/router/public/imgs/undp-logo-blue.svg ADDED Viewed

@@ -0,0 +1 @@

+ <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 60.8"><style>.st0{fill:#0468b1}.st1{fill:#fff}</style><path class="st0" d="M0 30.9h14.5v14.5H0z"/><path class="st1" d="M3.7 33.2v5.7c0 3 1.5 4.1 3.5 4.1 2.1 0 3.6-1.2 3.6-4.2v-5.7H9.6v5.8c0 2.1-1 3.1-2.4 3.1-1.3 0-2.3-.9-2.3-3.1v-5.7H3.7z"/><path class="st0" d="M15.4 30.9h14.5v14.5H15.4z"/><path class="st1" d="M20.2 43v-4.1c0-1.6 0-2.8-.1-4 .5 1.1 1.1 2.2 1.8 3.2L25 43h1.3v-9.6h-1.1v4.1c0 1.5 0 2.7.2 4-.4-1-1-2-1.7-3.2l-3.1-4.9h-1.4v9.7l1-.1z"/><path class="st0" d="M15.4 46.3h14.5v14.5H15.4z"/><path class="st1" d="M25.1 49.4c-.6-.5-1.5-.8-2.8-.8-1 0-1.8.1-2.4.2v9.6h1.2v-3.9c.3.1.6.1 1 .1 1.2 0 2.3-.4 2.9-1.1.5-.5.8-1.2.8-2.1.2-.8-.1-1.5-.7-2"/><path class="st0" d="M22.3 53.6c-.4 0-.8 0-1.1-.1v-3.7c.2 0 .6-.1 1.2-.1 1.4 0 2.3.6 2.3 1.9 0 1.3-.9 2-2.4 2M0 46.3h14.5v14.5H0z"/><path class="st1" d="M10.2 49.8c-.8-.8-2.1-1.2-3.9-1.2-1 0-1.9.1-2.7.2v9.6c.6.1 1.4.1 2.3.1 1.9 0 3.4-.5 4.3-1.4.9-.9 1.4-2.2 1.4-3.7 0-1.7-.5-2.8-1.4-3.6"/><path class="st0" d="M6.2 57.4c-.5 0-1 0-1.3-.1v-7.6c.3-.1.8-.2 1.5-.2 2.7 0 3.9 1.4 3.9 3.7 0 2.7-1.5 4.3-4.1 4.2M0 0h30v30H0z"/><path class="st1" d="M25.7 15.6c-.4.6-1 1.1-1.3 1.8 0-.5.1-1.1-.1-1.5-.3-1-.6-1.9-.7-3.1v-.4c.2 1.1 1.3 1.9 1.2 3.1 0 .3-.1.6-.2.8v-.1c.2-.6.2-1.2.5-1.8.4-.8.8-1.6.6-2.6.8 1.2.6 2.7 0 3.8"/><path class="st1" d="M25.1 9.4c.7 1 .9 2.5.3 3.6-.2.5-.3 1-.4 1.5 0-.1 0-.2-.1-.3-.2-1.1-1.3-1.9-1.7-2.8-.2-.3-.2-.6-.3-1.1.4.8 1.5 1.2 1.9 2.2.2.2.1.5.2.8-.2-1-.1-1.9 0-2.8 0-.5-.1-1-.3-1.4.1-.1.2.1.4.3"/><path class="st1" d="M24.6 9.2c.2.8-.1 1.6.1 2.5-.5-.9-1.4-1.3-2.1-2-.4-.4-.6-1-.6-1.5.4.9 1.4 1.1 2 1.9.2.2.2.4.4.6-.3-.7-.5-1.5-.6-2.4l-.6-.9c.6.2 1.2 1 1.4 1.8"/><path class="st1" d="M22.5 7.3c.6.6.8 1.2 1 1.9l.1.2c-.8-.6-1.6-1.5-2.2-2.3l-.6-.7c.5.2 1.2.4 1.7.9m-11.1-.7c1.1-.6 2.4-.8 3.6-.9 3 0 5.9 1.8 7.2 4.5.8 1.6 1.1 3.8.6 5.6-.6 2.2-2.4 4.3-4.5 5.2-2.4 1.1-5.7.9-7.8-.6-2.9-1.9-4.1-5.4-3.2-8.8.5-2 2.1-4.1 4.1-5m-2.3 0c-.6.5-1 1.2-1.5 1.8-.4.4-.9.8-1.4 1.2.3-.6.3-1.2.7-1.6.5-.9 1.4-1.1 2.2-1.4"/><path class="st1" d="M5.8 8.4c.2-.4.6-.6 1.1-.7-.8.6-.7 1.5-1 2.4-.1.2-.2.6-.3.8.2-.3.4-.6.6-1 .6-.6 1.4-.9 1.7-1.7 0 1.1-.9 1.9-1.8 2.5-.4.3-.7.6-.9 1.1V11c.1-.9 0-2 .6-2.6"/><path class="st1" d="M4.3 11.5c0-1 .4-1.7.9-2.4-.6.9-.1 2.1-.2 3.1l-.1 1.1c0-.2 0-.2.1-.4.2-.9.9-1.5 1.5-2.1.2-.2.2-.3.3-.5-.1.4-.2.9-.4 1.3-.5 1-1.5 1.8-1.6 2.9.1-1-.7-1.9-.5-3"/><path class="st1" d="M3.8 12.9l.3-.9c-.2 1.2.6 2.2.9 3.2l.3 1.2c-.4-1.1.2-2.2.8-3.2.2-.2.2-.5.3-.8.1.5-.1 1.1-.2 1.6-.2.6-.4 1.4-.6 2-.2.4-.1.9 0 1.3-.4-.8-1.3-1.5-1.5-2.4-.3-.5-.5-1.3-.3-2"/><path class="st1" d="M3.7 15.3c.1 1.3 1.5 2 2.2 3.2.2.2.3.4.6.6 0-.2-.2-.2-.2-.4-.2-.5-.3-1-.2-1.5.1-.6.3-1.3.2-2 .6 1.2.4 2.8.7 4.1.1.3.2.6.4.8-1.2-.8-2.8-1.5-3.3-3.1-.4-.5-.4-1.1-.4-1.7"/><path class="st1" d="M4.5 18.3c.6 1.5 2.4 1.6 3.4 2.5.1.2.4.4.6.4-.2-.2-.6-.5-.7-.8-.6-.9-.4-2.2-.9-3.2.4.6.8 1.1 1.1 1.8.4 1 .6 2.1 1.5 2.8-1-.3-2.2-.2-3.1-.8-.9-.6-1.8-1.5-1.9-2.7"/><path class="st1" d="M6.2 21.2c1.1 1.2 2.8.8 4.2 1.1.2 0 .4.1.6.1-.2-.1-.4-.1-.6-.2-1.1-.4-1.3-1.5-1.9-2.4.8.5 1.4 1.2 2.1 1.9.5.4 1.1.6 1.8.8-.2.1-.4 0-.6.1-1.2.3-2.4.7-3.7.3-.7-.4-1.5-1-1.9-1.7"/><path class="st1" d="M20.6 23.9c-1.2.4-2.4 0-3.4-.7-.4-.2-.7-.6-1.2-.6h-.5c.9.4 1.8 1 2.5 1.8-.2.2-.3.3-.5.4-.7-.8-1.5-1.5-2.5-2-.2 0-.3.2-.5.2-.7.5-1.5 1.1-2 1.9l-.5-.5c.8-.8 1.6-1.4 2.5-1.8-.9-.3-1.5.5-2.2.9-.8.6-1.9.8-2.9.4-.6-.2-1.1-.5-1.4-1 .8.6 1.9.6 2.8.2 1.2-.5 2.4-1.1 3.8-.8.2 0 .4.2.6 0 1.1-.2 2.2-.1 3.2.4l1 .4c.9.3 1.9.2 2.8-.3-.6.6-1 1-1.6 1.1"/><path class="st1" d="M21.9 22.7c-1.4.5-2.7-.1-4-.3h-.2c.6-.2 1.2-.3 1.7-.8.7-.7 1.4-1.4 2.2-1.9-.6.8-.6 1.9-1.6 2.4-.2.2-.6.2-.8.3.4 0 .6-.2 1.1-.2 1.3-.2 2.8 0 3.7-1.1-.5.7-1.4 1.4-2.1 1.6"/><path class="st1" d="M22.6 21.3c-.6.2-1.4.2-2.1.5 1.1-1 1.1-2.5 1.8-3.6.2-.3.4-.6.7-1-.5.9-.2 2.1-.8 3-.2.4-.5.7-.8 1 .1 0 .2-.1.3-.2.9-.8 1.9-1.1 2.9-1.8.4-.3.7-.6.9-1.1-.1 1.5-1.6 2.8-2.9 3.2"/><path class="st1" d="M24.3 18.9c-.6.3-1.1.6-1.5 1.1.8-1.3.4-3.1.9-4.5l.2-.5c-.1.9.3 1.6.2 2.5 0 .6-.2 1-.5 1.5.4-.5.6-1.1 1.1-1.5.7-.6 1.4-1.4 1.5-2.3.3 1.5-.6 2.9-1.9 3.7"/><path class="st0" d="M18.3 18.8c.3-.2.6-.4.8-.6h-.2c-.2 0-.2-.2-.2-.2l-.5-.5v-.1c0 .1-.1.2-.2.2 0 .1 0 .2.1.2.2.1.4.2.4.3-.1.2-.4.3-.2.6.1 0-.1 0 0 .1m-2.8-6.5c.1.1.2 0 .2-.1.1 0 .2.1.2.2h.2c0-.3.5-.2.6-.6h-.1s-.1 0-.1-.1l.2-.2c-.4-.2-.7-.4-1.1-.5-.2 0-.3 0-.5-.1.1.2 0 .6.1.8l.2.1c.1-.2.2-.2.3-.3h.2v.3c0 .4-.3.4-.4.5m4.2 2.7c-.2.6-.4 1.1-.7 1.5-.2.2-.2.4-.4.5l.4.3v-.1s0-.1.1-.1c.2 0 .2.2.2.2 0 .2.1.2.1.4 1-1.1 1.5-2.4 1.6-3.8l.1-.1h-1.2c0 .2 0 .5-.1.7l.2.2v.2c-.2.2-.2.2-.3.1m-1-3.5c-.2-.2-.3-.5-.6-.7-.4.4-.8.8-1.1 1.2l.1.1c0-.1.1-.2.1-.2.1-.2.2 0 .4 0h.6c.2.1.2.2.3.3v.2c0 .3.2-.1.3 0 .1 0 .2 0 .2.1 0 .2.2.1.2.2s-.1.1-.1.1c0 .2-.2.2-.1.3.2 0 .2-.2.3-.3-.1-.2-.1-.4-.2-.6-.2 0-.2-.2-.3-.2-.3-.2 0-.3-.1-.5m-3.5 8.3c.3-.1.6-.1 1-.2-.1 0-.2 0-.2-.1-.2 0-.2-.2-.3-.4 0-.1 0-.2.1-.3-.1-.2-.3 0-.5-.1 0 0-.1-.1-.2-.1l.1.1v1.1m.3-3.1c.1 0 0 .2.1.2.2-.1.3.2.4 0 0-.2.2-.2.3-.2.2-.1.4-.2.4-.5-.2 0-.2.1-.2.2-.1.1-.2-.2-.2-.1v.1c-.2.2-.2-.1-.3 0v.1c-.1-.2-.2-.1-.3-.2h-.2c0 .1-.2 0-.2.1-.1 0-.1.2-.2.2-.2 0-.2.2-.3.1v.1h.2c.1-.2.3 0 .5-.1m1.1-1.5c0 .1 0 .2.1.2.2 0 .1.2.2.2s0-.1 0-.2c0-.2-.1-.2-.3-.2.1 0 .1 0 0 0 .1-.1.1-.1 0 0m-.1-5.6c-.4-.2-.8-.2-1.3-.2v1.2h.1c.6.1 1.3.3 1.8.7v.1c.2-.2.4-.5.6-.7l.2-.1h-.1c-.4-.5-.9-.8-1.3-1M9 14.1l.1.7c0 .2.2.6.2.8 0-.1 0-.2.2-.2 0-.1.1-.2 0-.2 0-.2.1-.4.2-.6.2 0 .2-.2.4-.3.1 0 .2.2.2.2-.2-.2-.2-.4-.1-.6H8.9l.1.2zm7.2 1.9c.1-.1.3-.1.3-.2-.1-.1-.1 0-.3.2-.1-.1-.1 0 0 0m2.5-2.1l.2.2c.2.1 0 .2.2.3s.2.2.2.4v-.1c.1-.2 0-.5.1-.6-.2-.1-.5-.1-.7-.2m-1.6 2.9c.2 0 .2.2.4.2.2-.1.4 0 .5-.1 0-.2.1-.2.2-.4.1.1.1.2.1.3.1-.2.2-.2.3-.4.2-.4.5-.8.6-1.2-.1 0-.2 0-.3.1-.1 0-.2.1-.4 0h-.1c0 .1-.1.2-.2.1-.1 0-.1-.1-.1-.2v.2c-.1.1-.1.2-.2.2-.1.1-.2.1-.3.2 0 .2-.2.2-.3.2h.2c.2 0 .2-.2.2-.2.1 0 .2-.1.2 0 .1.1.1.2.1.4-.1.1 0 .2-.1.4 0 .2-.2.2-.2.3-.1.1-.2.1-.2.1-.3-.2-.6-.2-1-.2 0 0-.1 0 0 .1.3-.2.4-.2.6-.1m-2.4 3.5c-1.6-.1-3-.6-4.1-1.8l-.8.8c1.2 1.1 2.7 1.8 4.3 1.9.2 0 .6 0 .8.1l-.1-.1-.1-.9zM13.1 16c.4.3.9.6 1.5.6v-.3c0-.1.2-.1.2-.1s.1-.1 0-.1-.1-.2-.1-.2.1 0 .1-.1c-.1-.1 0-.2 0-.2l.1-.1c-.2.1-.5 0-.7-.2l-.2-.2-.9.9m-.4-1.3c-.1 0-.1 0 0 0h-.2c0-.2-.2-.1-.3-.2l.3.6c.1.2.2.3.3.5.1-.2.2-.2.3-.4V15c0-.1 0-.2-.1-.2s0 .2 0 .2h-.1c-.1 0-.2-.1-.2-.2.1 0 0 0 0-.1m.8.1c0 .1-.1.2-.2.2.1-.1.2-.2.3-.2h-.1zm1.2 3.9c-1 0-1.8-.4-2.6-1 0 .1.2.2.1.2-.1.1-.2.1-.3.1-.2 0-.4.2-.6.2-.2.1-.2-.2-.4-.2 1.1 1 2.4 1.5 3.9 1.6l.1.1v-1.2l-.2.2z"/><path class="st0" d="M10.3 18.2c-.2-.1-.2-.2-.4-.4-.2 0-.2-.2-.3-.2v-.2.1c-.2.1-.2-.1-.3-.2-.2-.1-.1-.4-.3-.3-.1 0-.1-.1-.2-.1-.2 0-.2-.2-.2-.2v.1c-.2 0-.2-.2-.3-.2h-.1c-.1-.1-.2-.2-.2-.4-.2-.2-.1-.4 0-.6 0 0 .1-.1.1-.2s.2-.1.2-.1.1 0 .1.1c.1 0 .2 0 .2-.1.1-.1.2-.1.2-.1.1.1.1.2.2.2l-.1-.1c-.1-.4-.2-.8-.2-1.2V13.8H7.3c.1 1.3.4 2.4 1 3.5.2.6.7 1 1.1 1.5l.8-.8.1.2zm1.3-9.4c-.2.2-.5.4-.7.6.3.2.6.5.8.7v.1c.6-.6 1.5-1 2.3-1.2.2 0 .4-.1.6 0V7.9c-1.1 0-2 .4-3 .9m-1 4.3c0 .2 0 .4-.1.6.2-.1.3 0 .5 0-.1 0 0-.2-.1-.2 0-.1 0-.2.1-.3 0-.2.2-.2.2-.4s.2-.1.3-.2c.1 0 0-.1 0-.2.1-.1.2-.1.3-.2l.2-.2c.2 0 .2-.3.5-.3-.3-.2-.6-.6-.9-.8-.4.6-.8 1.3-1 2.2m.2 1.6c0-.1-.1-.1-.1-.2.1-.2 0-.4.2-.4-.2 0-.2.1-.4 0l.1.1c0 .2.1.5.1.8 0-.2 0-.3.1-.3m1.1 2.8z"/><path class="st0" d="M10.6 9.7l-.4.6c-.7 1-1.1 2.1-1.1 3.3h1.2v-.1c.1-1.1.5-2.2 1.3-3-.4-.3-.7-.5-1-.8zm3.3 7.5c.1-.1.2-.2.3-.2-.4.1-.6-.2-1-.3-.2-.1-.4-.2-.5-.4-.2.3-.5.6-.8.8.2 0 .2.2.3.2.6.5 1.4.7 2 .9l-.2-.1c-.2-.2-.3-.4-.4-.6.3-.1.3-.2.3-.3M11.2 14v.2c0 .2-.2 0-.2.1v.2c-.1.2.2.3.2.6.1.2 0 .3.2.5 0 .2 0 .6.2.8v.2c0 .2-.2.2-.2.2s.1 0 .1.1c.3-.4.6-.7 1.1-1.1l-.2-.2c-.2-.4-.5-.9-.6-1.4l-.1-.1c0 .2-.1.2-.1.4-.1 0-.2-.1-.2-.1s-.1-.1 0-.2h.1V14c0-.1-.1-.2 0-.2s.2.1.2.2c.1 0 .2 0 .2-.1s.1-.2 0-.2c.1-.2 0-.3 0-.5-.1-.1-.2 0-.3 0-.3.1.1.3 0 .6-.2.3-.3.1-.4.2m10.2 0c-.1 1.4-.6 2.5-1.3 3.6-.2.2-.2.4-.5.5.3.2.6.6.9.9 1.2-1.4 1.9-3 1.9-4.9V14h-1zM10.6 9.2c1.2-1.1 2.5-1.7 4.1-1.8V6.2c-1.6.1-3 .6-4.3 1.5-.2.2-.4.4-.7.6.4.2.7.5.9.9m4.1.2c-1 .1-1.9.5-2.7 1.1.3.2.6.6.8.8 0 0 0-.1.1-.1.4-.2.8-.5 1.2-.6.2 0 .4-.1.6-.1V9.4zm0 1.5c-.7.1-1.2.4-1.7.9h.1c.1.1.2.1.3.2 0 .1-.1.1-.1.2h.1c.1 0 .1 0 .1-.1.1-.1.1.1.2.1h.2c.1-.1.2 0 .2-.1.2-.2.1-.3.2-.4.1 0 0 .1 0 .2.2.1.2-.1.4 0v-1m.1 1.8c-.2.2-.3.2-.5.3-.1.1 0 .2-.2.2 0 .1-.2.2-.2.2-.1.2 0 .3-.1.5-.2.2-.2-.2-.3-.2H13.2c-.1.1-.2.2-.1.2 0 .1-.2 0-.2.2.2 0 .2 0 .4-.1h.2s.1 0 .1.1c.1 0 .1-.2.1-.2 0-.1.1-.1.2-.1s0 .1 0 .1c.2.1 0 .2-.1.3 0 .1 0 .2-.2.2v-.1c0 .1 0 .2.1.2.1-.1.1-.2.2-.2.1-.1 0-.2.1-.3.2 0 .4-.1.6.1v.2c0 .1-.1.2-.2.2v.2c-.1.2-.3.2-.5.2.2.2.6.2.9.2.2 0 .1-.2.2-.3.1-.2.3-.1.5-.2.1-.2.2-.2.2-.4-.2-.1-.2-.2-.2-.3-.1-.1-.1-.2-.2-.2v-.1c0-.1.1-.1.1-.2-.1-.1-.1-.2-.1-.2-.2 0-.2-.2-.3-.2 0-.1-.2-.1-.2-.2-.2.1-.2-.2-.4-.2v-.2c.1-.1.2 0 .2 0h-.1c-.1-.1-.2 0-.3 0 .6.2.5.2.6.3"/><path class="st0" d="M8.6 13.6v-.2c.1-1.3.5-2.4 1.2-3.4.2-.2.3-.5.6-.6l-.8-.8c-1.1 1.3-1.9 2.8-2 4.4 0 .2 0 .5-.1.7.3-.2.8-.2 1.1-.1m10.9 4.8c-.1.2-.4.4-.6.6-.2.2-.6.3-.8.7-.2.2-.2.3-.4.4-.1.2-.2.2-.4.3-.3.3-.6-.2-.8-.2l-.6.1c-.2 0-.4.1-.6 0v1.2h.1c1.9-.1 3.6-.8 5-2.1l-.9-.8v-.2zM15.2 7.3c.1-.1.1-.1.2 0v.2h.1c.9.1 1.8.3 2.5.8.2-.1.4-.2.5 0 .2-.1.2.2.4.2.1 0 .3.3.3.5 0 .1.2.2.2.2.2-.2.4-.5.6-.7l.2-.1c-1.2-1.1-2.7-1.8-4.2-2-.2 0-.6 0-.8-.1v1"/><path class="st0" d="M15.2 9c.2-.1.3 0 .5 0 .8.2 1.5.4 2.2.9-.1-.1-.2-.2-.2-.3 0-.2-.2-.2-.2-.3h.1c.2.2.2.2.3.4.1 0 .2 0 .2.1s0 .2.2.3c0 .2.3.4.3.6 0 .1.1 0 .1 0l.2.3v.2c.1 0 .2-.1.2-.1.2.1 0 .2 0 .3h.2c0 .1-.1.2-.1.2 0 .1.1.1.2.1s.1.1.1.2c.2.2-.1.4 0 .6.1.2 0 .2-.1.4 0 .2-.2.2-.2.4H19c-.1.1.1.2 0 .3h.4c-.1-.2 0-.4.1-.6s.1-.3.2-.4c0 0 .1-.1.1 0 0 .2 0 .3-.1.4.2.2.1.4.2.6h1.2v-.1c-.1-.7-.2-1.5-.5-2.1-.1 0-.2.1-.2 0 0 0-.1 0 0-.1-.2-.2-.2-.3-.4-.5-.2 0-.3-.2-.5-.2s-.1-.3-.3-.2c-.1 0-.2-.2-.2-.2 0-.2 0-.4-.2-.6-.2-.1-.2.2-.3.1-.1 0 0-.2-.1-.2 0-.1-.1-.1-.1-.2.2-.2-.2-.2-.2-.5 0-.2-.2-.2-.3-.4-.6-.2-1.2-.5-1.9-.6-.2 0-.3 0-.5-.1v.1c-.2.5-.2.8-.2 1.2"/><path class="st0" d="M19.5 9.4c.1 0 .1.2.2.2.3.2.4.5.6.6.2.3.5.6.5.9.3.8.6 1.5.6 2.5h1.2c-.1-.1 0-.2-.1-.4-.2-1.8-.9-3.3-2.1-4.6-.2.3-.5.6-.9.8z"/><path class="st1" d="M15.3 7.1c0-.1.2 0 .2 0l.6-.2c.2 0 .5 0 .6.2-.2.2-.3.2-.5.2-.3 0-.6.1-.9-.2m3.4.7c.1 0 .2.1.2.2s.1.2 0 .2c-.2.1-.2-.2-.4-.2v-.1c.1-.2.1 0 .2-.1"/></svg>

package/bin/templates/viteWithLanguage/router/src/App.tsx ADDED Viewed

@@ -0,0 +1,74 @@
+import { P } from '@undp/design-system-react/Typography';
+import { Button } from '@undp/design-system-react/Button';
+import { useTranslation } from 'react-i18next';
+import { useCounterActions, useCounter } from './stores/counter';
+export function App() {
+  const count = useCounter();
+  const { t } = useTranslation();
+  const { increment, decrement } = useCounterActions();
+  return (
+    <>
+      <div className='flex gap-4 items-center justify-center my-8 mx-auto'>
+        <img
+          src='/imgs/Vitejs-logo.svg'
+          alt='vite logo'
+          width='72px'
+          style={{ marginLeft: 'auto', marginRight: 'auto' }}
+        />
+        <P marginBottom='none'>&</P>
+        <img
+          src='/imgs/Tailwind_CSS_Logo.svg'
+          alt='tailwind logo'
+          width='72px'
+          style={{ marginLeft: 'auto', marginRight: 'auto' }}
+        />
+        <P marginBottom='none'>&</P>
+        <img
+          src='/imgs/Tanstack-logo.png'
+          alt='tanstack logo'
+          width='72px'
+          style={{ marginLeft: 'auto', marginRight: 'auto' }}
+        />
+        <P marginBottom='none'>&</P>
+        <img
+          src='/imgs/Zustand-logo.svg'
+          alt='Zustand logo'
+          width='72px'
+          style={{ marginLeft: 'auto', marginRight: 'auto' }}
+        />
+        <P marginBottom='none'>&</P>
+        <img
+          src='/imgs/undp-logo-blue.svg'
+          alt='UNDP logo'
+          width='72px'
+          style={{ marginLeft: 'auto', marginRight: 'auto' }}
+        />
+      </div>
+      <P marginBottom='xl' className='text-center'>
+        {t('started', { fileName: 'app.tsx' })}{' '}
+        <span className='font-bold'>{t('count', { count: count })}</span>
+      </P>
+      <div className='flex gap-4 justify-center mb-8'>
+        <Button
+          variant='tertiary'
+          onClick={() => {
+            increment();
+          }}
+        >
+          {t('increaseCount')}
+        </Button>
+        <Button
+          variant='tertiary'
+          onClick={() => {
+            decrement();
+          }}
+        >
+          {t('decreaseCount')}
+        </Button>
+      </div>
+    </>
+  );
+}
+export default App;

package/bin/templates/viteWithLanguage/router/src/Icons.tsx ADDED Viewed

@@ -0,0 +1,74 @@
+export function LanguageSwitcherIcon() {
+  return (
+    <svg
+      width='25'
+      height='26'
+      viewBox='0 0 25 26'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <g>
+        <path
+          d='M16.599 23.688C17.7895 22.3987 18.4193 20.6895 18.35 18.936H0.75V0.75H23.88V15.468L23.875 15.474C23.875 15.521 23.875 15.568 23.875 15.616C23.905 20.278 17.206 24.488 16.175 24.488C15.921 24.488 16.004 24.24 16.599 23.688Z'
+          stroke='currentColor'
+          strokeWidth='1.5'
+        />
+        <path
+          d='M13.5854 13.542L16.9429 5.45215L20.2144 13.542'
+          stroke='currentColor'
+          strokeWidth='1.5'
+          strokeLinecap='round'
+          strokeLinejoin='round'
+        />
+        <path
+          d='M15.0576 10.6704H18.9863'
+          stroke='currentColor'
+          strokeWidth='1.5'
+        />
+        <path
+          d='M4.13086 6.76706H10.6748'
+          stroke='currentColor'
+          strokeWidth='1.5'
+          strokeLinecap='round'
+        />
+        <path
+          d='M4.13086 13.1656C4.13086 13.1656 9.59778 13.6368 9.92578 6.90781'
+          stroke='currentColor'
+          strokeWidth='1.5'
+          strokeLinecap='round'
+        />
+        <path
+          d='M10.8271 13.5417C10.8271 13.5417 6.38075 13.065 5.21875 9.11597'
+          stroke='currentColor'
+          strokeWidth='1.5'
+          strokeLinecap='round'
+        />
+        <path
+          d='M7.40723 4.08563V6.56317'
+          stroke='currentColor'
+          strokeWidth='1.5'
+          strokeLinecap='round'
+        />
+      </g>
+    </svg>
+  );
+}
+export function ChevronDown() {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width='24'
+      height='24'
+      viewBox='0 0 24 24'
+      fill='none'
+      stroke='currentColor'
+      stroke-width='2'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      className='transition-transform duration-200 chevron-down-icon chevron-down'
+    >
+      <path d='m6 9 6 6 6-6' />
+    </svg>
+  );
+}

package/bin/templates/viteWithLanguage/router/src/assets/undp-logo-blue.svg ADDED Viewed

@@ -0,0 +1 @@

package/bin/templates/viteWithLanguage/router/src/components/Footer.tsx ADDED Viewed

@@ -0,0 +1,16 @@
+import {
+  Footer,
+  FooterLogoUnit,
+  FooterCopyrightUnit,
+} from '@undp/design-system-react/Footer';
+import { useTranslation } from 'react-i18next';
+export default function FooterEl() {
+  const { t } = useTranslation();
+  return (
+    <Footer>
+      <FooterLogoUnit>{t('subscribe')}</FooterLogoUnit>
+      <FooterCopyrightUnit>{t('footnote')}</FooterCopyrightUnit>
+    </Footer>
+  );
+}

package/bin/templates/viteWithLanguage/router/src/components/Header.tsx ADDED Viewed

@@ -0,0 +1,70 @@
+import {
+  Header,
+  HeaderActions,
+  HeaderLogoUnit,
+  HeaderMainNavUnit,
+  HeaderMenuUnit,
+} from '@undp/design-system-react/Header';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@undp/design-system-react/DropdownMenu';
+import { Link, useParams } from '@tanstack/react-router';
+import { useTranslation } from 'react-i18next';
+import { LanguageSwitcherIcon, ChevronDown } from '@/Icons';
+import { DEFAULT_LANGUAGE, LANGUAGES } from '@/constants';
+export default function HeaderEl() {
+  const params = useParams({ strict: false });
+  const locale =
+    params.locale && LANGUAGES.map(d => d.id).includes(params.locale)
+      ? params.locale
+      : DEFAULT_LANGUAGE;
+  const { t } = useTranslation();
+  return (
+    <Header>
+      <HeaderLogoUnit
+        hyperlink={locale === DEFAULT_LANGUAGE ? '/' : `/${locale}`}
+        siteName='Site name'
+        siteSubName='Sub-site name'
+      />
+      <HeaderMainNavUnit>
+        <HeaderMenuUnit>
+          <Link to='/{-$locale}'>{t('home')}</Link>
+          <Link to='/{-$locale}/about'>{t('about')}</Link>
+        </HeaderMenuUnit>
+        <HeaderActions>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <div className='cursor-pointer flex h-9 flex gap-2 rtl:[direction:rtl] items-center text-primary-blue-600 hover:text-primary-blue-400 dark:text-primary-white dark:hover:text-primary-white uppercase font-semibold text-sm justify-between whitespace-nowrap bg-transparent p-0 data-[placeholder]:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 [&[data-state=open]>.chevron-down]:rotate-180'>
+                <LanguageSwitcherIcon />
+                {LANGUAGES.find(d => d.id === locale)?.label}
+                <ChevronDown />
+              </div>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              {LANGUAGES.map(d => (
+                <DropdownMenuItem key={d.id} asChild>
+                  <Link
+                    to='.'
+                    params={{
+                      ...params,
+                      locale: d.id,
+                    }}
+                    preload={false}
+                    className='w-full'
+                  >
+                    {d.label}
+                  </Link>
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </HeaderActions>
+      </HeaderMainNavUnit>
+    </Header>
+  );
+}

package/bin/templates/viteWithLanguage/router/src/constants.ts ADDED Viewed

@@ -0,0 +1,16 @@
+export const LANGUAGES = [
+  {
+    label: 'English',
+    id: 'en',
+  },
+  {
+    label: 'Français',
+    id: 'fr',
+  },
+  {
+    label: 'Español',
+    id: 'es',
+  },
+];
+export const DEFAULT_LANGUAGE = 'en';

package/bin/templates/viteWithLanguage/router/src/i18n.ts ADDED Viewed

@@ -0,0 +1,31 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import enCommon from './locales/en/common.json';
+import esCommon from './locales/es/common.json';
+import frCommon from './locales/fr/common.json';
+i18n.use(initReactI18next).init({
+  resources: {
+    en: {
+      common: enCommon,
+    },
+    es: {
+      common: esCommon,
+    },
+    fr: {
+      common: frCommon,
+    },
+  },
+  ns: ['common'],
+  defaultNS: 'common',
+  fallbackLng: 'en',
+  initAsync: false,
+  interpolation: {
+    escapeValue: false,
+  },
+  react: {
+    useSuspense: true,
+  },
+});
+export default i18n;

package/bin/templates/viteWithLanguage/router/src/locales/en/common.json ADDED Viewed

@@ -0,0 +1,11 @@
+{
+  "aboutPage": "To edit this page, edit the {{fileName}} file in the routes folder.",
+  "started":"To get started, edit the {{fileName}} file.",
+  "count":"Count: {{count}}",
+  "increaseCount":"Increase counter",
+  "decreaseCount":"Decrease counter",
+  "subscribe":"Subscribe to email",
+  "footnote":"Footnote can be added here",
+  "home":"Home",
+  "about":"About"
+}

package/bin/templates/viteWithLanguage/router/src/locales/es/common.json ADDED Viewed

@@ -0,0 +1,11 @@
+{
+  "aboutPage": "Para editar esta página, edita el archivo {{fileName}} en la carpeta routes.",
+  "started": "Para comenzar, edita el archivo {{fileName}}.",
+  "count": "Contador: {{count}}",
+  "increaseCount": "Incrementar contador",
+  "decreaseCount": "Disminuir contador",
+  "subscribe": "Suscribirse al correo electrónico",
+  "footnote": "La nota al pie se puede agregar aquí",
+  "home": "Inicio",
+  "about": "Acerca de"
+}

package/bin/templates/viteWithLanguage/router/src/locales/fr/common.json ADDED Viewed

@@ -0,0 +1,11 @@
+{
+  "aboutPage": "Pour modifier cette page, modifiez le fichier {{fileName}} dans le dossier routes.",
+  "started": "Pour commencer, modifiez le fichier {{fileName}}.",
+  "count": "Compteur : {{count}}",
+  "increaseCount": "Augmenter le compteur",
+  "decreaseCount": "Diminuer le compteur",
+  "subscribe": "S’abonner par e-mail",
+  "footnote": "Une note de bas de page peut être ajoutée ici",
+  "home": "Accueil",
+  "about": "À propos"
+}

package/bin/templates/viteWithLanguage/router/src/main.tsx ADDED Viewed

@@ -0,0 +1,89 @@
+import { StrictMode } from 'react';
+import ReactDOM from 'react-dom/client';
+import { I18nextProvider } from 'react-i18next';
+import {
+  Outlet,
+  RouterProvider,
+  createRootRoute,
+  createRoute,
+  createRouter,
+  redirect,
+} from '@tanstack/react-router';
+import HeaderEl from './components/Header';
+import FooterEl from './components/Footer';
+import App from './App';
+import createAboutRoute from './routes/about';
+import i18n from './i18n';
+import { DEFAULT_LANGUAGE, LANGUAGES } from './constants';
+import './styles/fonts.css';
+import './styles/style.css';
+const rootRoute = createRootRoute({
+  component: () => <Outlet />,
+});
+const localeRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/{-$locale}',
+  beforeLoad: async ({ params }) => {
+    const locale =
+      params.locale && LANGUAGES.map(d => d.id).includes(params.locale)
+        ? params.locale
+        : DEFAULT_LANGUAGE;
+    await i18n.changeLanguage(locale);
+    return { locale };
+  },
+  component: () => (
+    <div className='flex flex-col gap-0 min-h-screen'>
+      <HeaderEl />
+      <main className='grow-1 flex flex-col justify-center'>
+        <div className='flex flex-col justify-center'>
+          <Outlet />
+        </div>
+      </main>
+      <FooterEl />
+    </div>
+  ),
+});
+const indexRoute = createRoute({
+  getParentRoute: () => localeRoute,
+  path: '/',
+  component: App,
+});
+const routeTree = rootRoute.addChildren([
+  localeRoute.addChildren([
+    indexRoute,
+    createAboutRoute(localeRoute),
+  ]),
+]);
+const router = createRouter({
+  routeTree,
+  defaultPreload: 'intent',
+  scrollRestoration: true,
+  defaultStructuralSharing: true,
+  defaultPreloadStaleTime: 0,
+});
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router;
+  }
+}
+const rootElement = document.getElementById('root');
+if (rootElement && !rootElement.innerHTML) {
+  ReactDOM.createRoot(rootElement).render(
+    <StrictMode>
+      <I18nextProvider i18n={i18n}>
+        <RouterProvider router={router} />
+      </I18nextProvider>
+    </StrictMode>,
+  );
+}

package/bin/templates/viteWithLanguage/router/src/routes/about.tsx ADDED Viewed

@@ -0,0 +1,58 @@
+import { createRoute } from '@tanstack/react-router';
+import type { AnyRoute } from '@tanstack/react-router';
+import { P } from '@undp/design-system-react/Typography';
+import { useTranslation } from 'react-i18next';
+export function About() {
+  const { t } = useTranslation();
+  return (
+    <>
+      <div className='flex gap-4 items-center justify-center my-8 mx-auto'>
+        <img
+          src='/imgs/Vitejs-logo.svg'
+          alt='vite logo'
+          width='72px'
+          style={{ marginLeft: 'auto', marginRight: 'auto' }}
+        />
+        <P marginBottom='none'>&</P>
+        <img
+          src='/imgs/Tailwind_CSS_Logo.svg'
+          alt='tailwind logo'
+          width='72px'
+          style={{ marginLeft: 'auto', marginRight: 'auto' }}
+        />
+        <P marginBottom='none'>&</P>
+        <img
+          src='/imgs/Tanstack-logo.png'
+          alt='tanstack logo'
+          width='72px'
+          style={{ marginLeft: 'auto', marginRight: 'auto' }}
+        />
+        <P marginBottom='none'>&</P>
+        <img
+          src='/imgs/Zustand-logo.svg'
+          alt='Zustand logo'
+          width='72px'
+          style={{ marginLeft: 'auto', marginRight: 'auto' }}
+        />
+        <P marginBottom='none'>&</P>
+        <img
+          src='/imgs/undp-logo-blue.svg'
+          alt='UNDP logo'
+          width='72px'
+          style={{ marginLeft: 'auto', marginRight: 'auto' }}
+        />
+      </div>
+      <P marginBottom='xl' className='text-center'>
+        {t('aboutPage')}
+      </P>
+    </>
+  );
+}
+export default function createAboutRoute(parentRoute: AnyRoute) {
+  return createRoute({
+    path: '/about',
+    component: About,
+    getParentRoute: () => parentRoute,
+  });
+}

package/bin/templates/viteWithLanguage/router/src/stores/counter.ts ADDED Viewed

@@ -0,0 +1,23 @@
+import { create } from 'zustand';
+type Actions = {
+  increment: (d?: number) => void;
+  decrement: (d?: number) => void;
+};
+type Store = {
+  count: number;
+  actions: Actions;
+};
+export const useCounterStore = create<Store>(set => ({
+  count: 0,
+  actions: {
+    increment: (d = 1) => set(state => ({ count: state.count + d })),
+    decrement: (d = 1) => set(state => ({ count: state.count - d })),
+  },
+}));
+export const useCounter = () => useCounterStore(s => s.count);
+export const useCounterActions = () => useCounterStore(s => s.actions);