50 lines
1.6 KiB
TypeScript
50 lines
1.6 KiB
TypeScript
/**
|
|
* ClientField Component
|
|
*
|
|
* Renders a list of testing centers with associated client selection inputs.
|
|
* Each testing center allows for the selection of a client from a provided list.
|
|
*/
|
|
|
|
import { faClock } from "@fortawesome/free-regular-svg-icons"
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
|
|
import React from "react"
|
|
import SelectInput from "./SelectInput"
|
|
import { Utils } from "./Utils"
|
|
|
|
/**
|
|
* Props for ClientField component.
|
|
*
|
|
* @param testingCenters Array of testing center names to be displayed.
|
|
* @param clients Array of client names available for selection.
|
|
*/
|
|
|
|
type ClientFieldProps = {
|
|
testingCenters: string[]
|
|
clients: string[]
|
|
}
|
|
|
|
const ClientField: React.FC<ClientFieldProps> = ({ testingCenters, clients }) => {
|
|
return (
|
|
<div className="flex flex-col gap-4 text-sm leading-tight">
|
|
{/* Render a selection input for each testing center, allowing a client to be chosen for each. */}
|
|
{testingCenters.map((testingCenter) => (
|
|
<div key={Utils.camelize(testingCenter)} className="flex items-center gap-4 md:gap-14">
|
|
<span>{testingCenter}</span>
|
|
<div className="flex items-center gap-2">
|
|
<SelectInput name={Utils.camelize(testingCenter)}>
|
|
<option value="">Select Client</option>
|
|
{clients.map((option: string) => (
|
|
<option key={option} value={option}>
|
|
{option}
|
|
</option>
|
|
))}
|
|
</SelectInput>
|
|
<FontAwesomeIcon icon={faClock} />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default ClientField
|