0.1.0

resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.jsx

@@ -11,24 +11,29 @@ import {
     CardFooter,
     CardHeader,
     CardTitle,
-} from "@/components/ui/card";
+} from '@/components/ui/card';
+import {
+    Select,
+    SelectContent,
+    SelectGroup,
+    SelectItem,
+    SelectLabel,
+    SelectTrigger,
+    SelectValue,
+} from '@/components/ui/select';
 
-export default function UpdateProfileInformation({
-    mustVerifyEmail,
-    status,
-    className = '',
-}) {
+export default function UpdateProfileInformation({ mustVerifyEmail, status, timezones }) {
     const user = usePage().props.auth.user;
 
     const { data, setData, patch, errors, processing, recentlySuccessful } =
         useForm({
             name: user.name,
             email: user.email,
+            timezone: user.settings.timezone
         });
 
     const submit = (e) => {
         e.preventDefault();
-
         patch(route('profile.update'));
     };
 
@@ -51,6 +56,7 @@ export default function UpdateProfileInformation({
                         </div>
                         <InputError className="mt-2" message={ errors.name } />
                     </div>
+
                     <div className="grid w-full items-center gap-4 pt-3">
                         <div className="flex flex-col space-y-1.5">
                             <InputLabel htmlFor="email" value="Email" />
@@ -88,6 +94,28 @@ export default function UpdateProfileInformation({
                             ) }
                         </div>
                     ) }
+
+                    <div className="grid w-full items-center gap-4 pt-3">
+                        <div className="flex flex-col space-y-1.5">
+                            <InputLabel htmlFor="timezone" value="Timezone" />
+                                <Select defaultValue={ data.timezone } onValueChange={ (e) => setData('timezone', e)  } className="w-full">
+                                    <SelectTrigger className="border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:focus:border-indigo-600 dark:focus:ring-indigo-600">
+                                        <SelectValue placeholder="Select a timezone" />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        { Object.keys(timezones).map((area, i) => (
+                                            <SelectGroup key={ i }>
+                                                <SelectLabel>{ area }</SelectLabel>
+                                                { Object.keys(timezones[area]).map((tz, j) => (
+                                                    <SelectItem className="pl-5" key={ j } value={ tz }>{ timezones[area][tz] }</SelectItem>
+                                                ) ) }
+                                            </SelectGroup>
+                                        ) ) }
+                                    </SelectContent>
+                                </Select>
+                        </div>
+                        <InputError className="mt-2" message={ errors.timezone } />
+                    </div>
                 </CardContent>
                 <CardFooter>
                     <PrimaryButton disabled={ processing }>Save</PrimaryButton>