feat: create event type atom (#17142)

* feat: create event type atom

* fixup! feat: create event type atom

* fixup! fixup! feat: create event type atom

* docs: base doc for create event type atom

packages/platform/examples/base/src/pages/event-types.tsx

@@ -4,7 +4,13 @@ import { Inter } from "next/font/google";
 import { useRouter } from "next/router";
 import { useState } from "react";
 
-import { useEventTypes, useTeamEventTypes, useTeams, EventTypeSettings } from "@calcom/atoms";
+import {
+  useEventTypes,
+  useTeamEventTypes,
+  useTeams,
+  EventTypeSettings,
+  CreateEventType,
+} from "@calcom/atoms";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -111,6 +117,46 @@ export default function Bookings(props: { calUsername: string; calEmail: string
             />
           </div>
         )}
+
+        {!eventTypeId && (
+          <div className="mt-8 flex flex-row items-center justify-center gap-24">
+            <div className="flex w-[30vw] flex-col gap-2">
+              <h1 className="font-semibold">Create Event Type</h1>
+              <CreateEventType
+                customClassNames={{
+                  atomsWrapper: "border p-4 shadow-md rounded-md",
+                  buttons: { container: "justify-center", submit: "bg-red-500", cancel: "bg-gray-300" },
+                }}
+                onSuccess={() => {
+                  refetch();
+                }}
+              />
+            </div>
+
+            <div className="flex w-[30vw] flex-col gap-2">
+              <h1 className="font-semibold">Create Team Event Type</h1>
+              {teams?.[0]?.id && (
+                <CreateEventType
+                  customClassNames={{
+                    atomsWrapper: "border shadow-md p-4 rounded-md ",
+                    buttons: {
+                      container: "justify-center flex-row-reverse",
+                      submit: "bg-green-500",
+                      cancel: "bg-stone-300",
+                    },
+                  }}
+                  teamId={teams?.[0]?.id}
+                  onCancel={() => {
+                    console.log("cancel team event type creation");
+                  }}
+                  onSuccess={() => {
+                    refetchTeamEvents();
+                  }}
+                />
+              )}
+            </div>
+          </div>
+        )}
       </div>
     </main>
   );