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 && (
{children}
@@ -77,7 +78,17 @@ export function TextArea({
);
}
-
+/**
+ * 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
-
+
;
}
-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}