CardSettings = () => {
  const node = useNode((node) => {
    const ps = {};
    fields.forEach((f) => {
      ps[f.name] = node.data.props[f.name];
    });
    if (fields.some((f) => f.canBeFormula))
      ps.isFormula = node.data.props.isFormula;
    return ps;
  });
  const {
    actions: { setProp },
  } = node;

  return (
    <Accordion>
      <table className="w-100" accordiontitle="Card properties">
        <tbody>
          <SettingsRow
            field={{
              label: "Card title",
              name: "title",
              type: "String",
              canBeFormula: true,
            }}
            node={node}
            setProp={setProp}
          />
          <SettingsRow
            field={{
              label: "URL",
              name: "url",
              type: "String",
              canBeFormula: true,
            }}
            node={node}
            setProp={setProp}
          />
          <SettingsRow
            field={{
              label: "Class",
              name: "class",
              type: "String",
              canBeFormula: true,
            }}
            node={node}
            setProp={setProp}
          />
          <SettingsRow
            field={{ label: "Card footer", name: "hasFooter", type: "Bool" }}
            node={node}
            setProp={setProp}
          />
          <SettingsRow
            field={{ label: "Shadow", name: "shadow", type: "Bool" }}
            node={node}
            setProp={setProp}
          />
          <SettingsRow
            field={{
              label: "Save indicator",
              name: "titleAjaxIndicator",
              type: "Bool",
            }}
            node={node}
            setProp={setProp}
          />
          <SettingsRow
            field={{ label: "No padding", name: "noPadding", type: "Bool" }}
            node={node}
            setProp={setProp}
          />
        </tbody>
      </table>
      <div accordiontitle="Box" className="w-100">
        <BoxModelEditor setProp={setProp} node={node} sizeWithStyle={true} />
      </div>
    </Accordion>
  );
}
@returns {Accordion}
@category saltcorn-builder
@subcategory components
@namespace