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" />
</div>
{/* 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>
</div>
{/* 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 }) => {
if (touched && error) {
return <p className="mt-1">{error}</p>
return <p className="text-xs">{error}</p>
}
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 ErrorMessage from "./ErrorMessage";
import RequiredAsterisk from "./RequiredAsterisk";
import Separator from "./Separator";
interface FileInputProps {
label: string;
@ -78,11 +79,17 @@ const FileInput: React.FC<FileInputProps> = ({ label, ...props }) => {
};
return (
<div className="mb-4">
<label className="text-md" htmlFor={props.name}>
{label}
<RequiredAsterisk required={required} />
</label>
<div className="flex flex-col gap-4">
{/* Title */}
<div className="flex flex-col gap-4">
<Separator/>
<label className="text-md" htmlFor={props.name}>
{label}
<RequiredAsterisk required={required} />
</label>
</div>
{/* File drop area */}
<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`}
onClick={handleClick}
@ -96,9 +103,13 @@ const FileInput: React.FC<FileInputProps> = ({ label, ...props }) => {
</div>
<button type="button" className="text-white px-12 py-2 rounded-md bg-blue-950 w-fit">Upload Manifest</button>
</div>
{/* Hidden input */}
<input type="file" className="hidden" ref={fileInputRef} onChange={handleChange} />
{/* File info */}
{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" />
<div className="grow">
<div className="flex justify-between text-sm text-slate-500">
@ -111,6 +122,7 @@ const FileInput: React.FC<FileInputProps> = ({ label, ...props }) => {
</div>
</div>
)}
<ErrorMessage touched={meta.touched} error={meta.error} />
</div>
);

17
components/Form/RadioGroup.tsx
View file

@ -3,6 +3,7 @@ import { useField } from "formik"
import React from "react"
import ErrorMessage from "./ErrorMessage"
import RequiredAsterisk from "./RequiredAsterisk"
import Separator from "./Separator"
const RadioGroupField = ({
name,
@ -23,11 +24,15 @@ const RadioGroupField = ({
}
return (
<div className="mb-4">
<label className="text-md" htmlFor={label}>
{label}
</label>
<RequiredAsterisk required={required} />
<div className="flex flex-col gap-3">
<div className="flex flex-col gap-4">
<Separator/>
<label className="text-md" htmlFor={label}>
{label}
<RequiredAsterisk required={required} />
</label>
</div>
<RadioGroup.Root className="flex gap-3" value={field.value} onValueChange={handleChange} aria-label={label}>
{options.map((option) => (
<div className="flex items-center" key={option}>
@ -36,7 +41,7 @@ const RadioGroupField = ({
value={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>
<label className="pl-[15px] text-[15px] leading-none" htmlFor={`${name}-${option}`}>
{option}

2
components/Form/RequiredAsterisk.tsx
View file

@ -1,7 +1,7 @@
import React from "react"
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

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)
return (
<div className="">
<div className="flex flex-col gap-3">
{label && (
<label className="text-md" htmlFor={props.id || props.name}>
{label}
<RequiredAsterisk required={required} />
</label>
)}
<RequiredAsterisk required={required} />
<select className="h-10 w-full rounded-lg border px-3 text-base shadow-sm" {...field} {...restProps} />
<ErrorMessage touched={meta.touched} error={meta.error} />
<div className="flex flex-col">
<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>
)
}

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 Separator from "./Separator"
const StatusField = ({
label,
@ -10,8 +11,11 @@ const StatusField = ({
statusColor: string
}) => {
return (
<div>
<h4>{label}</h4>
<div className="flex flex-col gap-2">
<div className="flex flex-col gap-4">
<Separator/>
<h4>{label}</h4>
</div>
<span className={statusColor}>{statusLabel}</span>
</div>
)

42
components/Form/ToggleField.tsx
View file

@ -3,6 +3,9 @@ import { useField } from "formik"
import React, { useState } from "react"
import ErrorMessage from "./ErrorMessage"
import RequiredAsterisk from "./RequiredAsterisk"
import Separator from "./Separator"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faClock } from "@fortawesome/free-regular-svg-icons"
const ToggleField = ({
children,
@ -15,21 +18,30 @@ const ToggleField = ({
const [checked, setChecked] = useState(false)
return (
<div className="">
<label className="flex items-center gap-2">
{children}
<RequiredAsterisk required={required} />
</label>
<SwitchPrimitive.Root
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"
checked={checked}
onCheckedChange={(isChecked) => {
setChecked(isChecked)
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>
<div className="flex flex-col gap-4">
<div className="flex flex-col gap-4">
<Separator/>
<label className="flex items-center gap-2">
{children}
<RequiredAsterisk required={required} />
</label>
</div>
<div className="flex gap-3 itens-center">
<SwitchPrimitive.Root
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) => {
setChecked(isChecked)
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} />
</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
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"),
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
})

19
components/Form/index.tsx
View file

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