@bigbinary/neeto-molecules 1.3.17 → 1.3.19-beta

package/types/ConfigurePageSidebar.d.ts

@@ -0,0 +1,56 @@
+import React from "react";
+type NavLinkItemType = {
+  to: string;
+  label?: React.ReactNode;
+  isActive: () => boolean;
+  items: NavLinkItemType[];
+} & React.PropsWithoutRef<NavLinkProps<any>> & React.RefAttributes<HTMLAnchorElement>;
+/**
+ *
+ * Used in neeto products as a sidebar for the configure page.
+ *
+ * ![Screenshot](https://github.com/bigbinary/neeto-molecules/assets/54279092/13965337-ae04-440b-ab9f-e71336f3a5ad|height=200|width=300)
+ *
+ * @example 
+ *
+ * import ConfigurePageSidebar from "@bigbinary/neeto-molecules/ConfigurePageSidebar";
+ * 
+ * const ConfigurePageSidebarContainer = ({ children }) => {
+ *   const configureNavLink = {
+ *     label: "Configure",
+ *     items: [
+ *       {
+ *         label: "Forms",
+ *         to: "/configure/forms",
+ *         items: [
+ *           { label: "All Forms", to: "/configure/forms/all" },
+ *           { label: "New Form", to: "/configure/forms/new" },
+ *         ],
+ *       },
+ *       {
+ *         label: "Filters",
+ *         to: "/configure/filters",
+ *         items: [
+ *           { label: "All Filters", to: "/configure/filters/all" },
+ *           { label: "New Filter", to: "/configure/filters/new" },
+ *         ],
+ *       },
+ *     ],
+ *   };
+ * 
+ *   return (
+ *     <div className="flex w-full">
+ *       <ConfigurePageSidebar configureNavLink={configureNavLink} />
+ *       {children}
+ *     </div>
+ *   );
+ * };
+ * @endexample
+*/
+const ConfigurePageSidebar: React.FC<{
+  configureNavLink: {
+    label: React.ReactNode;
+    items: NavLinkItemType[];
+  };
+}>;
+export default ConfigurePageSidebar;