Software-Mac/spacedrive
Software-Mac/spacedrive
1
0
Fork 0
mirror of https://github.com/spacedriveapp/spacedrive synced 2024-07-04 12:13:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ENG-1680] Show error messages for feedback form (#2196)

Browse source 
Update FeedbackButton.tsx
This commit is contained in:
ameer2468 2024-03-12 16:17:29 +03:00 committed by GitHub
parent 471db4a691
commit 4b74c0af04
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 31 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
interface/app/$libraryId/Layout/Sidebar/SidebarLayout/FeedbackButton.tsx
View file

@ -8,7 +8,7 @@ import { useLocale } from '~/hooks';
const schema = z.object({
message: z.string().min(1, { message: i18n.t('feedback_is_required') }),
emoji: z.number().min(0).max(3)
emoji: z.number().min(0).max(3, { message: 'Please select an emoji' })
});
const EMOJIS = ['🤩', '😀', '🙁', '😭'];
@ -32,8 +32,9 @@ export default function () {
message: ''
}
});
const popover = usePopover();
const emojiError = form.formState.errors.emoji?.message;
const popover = usePopover();
const authState = auth.useStateSnapshot();
return (
@ -69,30 +70,42 @@ export default function () {
placeholder={t('feedback_placeholder')}
className="!h-36 w-full flex-1"
/>
<div className="flex flex-row justify-between">
<div className="flex flex-row items-center justify-between">
<Controller
control={form.control}
name="emoji"
render={({ field }) => (
<div className="flex items-center justify-center gap-1 text-lg">
{EMOJIS.map((emoji, i) => (
<button
type="button"
onClick={() => field.onChange(i)}
key={i}
className={clsx(
field.value === i ? 'bg-accent' : 'bg-app-input',
'flex h-7 w-7 cursor-pointer items-center justify-center rounded-full border border-app-line transition-all duration-200 hover:scale-125'
)}
>
{emoji}
</button>
))}
<div className="flex flex-col items-center">
<div className="flex items-center gap-1 text-lg">
{EMOJIS.map((emoji, i) => (
<button
type="button"
onClick={() => field.onChange(i)}
key={i}
className={clsx(
field.value === i
? 'bg-accent'
: 'bg-app-input',
'flex size-7 cursor-pointer items-center justify-center rounded-full border transition-all duration-200 hover:scale-125',
emojiError
? 'border-red-500'
: 'border-app-line'
)}
>
{emoji}
</button>
))}
</div>
{emojiError && (
<p className="pt-1 text-xs text-red-500">
Please select an emoji
</p>
)}
</div>
)}
/>
<Button type="submit" variant="accent" disabled={!form.formState.isValid}>
<Button type="submit" variant="accent">
{t('send')}
</Button>
</div>