-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
1eb9746
commit 2da3417
Showing
14 changed files
with
142 additions
and
194 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -3,9 +3,9 @@ import * as Dialog from "@radix-ui/react-dialog" | |
import * as Form from "@radix-ui/react-form" | ||
import { Cross2Icon, DownloadIcon, PlusIcon } from "@radix-ui/react-icons" | ||
import { useForm, Controller, type SubmitHandler } from "react-hook-form" | ||
import { CustomInput } from "./CustomInput.tsx" | ||
import { CustomTextarea } from "./CustomTextarea.tsx" | ||
import { CustomTextarea } from "./Textarea.tsx" | ||
import Button from "./Button.tsx" | ||
import { Input } from "./Input.tsx" | ||
|
||
export interface Inputs { | ||
name: string | ||
|
@@ -65,30 +65,32 @@ const DownloadModal: React.FC<DownloadModalProps> = ({ filesToDownload }) => { | |
name="name" | ||
control={control} | ||
render={() => ( | ||
<CustomInput label="Name" placeholder="Heather Yu" {...register("name")} /> | ||
<Input label="Name" placeholder="Heather Yu" {...register("name")} required /> | ||
)} | ||
/> | ||
<Controller | ||
name="institution" | ||
control={control} | ||
render={() => ( | ||
<CustomInput | ||
<Input | ||
label="Institution" | ||
placeholder="Brown University" | ||
{...register("institution")} | ||
required | ||
/> | ||
)} | ||
/> | ||
<Controller | ||
name="email" | ||
control={control} | ||
render={() => ( | ||
<CustomInput | ||
<Input | ||
label="Email" | ||
placeholder="[email protected]" | ||
match="typeMismatch" | ||
errorMessage="Please provide a valid email" | ||
{...register("email")} | ||
required | ||
/> | ||
)} | ||
/> | ||
|
@@ -100,6 +102,7 @@ const DownloadModal: React.FC<DownloadModalProps> = ({ filesToDownload }) => { | |
label="Description" | ||
placeholder="Why you need this file..." | ||
{...register("description")} | ||
required | ||
/> | ||
)} | ||
/> | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,45 @@ | ||
import * as Form from "@radix-ui/react-form" | ||
import React, { type ReactNode } from "react" | ||
|
||
interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> { | ||
label: string | ||
name: string | ||
icon?: ReactNode | ||
match?: Form.FormMessageProps["match"] | ||
errorMessage?: string | ||
} | ||
|
||
// input, | ||
// select { | ||
// @apply bg-white; | ||
// @apply rounded-full; | ||
// @apply shadow-inner; | ||
// @apply min-w-60; | ||
// @apply w-max; | ||
// @apply py-3; | ||
// @apply px-5; | ||
// } | ||
|
||
export const Input = React.forwardRef<HTMLInputElement, InputProps>( | ||
({ label, name, icon, match, errorMessage, ...delegated }: InputProps, ref) => { | ||
return ( | ||
<Form.Field name={name} className="flex flex-col gap-2"> | ||
<Form.Label>{label}</Form.Label> | ||
<Form.Control asChild> | ||
<div className="flex items-center gap-2 bg-white rounded-full shadow-inner min-w-60 w-max py-3 px-5 focus-within:shadow-inner-focus"> | ||
<span className="text-neutral-300 w-5 h-5">{icon}</span> | ||
<input {...delegated} ref={ref} /> | ||
</div> | ||
</Form.Control> | ||
<Form.Message className="text-primary-300" match="valueMissing"> | ||
Please enter your {label} | ||
</Form.Message> | ||
{match !== undefined && ( | ||
<> | ||
<Form.Message match={match}>{errorMessage}</Form.Message> | ||
</> | ||
)} | ||
</Form.Field> | ||
) | ||
} | ||
) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
import React from "react" | ||
import * as Form from "@radix-ui/react-form" | ||
|
||
interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> { | ||
label: string | ||
name: string | ||
} | ||
|
||
export const CustomTextarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>( | ||
({ name, label, ...delegated }, ref) => ( | ||
<Form.Field name={name} className="flex flex-col gap-2"> | ||
<Form.Label>{label}</Form.Label> | ||
<Form.Control asChild> | ||
<textarea | ||
rows={4} | ||
className="text-gray-400 text-sm font-medium outline-none border-b-2 w-full" | ||
{...delegated} | ||
ref={ref} | ||
/> | ||
</Form.Control> | ||
<Form.Message className="text-primary-300" match="valueMissing"> | ||
Please enter your {label} | ||
</Form.Message> | ||
</Form.Field> | ||
) | ||
) |
Oops, something went wrong.