Add Timezone

src/app/(public)/conta/page.tsx

@@ -1,9 +1,13 @@
+"use client";
+
 import { bankAccounts, cards, categories, plans } from "assets/data";
 import { Header } from "components/Header";
 import { Icon, IconType } from "components/Icon";
+import { SelectInput } from "components/Inputs/Select";
 import { Space } from "components/Space";
 import Link from "next/link";
 import { CardTypeEnum, isPrepaid } from "types/enums/card-type";
+import { TimezoneEnum } from "types/enums/timezone";
 
 interface PremiumBenefit {
 	title: string;
@@ -165,12 +169,30 @@ const Account = () => {
 					<Link
 						type="button"
 						title="Logar com google"
-						className="btn btn-google w-full normal-case"
+						className="btn btn-google disabled w-full normal-case"
 						href={GOOGLE_LINK_AUTH || "#"}
 					>
 						<Icon icon="google" className="mr-2" />
 						Vincular conta ao Google
 					</Link>
+
+					<Space />
+
+					<SelectInput
+						id="timezone"
+						label="Usar horario de"
+						toBeSelectedLabel="Selecionar cartão"
+						data={Object.values(TimezoneEnum).map((t) => ({
+							title: t.split("/").pop()!.replace(/_/g, " "),
+							value: t,
+						}))}
+						fieldNames={{
+							id: "value",
+							label: "title",
+						}}
+						value={TimezoneEnum["America/Sao_Paulo"]}
+						onChange={() => {}}
+					/>
 				</section>
 
 				<div className="divider" />

src/types/enums/timezone.ts

@@ -0,0 +1,18 @@
+export enum TimezoneEnum {
+	"America/Araguaina" = "America/Araguaina", //'-03:00'
+	"America/Bahia" = "America/Bahia", //'-03:00'
+	"America/Belem" = "America/Belem", //'-03:00'
+	"America/Boa_Vista" = "America/Boa_Vista", //'-04:00'
+	"America/Campo_Grande" = "America/Campo_Grande", //'-04:00'
+	"America/Cuiaba" = "America/Cuiaba", //'-04:00'
+	"America/Eirunepe" = "America/Eirunepe", //'-05:00'
+	"America/Fortaleza" = "America/Fortaleza", //'-03:00'
+	"America/Maceio" = "America/Maceio", //'-03:00'
+	"America/Manaus" = "America/Manaus", //'-04:00'
+	"America/Noronha" = "America/Noronha", //'-02:00'
+	"America/Porto_Velho" = "America/Porto_Velho", //'-04:00'
+	"America/Recife" = "America/Recife", //'-03:00'
+	"America/Rio_Branco" = "America/Rio_Branco", //'-05:00'
+	"America/Santarem" = "America/Santarem", //'-03:00'
+	"America/Sao_Paulo" = "America/Sao_Paulo", //'-03:00'
+}

tailwind.config.ts

@@ -44,6 +44,11 @@ module.exports = {
 					".btn-google": {
 						"background-color": "#ffffff",
 						border: "1px solid #747775",
+
+						"&.disabled": {
+							"background-color": "#30303020",
+							"pointer-events": "none",
+						},
 					},
 					".btn-google:hover": {
 						"background-color": "#30303008",