93 lines
3.8 KiB
TypeScript
93 lines
3.8 KiB
TypeScript
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
|
|
import React from "react";
|
|
import {IconDefinition} from "@fortawesome/fontawesome-svg-core";
|
|
import {faPlus, faTrash} from "@fortawesome/free-solid-svg-icons";
|
|
|
|
interface InputFieldProps {
|
|
icon?: IconDefinition,
|
|
fieldName?: string,
|
|
input: React.ReactNode,
|
|
addButtonCallBack?: () => Promise<void>
|
|
removeButtonCallBack?: () => Promise<void>
|
|
isAddButtonDisabled?: boolean
|
|
action?: () => Promise<void>
|
|
actionLabel?: string
|
|
actionIcon?: IconDefinition
|
|
hint?: string,
|
|
}
|
|
|
|
export default function InputField(
|
|
{
|
|
fieldName,
|
|
icon,
|
|
input,
|
|
addButtonCallBack,
|
|
removeButtonCallBack,
|
|
isAddButtonDisabled,
|
|
action,
|
|
actionLabel,
|
|
actionIcon,
|
|
hint
|
|
}: InputFieldProps) {
|
|
return (
|
|
<div className={'flex flex-col'}>
|
|
<div className={'flex justify-between items-center mb-2 lg:mb-3 flex-wrap gap-2'}>
|
|
{
|
|
fieldName && (
|
|
<h3 className="text-text-primary text-xl font-[ADLaM Display] font-medium mb-2 flex items-center gap-2">
|
|
{
|
|
icon && <FontAwesomeIcon icon={icon} className="text-primary w-5 h-5"/>
|
|
}
|
|
{fieldName}
|
|
</h3>
|
|
)
|
|
}
|
|
{
|
|
action && (
|
|
<button
|
|
onClick={action}
|
|
className="flex items-center gap-1.5 px-3 py-1.5 text-xs bg-secondary/50 rounded-lg text-primary hover:bg-secondary hover:shadow-md hover:scale-105 transition-all duration-200 border border-secondary/50 font-medium"
|
|
>
|
|
{
|
|
actionIcon && <FontAwesomeIcon icon={actionIcon} className={'w-3.5 h-3.5'}/>
|
|
}
|
|
{
|
|
actionLabel && <span>{actionLabel}</span>
|
|
}
|
|
</button>
|
|
)
|
|
}
|
|
{hint && (
|
|
<span
|
|
className="text-xs text-muted bg-secondary/30 px-3 py-1.5 rounded-lg border border-secondary/30">
|
|
{hint}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div className="flex justify-between items-center gap-2">
|
|
{input}
|
|
{
|
|
addButtonCallBack && (
|
|
<button
|
|
className="bg-primary text-text-primary w-9 h-9 rounded-full flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 hover:bg-primary-dark hover:shadow-lg hover:scale-110 shadow-md"
|
|
onClick={addButtonCallBack}
|
|
disabled={isAddButtonDisabled}>
|
|
<FontAwesomeIcon icon={faPlus} className="w-4 h-4"/>
|
|
</button>
|
|
)
|
|
}
|
|
{
|
|
removeButtonCallBack && (
|
|
<button
|
|
className="bg-error/90 hover:bg-error text-text-primary w-9 h-9 rounded-full flex items-center justify-center transition-all duration-200 hover:shadow-lg hover:scale-110 shadow-md"
|
|
onClick={removeButtonCallBack}
|
|
>
|
|
<FontAwesomeIcon icon={faTrash} className={'w-4 h-4'}/>
|
|
</button>
|
|
)
|
|
}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|