3pp-mirror/rallly
1
0
Fork 0
mirror of https://github.com/lukevella/rallly.git synced 2025-08-06 09:59:00 +02:00
Code Issues Projects Releases Packages Wiki Activity

💄 Add form validation feedback (#998)

Browse source
This commit is contained in:
Luke Vella 2024-01-26 14:09:00 +07:00 • committed by GitHub
parent 63c6c4f92d
commit c04a670607
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 8 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

4
apps/web/src/components/discussion/discussion.tsx
View file

@ -166,7 +166,9 @@ const Discussion: React.FunctionComponent = () => {
key={session.user?.id}
control={control}
rules={{ validate: requiredString }}
render={({ field }) => <NameInput {...field} />}
render={({ field }) => (
<NameInput error={!!formState.errors.authorName} {...field} />
)}
/>
</div>
<div className="flex justify-between gap-2">

8
apps/web/src/components/name-input.tsx
View file

@ -1,4 +1,4 @@
import clsx from "clsx";
import { cn } from "@rallly/ui";
import { useTranslation } from "next-i18next";
import * as React from "react";
@ -11,12 +11,13 @@ interface NameInputProps
> {
value?: string;
defaultValue?: string;
error?: boolean;
}
const NameInput: React.ForwardRefRenderFunction<
HTMLInputElement,
NameInputProps
> = ({ value, defaultValue, className, ...forwardProps }, ref) => {
> = ({ value, defaultValue, className, error, ...forwardProps }, ref) => {
const { t } = useTranslation();
return (
<div className="relative flex items-center">
@ -28,10 +29,11 @@ const NameInput: React.ForwardRefRenderFunction<
) : null}
<input
ref={ref}
className={clsx(
className={cn(
"input",
{
"pl-9": value || defaultValue,
"ring-destructive ring-1": error,
},
className,
)}