v.korobtsev/next-enterprise
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

styling

Browse source
This commit is contained in:
Jesus Vasquez 2024-03-04 20:50:32 -05:00
parent 59a7bcc224
commit fadaa0fe4a
11 changed files with 94 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

2
app/page.tsx
View file

@ -17,7 +17,7 @@ export default function Web() {
<FontAwesomeIcon icon={faXmark} className="h-6 w-6" /> <FontAwesomeIcon icon={faXmark} className="h-6 w-6" />
</div> </div>
{/* Title */} {/* Title */}
<div className="flex justify-center"> <div className="flex justify-center mb-12">
<h1 className="border-grey-300 w-fit border-b pb-4 text-3xl text-indigo-900">Document Upload</h1> <h1 className="border-grey-300 w-fit border-b pb-4 text-3xl text-indigo-900">Document Upload</h1>
</div> </div>
{/* Form layout */} {/* Form layout */}

2
components/Form/ErrorMessage.tsx
View file

@ -2,7 +2,7 @@ import React from "react"
const ErrorMessage = ({ touched, error }: { touched: boolean; error?: string }) => { const ErrorMessage = ({ touched, error }: { touched: boolean; error?: string }) => {
if (touched && error) { if (touched && error) {
return <p className="mt-1">{error}</p> return <p className="text-xs">{error}</p>
} }
return null return null
} }

24
components/Form/FileInput.tsx
View file

@ -4,6 +4,7 @@ import { useField, useFormikContext } from "formik";
import React, { useRef, useState } from "react"; import React, { useRef, useState } from "react";
import ErrorMessage from "./ErrorMessage"; import ErrorMessage from "./ErrorMessage";
import RequiredAsterisk from "./RequiredAsterisk"; import RequiredAsterisk from "./RequiredAsterisk";
import Separator from "./Separator";
interface FileInputProps { interface FileInputProps {
label: string; label: string;
@ -78,11 +79,17 @@ const FileInput: React.FC<FileInputProps> = ({ label, ...props }) => {
}; };
return ( return (
<div className="mb-4"> <div className="flex flex-col gap-4">
<label className="text-md" htmlFor={props.name}> {/* Title */}
{label} <div className="flex flex-col gap-4">
<RequiredAsterisk required={required} /> <Separator/>
</label> <label className="text-md" htmlFor={props.name}>
{label}
<RequiredAsterisk required={required} />
</label>
</div>
{/* File drop area */}
<div <div
className={`border border-grey-500 rounded-md p-4 flex flex-col items-center gap-4 ${dragging ? "bg-blue-100" : "bg-white"} cursor-pointer`} className={`border border-grey-500 rounded-md p-4 flex flex-col items-center gap-4 ${dragging ? "bg-blue-100" : "bg-white"} cursor-pointer`}
onClick={handleClick} onClick={handleClick}
@ -96,9 +103,13 @@ const FileInput: React.FC<FileInputProps> = ({ label, ...props }) => {
</div> </div>
<button type="button" className="text-white px-12 py-2 rounded-md bg-blue-950 w-fit">Upload Manifest</button> <button type="button" className="text-white px-12 py-2 rounded-md bg-blue-950 w-fit">Upload Manifest</button>
</div> </div>
{/* Hidden input */}
<input type="file" className="hidden" ref={fileInputRef} onChange={handleChange} /> <input type="file" className="hidden" ref={fileInputRef} onChange={handleChange} />
{/* File info */}
{fileInfo && ( {fileInfo && (
<div className="flex gap-4 p-4 items-center"> <div className="flex gap-4 p-4 items-center border-t border-grey-500">
<FontAwesomeIcon icon={faFile} className="text-amber-500 h-5 w-5" /> <FontAwesomeIcon icon={faFile} className="text-amber-500 h-5 w-5" />
<div className="grow"> <div className="grow">
<div className="flex justify-between text-sm text-slate-500"> <div className="flex justify-between text-sm text-slate-500">
@ -111,6 +122,7 @@ const FileInput: React.FC<FileInputProps> = ({ label, ...props }) => {
</div> </div>
</div> </div>
)} )}
<ErrorMessage touched={meta.touched} error={meta.error} /> <ErrorMessage touched={meta.touched} error={meta.error} />
</div> </div>
); );

17
components/Form/RadioGroup.tsx
View file

@ -3,6 +3,7 @@ import { useField } from "formik"
import React from "react" import React from "react"
import ErrorMessage from "./ErrorMessage" import ErrorMessage from "./ErrorMessage"
import RequiredAsterisk from "./RequiredAsterisk" import RequiredAsterisk from "./RequiredAsterisk"
import Separator from "./Separator"
const RadioGroupField = ({ const RadioGroupField = ({
name, name,
@ -23,11 +24,15 @@ const RadioGroupField = ({
} }
return ( return (
<div className="mb-4"> <div className="flex flex-col gap-3">
<label className="text-md" htmlFor={label}> <div className="flex flex-col gap-4">
{label} <Separator/>
</label> <label className="text-md" htmlFor={label}>
<RequiredAsterisk required={required} /> {label}
<RequiredAsterisk required={required} />
</label>
</div>
<RadioGroup.Root className="flex gap-3" value={field.value} onValueChange={handleChange} aria-label={label}> <RadioGroup.Root className="flex gap-3" value={field.value} onValueChange={handleChange} aria-label={label}>
{options.map((option) => ( {options.map((option) => (
<div className="flex items-center" key={option}> <div className="flex items-center" key={option}>
@ -36,7 +41,7 @@ const RadioGroupField = ({
value={option} value={option}
id={`${name}-${option}`} id={`${name}-${option}`}
> >
<RadioGroup.Indicator className="relative flex h-full w-full items-center justify-center after:block after:h-[11px] after:w-[11px] after:rounded-[50%] after:bg-violet-400 after:content-['']" /> <RadioGroup.Indicator className="relative flex h-full w-full items-center justify-center after:block after:h-[11px] after:w-[11px] after:rounded-[50%] after:bg-blue-950 after:content-['']" />
</RadioGroup.Item> </RadioGroup.Item>
<label className="pl-[15px] text-[15px] leading-none" htmlFor={`${name}-${option}`}> <label className="pl-[15px] text-[15px] leading-none" htmlFor={`${name}-${option}`}>
{option} {option}

2
components/Form/RequiredAsterisk.tsx
View file

@ -1,7 +1,7 @@
import React from "react" import React from "react"
const RequiredAsterisk = ({ required }: { required?: boolean }) => { const RequiredAsterisk = ({ required }: { required?: boolean }) => {
return required ? <span className="text-sm"> *</span> : null return required ? <span className="text-red-500 text-xs"> *</span> : null
} }
export default RequiredAsterisk export default RequiredAsterisk

13
components/Form/SelectInput.tsx
View file

@ -8,15 +8,20 @@ const SelectInput = ({ label, ...props }: { label?: string; name: string; [x: st
const [field, meta] = useField(restProps) const [field, meta] = useField(restProps)
return ( return (
<div className=""> <div className="flex flex-col gap-3">
{label && ( {label && (
<label className="text-md" htmlFor={props.id || props.name}> <label className="text-md" htmlFor={props.id || props.name}>
{label} {label}
<RequiredAsterisk required={required} />
</label> </label>
)} )}
<RequiredAsterisk required={required} />
<select className="h-10 w-full rounded-lg border px-3 text-base shadow-sm" {...field} {...restProps} /> <div className="flex flex-col">
<ErrorMessage touched={meta.touched} error={meta.error} /> <select className="h-10 w-full rounded-lg border border-grey-500 px-4 text-sm" {...field} {...restProps} />
<ErrorMessage touched={meta.touched} error={meta.error} />
</div>
</div> </div>
) )
} }

9
components/Form/Separator.tsx Normal file
View file

@ -0,0 +1,9 @@
import React from 'react'
const Separator = () => {
return (
<hr className='w-[285px]'/>
)
}
export default Separator

8
components/Form/StatusField.tsx
View file

@ -1,4 +1,5 @@
import React from "react" import React from "react"
import Separator from "./Separator"
const StatusField = ({ const StatusField = ({
label, label,
@ -10,8 +11,11 @@ const StatusField = ({
statusColor: string statusColor: string
}) => { }) => {
return ( return (
<div> <div className="flex flex-col gap-2">
<h4>{label}</h4> <div className="flex flex-col gap-4">
<Separator/>
<h4>{label}</h4>
</div>
<span className={statusColor}>{statusLabel}</span> <span className={statusColor}>{statusLabel}</span>
</div> </div>
) )

42
components/Form/ToggleField.tsx
View file

@ -3,6 +3,9 @@ import { useField } from "formik"
import React, { useState } from "react" import React, { useState } from "react"
import ErrorMessage from "./ErrorMessage" import ErrorMessage from "./ErrorMessage"
import RequiredAsterisk from "./RequiredAsterisk" import RequiredAsterisk from "./RequiredAsterisk"
import Separator from "./Separator"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faClock } from "@fortawesome/free-regular-svg-icons"
const ToggleField = ({ const ToggleField = ({
children, children,
@ -15,21 +18,30 @@ const ToggleField = ({
const [checked, setChecked] = useState(false) const [checked, setChecked] = useState(false)
return ( return (
<div className=""> <div className="flex flex-col gap-4">
<label className="flex items-center gap-2"> <div className="flex flex-col gap-4">
{children} <Separator/>
<RequiredAsterisk required={required} /> <label className="flex items-center gap-2">
</label> {children}
<SwitchPrimitive.Root <RequiredAsterisk required={required} />
className="relative h-[25px] w-[42px] cursor-default rounded-full bg-black shadow-[0_2px_10px] outline-none focus:shadow-[0_0_0_2px] focus:shadow-black" </label>
checked={checked} </div>
onCheckedChange={(isChecked) => { <div className="flex gap-3 itens-center">
setChecked(isChecked) <SwitchPrimitive.Root
field.onChange({ target: { name: field.name, value: isChecked } }) className="relative h-[25px] w-[42px] cursor-default rounded-full bg-blue-950 shadow-[0_2px_10px] outline-none focus:shadow-[0_0_0_2px] focus:shadow-black"
}} checked={checked}
> onCheckedChange={(isChecked) => {
<SwitchPrimitive.Thumb className="block h-[21px] w-[21px] translate-x-0.5 rounded-full bg-white shadow-[0_2px_2px] shadow-black transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" /> setChecked(isChecked)
</SwitchPrimitive.Root> field.onChange({ target: { name: field.name, value: isChecked } })
}}
>
<SwitchPrimitive.Thumb className="block h-[21px] w-[21px] translate-x-0.5 rounded-full bg-white shadow-[0_2px_2px] shadow-black transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
</SwitchPrimitive.Root>
<span>Toggle ON</span>
<span>|</span>
<span className="flex gap-2 items-center"><FontAwesomeIcon icon={faClock} />Select Tolerance Level</span>
</div>
<ErrorMessage touched={meta.touched} error={meta.error} /> <ErrorMessage touched={meta.touched} error={meta.error} />
</div> </div>
) )

4
components/Form/formSchemas.ts
View file

@ -20,9 +20,5 @@ export const validationSchema = Yup.object({
manifestFile: Yup.mixed().required("A file is required").nullable(), // Allows for null values manifestFile: Yup.mixed().required("A file is required").nullable(), // Allows for null values
splitSchedule: Yup.string().required("This field is required").oneOf(["Yes", "No"], "Invalid Option"), splitSchedule: Yup.string().required("This field is required").oneOf(["Yes", "No"], "Invalid Option"),
client: Yup.string().required("Client selection is required").oneOf(["Single", "Multiple"], "Invalid Client Type"), client: Yup.string().required("Client selection is required").oneOf(["Single", "Multiple"], "Invalid Client Type"),
testingCenter1: Yup.string().required("Testing center selection is required"), // Assuming a selection is required
testingCenter2: Yup.string().required("Testing center selection is required"), // Assuming a selection is required
testingCenter3: Yup.string().required("Testing center selection is required"), // Assuming a selection is required
testingCenter4: Yup.string().required("Testing center selection is required"), // Assuming a selection is required
toleranceWindow: Yup.boolean().required("Tolerance window selection is required"), // Assuming this is a boolean represented by a toggle toleranceWindow: Yup.boolean().required("Tolerance window selection is required"), // Assuming this is a boolean represented by a toggle
}) })

19
components/Form/index.tsx
View file

@ -19,7 +19,7 @@ import ToggleField from "./ToggleField"
import { FormValues } from "./types" import { FormValues } from "./types"
const FormComponent: React.FC = () => { const FormComponent: React.FC = () => {
const [formSubmitted, setFormSubmitted] = useState(false) const [formSubmitted, setFormSubmitted] = useState(false);
const submitForm = (values: FormValues) => { const submitForm = (values: FormValues) => {
return axios.post( return axios.post(
@ -60,8 +60,8 @@ const FormComponent: React.FC = () => {
return ( return (
<Form> <Form>
<div className="flex flex-col gap-4 lg:flex-row lg:gap-16"> <div className="flex flex-col gap-4 lg:flex-row lg:gap-16">
<div className="flex grow flex-col lg:max-w-[500px]"> <div className="flex w-full flex-col lg:w-[500px] gap-5">
<SelectInput key="importName" name="importName" label="Select Import Name:" required> <SelectInput key="importName" name="importName" required>
<option value="">Select Import Name:</option> <option value="">Select Import Name:</option>
{data.importNames.map((option) => ( {data.importNames.map((option) => (
<option key={option} value={option}> <option key={option} value={option}>
@ -69,13 +69,16 @@ const FormComponent: React.FC = () => {
</option> </option>
))} ))}
</SelectInput> </SelectInput>
<FileInput label="Select a manifest that you'd like to import" name="manifestFile" required /> <FileInput label="Select a manifest that you'd like to import" name="manifestFile" required />
<StatusField label="Elapse Data Checking:" statusLabel="No Elapsed Dates!" statusColor="text-green-500" /> <StatusField label="Elapse Data Checking:" statusLabel="No Elapsed Dates!" statusColor="text-green-500" />
<ToggleField key="toleranceWindow" name="toleranceWindow" required={true}> <ToggleField key="toleranceWindow" name="toleranceWindow" required={true}>
Tolerance Window: Tolerance Window:
</ToggleField> </ToggleField>
</div> </div>
<div className="flex grow flex-col lg:max-w-[350px]"> <div className="flex w-full flex-col gap-5 lg:w-[350px]">
<RadioGroup <RadioGroup
key="splitSchedule" key="splitSchedule"
name="splitSchedule" name="splitSchedule"
@ -96,13 +99,13 @@ const FormComponent: React.FC = () => {
Continue Import Continue Import
{formik.isSubmitting && <div className="ml-3 h-5 w-5 animate-spin rounded-full border-x-2 border-b-2"></div>} {formik.isSubmitting && <div className="ml-3 h-5 w-5 animate-spin rounded-full border-x-2 border-b-2"></div>}
</button> </button>
{formSubmitted && <div className="text-center text-green-500">Success</div>}
</Form> </Form>
) )
} }
} }
</Formik> </Formik>
{formSubmitted && <div>Success</div>}
</> </>
) )