DHBW-WE/MeetUp
5
0
Fork 0
Code Issues 7 Pull requests 5 Projects 1 Releases 5 Packages 1 Wiki Activity Actions

feat: tempcommit

Browse source
This commit is contained in:
Maximilian Liebmann 2025-06-26 22:48:56 +02:00
parent 6619f0a9eb
commit 8555fd919a
2 changed files with 87 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

35
src/components/misc/profile-picture-upload.tsx Normal file
View file

@ -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>
</>
);
}

110
src/components/misc/settings-page.tsx
View file

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