Add avatar dropdown thing

This commit is contained in:
2025-05-15 14:14:56 -05:00
parent 2054bc86ee
commit 5dcf2ed423
11 changed files with 1004 additions and 63 deletions

View File

@ -1,34 +0,0 @@
'use server';
import Link from 'next/link';
import { Button } from '@/components/ui';
import { createServerClient } from '@/utils/supabase';
import { signOut } from '@/lib/actions';
const NavigationAuth = async () => {
const supabase = await createServerClient();
const {
data: { user },
} = await supabase.auth.getUser();
return user ? (
<div className='flex items-center gap-4'>
Hello, {user.email}!
<form action={signOut}>
<Button type='submit' variant='outline'>
Sign out
</Button>
</form>
</div>
) : (
<div className='flex gap-2'>
<Button asChild size='default' variant={'outline'}>
<Link href='/sign-in'>Sign in</Link>
</Button>
<Button asChild size='sm' variant={'default'}>
<Link href='/sign-up'>Sign up</Link>
</Button>
</div>
);
};
export default NavigationAuth;

View File

@ -0,0 +1,94 @@
'use client';
import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import {
Avatar,
AvatarFallback,
AvatarImage,
Button,
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from '@/components/ui';
import { getSignedUrl, getProfile, signOut } from '@/lib/actions';
import type { Profile } from '@/utils/supabase';
const AvatarDropdown = () => {
const router = useRouter();
const [profile, setProfile] = useState<Profile | undefined>(undefined);
const [signedUrl, setSignedUrl] = useState<string | undefined>(undefined);
const handleEditProfile = async () => {
router.push('/profile');
};
const handleSignOut = async () => {
await signOut();
};
useEffect(() => {
const handleGetProfile = async () => {
try {
const profileResponse = await getProfile();
if (!profileResponse.success)
throw new Error('Profile response unsuccessful');
setProfile(profileResponse.data);
} catch (error) {
console.error('Error getting profile:', error);
}
};
handleGetProfile().catch((error) => {
console.error('Error getting profile:', error);
})
}, []);
useEffect(() => {
const handleGetSignedUrl = async () => {
try {
const response = await getSignedUrl({
bucket: 'avatars',
url: profile?.avatar_url ?? '',
});
if (response.success) {
setSignedUrl(response.data);
}
} catch (error) {
console.error('Error getting signed URL:', error);
}
};
handleGetSignedUrl().catch((error) => {
console.error('Error getting signed URL:', error);
});
}, [profile]);
return (
<DropdownMenu>
<DropdownMenuTrigger>
<Avatar>
<AvatarImage src={signedUrl ?? '/favicon.ico'} />
<AvatarFallback>AN</AvatarFallback>
</Avatar>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuLabel>{profile?.full_name}</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem asChild>
<Button onClick={handleEditProfile} variant={'secondary'} className='w-full text-left'>
Edit profile
</Button>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Button onClick={handleSignOut} variant={'secondary'} className='w-full text-left'>
Sign out
</Button>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
};
export default AvatarDropdown;

View File

@ -0,0 +1,29 @@
'use server';
import Link from 'next/link';
import { Button } from '@/components/ui';
import { getProfile } from '@/lib/actions';
import AvatarDropdown from './avatar';
const NavigationAuth = async () => {
try {
const profile = await getProfile();
return profile.success ? (
<div className='flex items-center gap-4'>
<AvatarDropdown />
</div>
) : (
<div className='flex gap-2'>
<Button asChild size='default' variant={'outline'}>
<Link href='/sign-in'>Sign in</Link>
</Button>
<Button asChild size='sm' variant={'default'}>
<Link href='/sign-up'>Sign up</Link>
</Button>
</div>
);
} catch (error) {
console.error('Error getting profile:', error);
}
};
export default NavigationAuth;

View File

@ -0,0 +1,53 @@
"use client"
import * as React from "react"
import * as AvatarPrimitive from "@radix-ui/react-avatar"
import { cn } from "@/lib/utils"
function Avatar({
className,
...props
}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
return (
<AvatarPrimitive.Root
data-slot="avatar"
className={cn(
"relative flex size-8 shrink-0 overflow-hidden rounded-full",
className
)}
{...props}
/>
)
}
function AvatarImage({
className,
...props
}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
return (
<AvatarPrimitive.Image
data-slot="avatar-image"
className={cn("aspect-square size-full", className)}
{...props}
/>
)
}
function AvatarFallback({
className,
...props
}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
return (
<AvatarPrimitive.Fallback
data-slot="avatar-fallback"
className={cn(
"bg-muted flex size-full items-center justify-center rounded-full",
className
)}
{...props}
/>
)
}
export { Avatar, AvatarImage, AvatarFallback }

View File

@ -0,0 +1,257 @@
"use client"
import * as React from "react"
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
import { cn } from "@/lib/utils"
function DropdownMenu({
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
}
function DropdownMenuPortal({
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
return (
<DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
)
}
function DropdownMenuTrigger({
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
return (
<DropdownMenuPrimitive.Trigger
data-slot="dropdown-menu-trigger"
{...props}
/>
)
}
function DropdownMenuContent({
className,
sideOffset = 4,
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
return (
<DropdownMenuPrimitive.Portal>
<DropdownMenuPrimitive.Content
data-slot="dropdown-menu-content"
sideOffset={sideOffset}
className={cn(
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
className
)}
{...props}
/>
</DropdownMenuPrimitive.Portal>
)
}
function DropdownMenuGroup({
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
return (
<DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
)
}
function DropdownMenuItem({
className,
inset,
variant = "default",
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
inset?: boolean
variant?: "default" | "destructive"
}) {
return (
<DropdownMenuPrimitive.Item
data-slot="dropdown-menu-item"
data-inset={inset}
data-variant={variant}
className={cn(
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props}
/>
)
}
function DropdownMenuCheckboxItem({
className,
children,
checked,
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
return (
<DropdownMenuPrimitive.CheckboxItem
data-slot="dropdown-menu-checkbox-item"
className={cn(
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
checked={checked}
{...props}
>
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
<DropdownMenuPrimitive.ItemIndicator>
<CheckIcon className="size-4" />
</DropdownMenuPrimitive.ItemIndicator>
</span>
{children}
</DropdownMenuPrimitive.CheckboxItem>
)
}
function DropdownMenuRadioGroup({
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
return (
<DropdownMenuPrimitive.RadioGroup
data-slot="dropdown-menu-radio-group"
{...props}
/>
)
}
function DropdownMenuRadioItem({
className,
children,
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
return (
<DropdownMenuPrimitive.RadioItem
data-slot="dropdown-menu-radio-item"
className={cn(
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props}
>
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
<DropdownMenuPrimitive.ItemIndicator>
<CircleIcon className="size-2 fill-current" />
</DropdownMenuPrimitive.ItemIndicator>
</span>
{children}
</DropdownMenuPrimitive.RadioItem>
)
}
function DropdownMenuLabel({
className,
inset,
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
inset?: boolean
}) {
return (
<DropdownMenuPrimitive.Label
data-slot="dropdown-menu-label"
data-inset={inset}
className={cn(
"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
className
)}
{...props}
/>
)
}
function DropdownMenuSeparator({
className,
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
return (
<DropdownMenuPrimitive.Separator
data-slot="dropdown-menu-separator"
className={cn("bg-border -mx-1 my-1 h-px", className)}
{...props}
/>
)
}
function DropdownMenuShortcut({
className,
...props
}: React.ComponentProps<"span">) {
return (
<span
data-slot="dropdown-menu-shortcut"
className={cn(
"text-muted-foreground ml-auto text-xs tracking-widest",
className
)}
{...props}
/>
)
}
function DropdownMenuSub({
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
}
function DropdownMenuSubTrigger({
className,
inset,
children,
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
inset?: boolean
}) {
return (
<DropdownMenuPrimitive.SubTrigger
data-slot="dropdown-menu-sub-trigger"
data-inset={inset}
className={cn(
"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
className
)}
{...props}
>
{children}
<ChevronRightIcon className="ml-auto size-4" />
</DropdownMenuPrimitive.SubTrigger>
)
}
function DropdownMenuSubContent({
className,
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
return (
<DropdownMenuPrimitive.SubContent
data-slot="dropdown-menu-sub-content"
className={cn(
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
className
)}
{...props}
/>
)
}
export {
DropdownMenu,
DropdownMenuPortal,
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuLabel,
DropdownMenuItem,
DropdownMenuCheckboxItem,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuSub,
DropdownMenuSubTrigger,
DropdownMenuSubContent,
}

View File

@ -1,5 +1,7 @@
export { Badge } from '@/components/ui/badge';
export { Button } from '@/components/ui/button';
export { Checkbox } from '@/components/ui/checkbox';
export { Input } from '@/components/ui/input';
export { Label } from '@/components/ui/label';
export * from '@/components/ui/avatar';
export * from '@/components/ui/badge';
export * from '@/components/ui/button';
export * from '@/components/ui/checkbox';
export * from '@/components/ui/dropdown-menu';
export * from '@/components/ui/input';
export * from '@/components/ui/label';

View File

@ -3,15 +3,17 @@
import 'server-only';
import { encodedRedirect } from '@/utils/utils';
import { createServerClient } from '@/utils/supabase';
import type { User } from '@supabase/supabase-js'
import { headers } from 'next/headers';
import { redirect } from 'next/navigation';
import type { Result } from './index';
export const signUp = async (formData: FormData) => {
const name = formData.get('name') as string;
const email = formData.get('email') as string;
const password = formData.get('password') as string;
const supabase = await createServerClient();
const origin = (await headers()).get('origin');
//const origin = (await headers()).get('origin');
if (!email || !password) {
return encodedRedirect(
@ -30,7 +32,6 @@ export const signUp = async (formData: FormData) => {
});
if (error) {
console.error(error.code + ': ' + error.message);
return redirect('/protected');
//return encodedRedirect('error', '/sign-up',
//'Thanks for signing up! Please check your email for a verification link.');
@ -68,7 +69,6 @@ export const signIn = async (formData: FormData) => {
if (error) {
return encodedRedirect('error', '/sign-in', error.message);
}
return redirect('/protected');
};
@ -87,7 +87,6 @@ export const forgotPassword = async (formData: FormData) => {
});
if (error) {
console.error(error.message);
return encodedRedirect(
'error',
'/forgot-password',
@ -148,13 +147,13 @@ export const signOut = async () => {
return redirect('/sign-in');
};
export const getUser = async () => {
export const getUser = async (): Promise<Result<User>> => {
try {
const supabase = await createServerClient();
const { data, error } = await supabase.auth.getUser();
if (error) throw error;
return data.user;
return {success: true, data: data.user};
} catch (error) {
console.error('Could not get user!', error);
return {success: false, error: 'Could not get user!'};
}
};

View File

@ -8,17 +8,16 @@ import type { Result } from './index';
export const getProfile = async (): Promise<Result<Profile>> => {
try {
const user = await getUser();
if (!user) throw new Error('User not found');
if (!user.success || user.data === undefined) throw new Error('User not found');
const supabase = await createServerClient();
const { data, error } = await supabase
.from('profiles')
.select('*')
.eq('id', user.id)
.eq('id', user.data.id)
.single();
if (error) throw error;
return { success: true, data: data as Profile };
} catch (error) {
console.error('Could not get profile!', error);
return {
success: false,
error:

View File

@ -50,10 +50,8 @@ export async function getSignedUrl({
urlObj.searchParams.append('download', '');
return { success: true, data: urlObj.toString() };
}
return { success: true, data: data.signedUrl };
} catch (error) {
console.error('Could not get signed URL for asset!', error);
return {
success: false,
error:
@ -87,7 +85,6 @@ export async function getPublicUrl({
return { success: true, data: data.publicUrl };
} catch (error) {
console.error('Could not get public URL for asset!', error);
return {
success: false,
error:
@ -115,7 +112,6 @@ export async function uploadFile({
return { success: true, data: data.path };
} catch (error) {
console.error('Could not upload file!', error);
return {
success: false,
error:
@ -140,7 +136,6 @@ export async function deleteFile({
return { success: true, data: null };
} catch (error) {
console.error('Could not delete file!', error);
return {
success: false,
error:
@ -174,7 +169,6 @@ export async function listFiles({
return { success: true, data };
} catch (error) {
console.error('Could not list files!', error);
return {
success: false,
error: