diff --git a/Parts/Input.js b/Parts/Input.js index 86938b2..dbc150f 100644 --- a/Parts/Input.js +++ b/Parts/Input.js @@ -17,11 +17,12 @@ export function useField(props){ export default function Input({ label, title, className, children, ...props }) { /*name, id*/ + props.id = props.id ?? props.name ?? title; const [field, meta, helpers] = useField(props); return ( -
+
{title && (
); } - +/** + * Renders a checkbox input with optional label and error message. + * + * @param {Object} props - The properties for the CheckBox component. + * @param {string} props.label - The label for the checkbox. + * @param {string} props.title - The title for the checkbox. + * @param {string} props.className - The class name for the container div. + * @param {ReactNode} props.children - The children components. + * @param {Object} props... - Additional properties for the checkbox input. + * @return {ReactElement} The rendered CheckBox component. + */ export function CheckBox({ label, title, @@ -86,11 +97,12 @@ export function CheckBox({ ...props }) { - const [field, meta, helpers] = useField(props); + const [field, meta, helpers] = useField(props); return (
) : null} {children} + {meta?.touched && meta.error ? ( +
{meta.error}
+ ) : null}
); } diff --git a/Parts/Table.js b/Parts/Table.js index 7364e4f..4ca7341 100644 --- a/Parts/Table.js +++ b/Parts/Table.js @@ -4,22 +4,25 @@ import "styled-components/macro" export function Table(props) { return
- +
{props.children}
; } -const TablePart = styled.td(tw`border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4`) +const TablePart = styled.td(tw`border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs p-4`) export {TablePart} -const TableHeader = styled.th(tw`px-6 py-3 align-middle text-xs uppercase whitespace-nowrap font-bold text-left text-secondary border-b-2 border-secondary`) +const TableRow = styled.tr(tw`odd:bg-black/10 hover:bg-black/15`) +export {TableRow} + +const TableHeader = styled.th(tw`px-6 py-3 align-middle text-xs uppercase font-bold text-left text-secondary border-b-2 border-secondary`) export {TableHeader} const TableNote = styled.p(tw`text-xs font-normal italic normal-case`) export {TableNote} -const TableSidePart = styled.td(tw`border-t-0 px-8 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 pl-6 py-3 align-middle text-xs uppercase whitespace-nowrap font-bold text-left w-1/3 text-secondary border-r-2 border-secondary`) +const TableSidePart = styled.td(tw`border-t-0 px-8 align-middle border-l-0 border-r-0 text-xs p-4 pl-6 py-3 align-middle text-xs uppercase whitespace-nowrap font-bold text-left w-1/3 text-secondary border-r-2 border-secondary`) export {TableSidePart}