TypeScript 61.9%
HTML 37.2%
SQL 0.7%
1'use client';23import { useActionState } from 'react';4import { uploadAvatarAction } from '@/lib/account/upload-actions';5import { idle } from '@/lib/auth/state';6import { FormMessage, SubmitButton } from '@/components/account/form';78export function AvatarForm({ avatarUrl, initial }: { avatarUrl: string | null; initial: string }) {9 const [state, action] = useActionState(uploadAvatarAction, idle);10 const url = (state.data?.url as string | undefined) ?? avatarUrl;11 return (12 <form action={action} className="space-y-3">13 <FormMessage state={state} />14 <div className="flex items-center gap-3">15 {url ? (16 // eslint-disable-next-line @next/next/no-img-element17 <img src={url} alt="" className="h-16 w-16 rounded-full border border-border object-cover" />18 ) : (19 <span className="inline-flex h-16 w-16 items-center justify-center rounded-full bg-accent text-xl font-semibold text-accent-fg">{initial}</span>20 )}21 <div className="text-xs text-muted">JPEG, PNG or WebP up to 2 MB. Square images look best.</div>22 </div>23 <input type="file" name="file" accept="image/jpeg,image/png,image/webp" required className="block w-full text-xs text-muted file:mr-3 file:rounded-md file:border file:border-border file:bg-elevated file:px-3 file:py-1.5 file:text-xs file:font-medium file:text-fg" />24 <SubmitButton variant="secondary" pendingText="Uploading…">25 Upload avatar26 </SubmitButton>27 </form>28 );29}30