feat: adiciona panel de tipagem

Vitor-Soares-main/src/components/FormContainer/Panel/Item/index.tsx

@@ -0,0 +1,15 @@
+import { HTMLAttributes, HtmlHTMLAttributes, ReactNode } from "react";
+
+export interface IItemProps extends HTMLAttributes<HTMLDivElement> {
+  title: string;
+  children?: ReactNode;
+  activeClass?: string;
+}
+
+export function Item({ title, children, ...attrs }: IItemProps) {
+  return (
+    <div title={title} {...attrs}>
+      {children}
+    </div>
+  );
+}

Vitor-Soares-main/src/components/FormContainer/Panel/index.tsx

@@ -0,0 +1,48 @@
+import React, {
+  ReactNode,
+  useState,
+  Children,
+  HTMLAttributes,
+  useMemo,
+} from "react";
+import { Item, IItemProps } from "./Item";
+
+interface IRootProps extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+}
+
+function filterChildren(children: ReactNode): IItemProps[] {
+  return Children.toArray(children)
+    .filter((e: any) => e.type === Item)
+    .map((e: any) => e.props) as any;
+}
+
+function Root({ children, ...attrs }: IRootProps) {
+  const data = useMemo(filterChildren.bind(null, children), [children]);
+
+  const [currentOption, setCurrentOption] = useState<IItemProps>(data[0]);
+
+  return (
+    <div {...attrs}>
+      <nav>
+        <ul>
+          {data.map((e, i) => (
+            <li
+              key={i}
+              onClick={setCurrentOption.bind(null, data[i])}
+              className={e === currentOption ? "active" : ""}
+            >
+              <button>{e.title}</button>
+            </li>
+          ))}
+        </ul>
+      </nav>
+      <article>{currentOption?.children}</article>
+    </div>
+  );
+}
+
+export const Panel = {
+  Root,
+  Item,
+};