feat: tempcommit

src/components/misc/profile-picture-upload.tsx

@@ -0,0 +1,35 @@
+import Image from 'next/image';
+import { Avatar } from '../ui/avatar';
+import { useGetApiUserMe } from '@/generated/api/user/user';
+import { User } from 'lucide-react';
+
+import { Input } from '../ui/input';
+
+export default function ProfilePictureUpload() {
+  const { data } = useGetApiUserMe();
+  return (
+    <>
+      <div className='grid grid-cols-1 gap-1'>
+        <span className='relative flex space-6'>
+          <Input
+            id='pic-upload'
+            type='file'
+            defaultValue={data?.data.user.image ?? undefined}
+          />
+          <Avatar className='flex justify-center items-center ml-6 shadow-md border h-[36px] w-[36px]'>
+            {data?.data.user.image ? (
+              <Image
+                src={data?.data.user.image}
+                alt='Avatar'
+                width='20'
+                height='20'
+              />
+            ) : (
+              <User />
+            )}
+          </Avatar>
+        </span>
+      </div>
+    </>
+  );
+}

src/components/misc/settings-page.tsx

@@ -30,6 +30,7 @@ import { GroupWrapper } from '../wrappers/group-wrapper';
 import { Avatar } from '../ui/avatar';
 import Image from 'next/image';
 import { User } from 'lucide-react';
+import ProfilePictureUpload from './profile-picture-upload';
 
 export default function SettingsPage() {
   const router = useRouter();
@@ -48,7 +49,8 @@ export default function SettingsPage() {
               <CardContent className='space-y-6 mt-2'>
                 <GroupWrapper title='General Settings'>
                   <div className='space-y-4'>
-                    <div className='flex items-center justify-evenly'>
+                    <GroupWrapper>
+                      <div className='flex items-center justify-evenly sm:flex-row flex-col gap-6'>
                         <div>
                           <LabeledInput
                             label='First Name'
@@ -66,6 +68,7 @@ export default function SettingsPage() {
                           ></LabeledInput>
                         </div>
                       </div>
+                    </GroupWrapper>
                     <div className='space-y-2'>
                       <LabeledInput
                         label='Display Name'
@@ -116,35 +119,23 @@ export default function SettingsPage() {
                     </div>
                   </div>
                 </GroupWrapper>
-                <div className='space-y-2 grid grid-cols-[1fr_auto] gap-4'>
+                <GroupWrapper title='Profile Picture'>
-                  <LabeledInput
+                  <div className='space-y-2 grid grid-cols-[1fr_auto]'>
-                    label='Profile Picture'
+                    <ProfilePictureUpload />
-                    type='file'
-                    placeholder='Upload Profile Picture'
-                    defaultValue={data?.data.user.image ?? ''}
-                  ></LabeledInput>
-                  <Avatar className='flex justify-center items-center'>
-                    {data?.data.user.image ? (
-                      <Image
-                        src={data?.data.user.image}
-                        alt='Avatar'
-                        width='20'
-                        height='20'
-                      />
-                    ) : (
-                      <User />
-                    )}
-                  </Avatar>
                   </div>
-                <div className='space-y-2'>
+                </GroupWrapper>
-                  <Label htmlFor='timezone'>Timezone</Label>
+                <GroupWrapper title='Regional Settings'>
-                  <Input
+                  <div className='space-y-2 grid sm:grid-cols-[1fr_auto] sm:flex-row gap-4'>
-                    id='displayName'
+                    <div className='grid gap-1'>
+                      <LabeledInput
+                        type='text'
+                        label='Timezone'
                         placeholder='Europe/Berlin'
                         defaultValue={data?.data.user.timezone}
-                  />
+                      ></LabeledInput>
                     </div>
-                <div className='space-y-2'>
+                    <div>
+                      <div className='grid gap-1'>
                         <Label htmlFor='language'>Language</Label>
                         <Select>
                           <SelectTrigger id='language'>
@@ -156,7 +147,10 @@ export default function SettingsPage() {
                           </SelectContent>
                         </Select>
                       </div>
-                <div className='pt-4'>
+                    </div>
+                  </div>
+                </GroupWrapper>
+                <div className='flex items-center justify-evenly sm:flex-row flex-col gap-6'>
                   <Button variant='secondary'>Delete Account</Button>
                   <span className='text-sm text-muted-foreground pt-1'>
                     Permanently delete your account and all associated data.