@graph8/sdk 0.362.0 → 0.373.0

package/stacks/hubspot/pages/inbox.tsx.tmpl

@@ -0,0 +1,103 @@
+"use client";
+
+// Generated by `graph8-sdk create {{stackId}}`. The {{block}} block's {{component}} (source in {{blockDir}}), with the
+// other blocks of this app plugged into its slots. Edit freely: this file is yours.
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { Button, Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, Skeleton } from "@graph8/sdk/ui";
+import { Handshake } from "lucide-react";
+import { ApiError } from "@/components/g8/_foundation/api-error";
+import { EmptyState } from "@/components/g8/_foundation/empty-state";
+import { useG8Query } from "@/components/g8/_foundation/hooks/use-g8-query";
+import { g8Get } from "@/components/g8/_foundation/lib/g8-client";
+import { ContactLookupLink } from "@/components/g8/crm/contact-lookup-link";
+import { DealDetail } from "@/components/g8/deals/deal-detail";
+import { useDefaultOwner } from "@/components/g8/deals/hooks/use-default-owner";
+import { InboxScreen } from "@/components/g8/inbox/inbox-screen";
+import type { InboxThread } from "@/components/g8/inbox/lib/inbox-types";
+
+interface Match { id: number; full_name?: string | null; first_name?: string | null; last_name?: string | null; work_email?: string | null; job_title?: string | null }
+const nameOf = (m: Match): string => m.full_name || [m.first_name, m.last_name].filter(Boolean).join(" ") || m.work_email || `Contact ${m.id}`;
+
+/** The new deal's form. Mounted only while the sheet is open, so browsing threads never loads the team. When the key has no person, the owner is chosen here instead of silently being the first member. */
+function NewDeal({ contactId, onSaved }: { contactId: number; onSaved: (dealId: string) => void }) {
+  const owner = useDefaultOwner();
+  const [ownerId, setOwnerId] = useState<string | null>(null);
+  if (owner.loading) return <Skeleton className="h-24 w-full" aria-label="Loading owners" />;
+  const effective = ownerId ?? owner.defaultOwner?.id ?? "";
+  if (!effective) return <ApiError error={owner.error ?? new Error("No team member found to own this deal.")} title="A deal needs an owner" onRetry={() => void owner.reload()} />;
+  return (
+    <div className="space-y-3">
+      {owner.source === "first-member" ? (
+        <div className="space-y-1">
+          <label htmlFor="inbox-deal-owner" className="text-sm font-medium">Owner</label>
+          <select id="inbox-deal-owner" className="h-9 w-full rounded-md border bg-background px-2 text-sm" value={effective} onChange={(e) => setOwnerId(e.target.value)}>
+            {owner.owners.map((o) => <option key={o.id} value={o.id}>{o.name}{o.email && o.email !== o.name ? ` (${o.email})` : ""}</option>)}
+          </select>
+          <p className="text-xs text-muted-foreground">This key has no person of its own, so choose who owns the deal.</p>
+        </div>
+      ) : null}
+      <DealDetail ownerId={effective} contactIds={[contactId]} onSaved={(deal) => onSaved(deal.id)} />
+    </div>
+  );
+}
+
+/** Create a deal from a reply: find the sender in your CRM, pick them, then fill in the deal. */
+function CreateDeal({ thread }: { thread: InboxThread }) {
+  const router = useRouter();
+  const [open, setOpen] = useState(false);
+  const [contactId, setContactId] = useState<number | null>(null);
+  const name = thread.contact?.name?.trim() ?? "";
+  const matches = useG8Query(async (signal) => ((await g8Get<Match[]>("/contacts", { name, limit: 8, page: 1 }, { signal })).data ?? []), [name], { enabled: open && name.length > 1 });
+  const email = thread.contact?.email?.toLowerCase();
+  const list = matches.data ?? [];
+  return (
+    <>
+      <Button size="sm" variant="outline" onClick={() => { setContactId(null); setOpen(true); }}>
+        <Handshake className="mr-1 size-4" aria-hidden />
+        Create deal
+      </Button>
+      <Sheet open={open} onOpenChange={setOpen}>
+        <SheetContent className="w-full overflow-y-auto sm:max-w-xl">
+          <SheetHeader>
+            <SheetTitle>Create deal</SheetTitle>
+            <SheetDescription>A deal needs a contact in your CRM. Pick the person who wrote this reply.</SheetDescription>
+          </SheetHeader>
+          <div className="space-y-4 p-4">
+            {name.length < 2 ? <EmptyState compact title="No sender name on this thread" description="Open the contact in Contacts and create the deal from the Deals page." /> : null}
+            {matches.error ? <ApiError error={matches.error} title="Could not search contacts" onRetry={() => void matches.refetch()} /> : null}
+            {matches.loading && !matches.data ? <Skeleton className="h-16 w-full" aria-label="Searching contacts" /> : null}
+            {matches.data && list.length === 0 ? <EmptyState compact title="Not in your CRM yet" description={`Add ${name} in Contacts first, then come back.`} /> : null}
+            {list.length > 0 ? (
+              <ul className="divide-y rounded-md border" aria-label="Matching contacts">
+                {list.map((m) => (
+                  <li key={m.id}>
+                    <button type="button" aria-pressed={contactId === m.id} className="flex w-full items-center justify-between gap-3 p-3 text-left text-sm hover:bg-muted aria-pressed:bg-muted" onClick={() => setContactId(m.id)}>
+                      <span className="min-w-0 truncate font-medium">{nameOf(m)}</span>
+                      <span className="shrink-0 text-xs text-muted-foreground">{[m.job_title, m.work_email && m.work_email.toLowerCase() === email ? "Same email" : m.work_email].filter(Boolean).join(" · ")}</span>
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            ) : null}
+            {contactId != null ? <NewDeal key={contactId} contactId={contactId} onSaved={(id) => router.push(`/deals?id=${encodeURIComponent(id)}`)} /> : null}
+          </div>
+        </SheetContent>
+      </Sheet>
+    </>
+  );
+}
+
+export default function Page() {
+  const router = useRouter();
+  return (
+    <InboxScreen
+      renderDetailActions={(thread) => (
+        <>
+          <ContactLookupLink email={thread.contact?.email} onOpen={(id) => router.push(`/contacts?id=${id}`)} />
+          <CreateDeal thread={thread} />
+        </>
+      )}
+    />
+  );
+}

package/stacks/hubspot/pages/lifecycle.tsx.tmpl

@@ -0,0 +1,23 @@
+"use client";
+
+// Generated by `graph8-sdk create {{stackId}}`. The {{block}} block's {{component}} (source in {{blockDir}}), with the
+// other blocks of this app plugged into its slots. Edit freely: this file is yours.
+import { useRouter } from "next/navigation";
+import { Button } from "@graph8/sdk/ui";
+import { Building2, UserRound } from "lucide-react";
+import { LifecycleScreen } from "@/components/g8/lifecycle/lifecycle-screen";
+
+/** A lifecycle record opens its company or contact record. */
+export default function Page() {
+  const router = useRouter();
+  return (
+    <LifecycleScreen
+      renderDetailActions={(record) => (
+        <Button size="sm" variant="outline" onClick={() => router.push(`/${record.kind === "company" ? "companies" : "contacts"}?id=${record.id}`)}>
+          {record.kind === "company" ? <Building2 className="mr-1 size-4" aria-hidden /> : <UserRound className="mr-1 size-4" aria-hidden />}
+          {record.kind === "company" ? "Open company" : "Open contact"}
+        </Button>
+      )}
+    />
+  );
+}

package/stacks/hubspot/pages/lists.tsx.tmpl

@@ -0,0 +1,12 @@
+"use client";
+
+// Generated by `graph8-sdk create {{stackId}}`. The {{block}} block's {{component}} (source in {{blockDir}}), with the
+// other blocks of this app plugged into its slots. Edit freely: this file is yours.
+import { useRouter } from "next/navigation";
+import { ListsScreen } from "@/components/g8/lists/lists-screen";
+
+/** A list member opens in Contacts. */
+export default function Page() {
+  const router = useRouter();
+  return <ListsScreen onOpenContact={(id) => router.push(`/contacts?id=${id}`)} />;
+}

package/stacks/hubspot/pages/meetings.tsx.tmpl

@@ -0,0 +1,13 @@
+"use client";
+
+// Generated by `graph8-sdk create {{stackId}}`. The {{block}} block's {{component}} (source in {{blockDir}}), with the
+// other blocks of this app plugged into its slots. Edit freely: this file is yours.
+import { useRouter } from "next/navigation";
+import { MeetingContactLinks } from "@/components/g8/appointments/meeting-contact-links";
+import { MeetingsScreen } from "@/components/g8/appointments/meetings-screen";
+
+/** A meeting opens the attendees who are contacts in your CRM. */
+export default function Page() {
+  const router = useRouter();
+  return <MeetingsScreen renderDetailActions={(selection) => <MeetingContactLinks selection={selection} onOpenContact={(id) => router.push(`/contacts?id=${id}`)} />} />;
+}

package/stacks/hubspot/pages/quotes.tsx.tmpl

@@ -0,0 +1,11 @@
+"use client";
+
+// Generated by `graph8-sdk create {{stackId}}`. The {{block}} block's {{component}} (source in {{blockDir}}), with the
+// other blocks of this app plugged into its slots. Edit freely: this file is yours.
+import { useRouter } from "next/navigation";
+import { QuotesScreen } from "@/components/g8/quotes/quotes-screen";
+
+export default function Page() {
+  const router = useRouter();
+  return <QuotesScreen onOpenDeal={(dealId) => router.push(`/deals?id=${encodeURIComponent(dealId)}`)} />;
+}

package/stacks/hubspot/pages/sequences.tsx.tmpl

@@ -0,0 +1,12 @@
+"use client";
+
+// Generated by `graph8-sdk create {{stackId}}`. The {{block}} block's {{component}} (source in {{blockDir}}), with the
+// other blocks of this app plugged into its slots. Edit freely: this file is yours.
+import { useRouter } from "next/navigation";
+import { SequencesScreen } from "@/components/g8/sequencer/sequences-screen";
+
+/** An enrolled person opens in Contacts. */
+export default function Page() {
+  const router = useRouter();
+  return <SequencesScreen onOpenContact={(id) => router.push(`/contacts?id=${id}`)} />;
+}

package/stacks/hubspot/pages/tasks.tsx.tmpl

@@ -0,0 +1,20 @@
+"use client";
+
+// Generated by `graph8-sdk create {{stackId}}`. The {{block}} block's {{component}} (source in {{blockDir}}), with the
+// other blocks of this app plugged into its slots. Edit freely: this file is yours.
+import { useRouter } from "next/navigation";
+import { TasksScreen } from "@/components/g8/crm/tasks-screen";
+
+/** A task's linked record opens in the screen that owns it. */
+export default function Page() {
+  const router = useRouter();
+  return (
+    <TasksScreen
+      onOpenRecord={(record) => {
+        if (record.entity_type === "contact") router.push(`/contacts?id=${encodeURIComponent(record.entity_id)}`);
+        if (record.entity_type === "company") router.push(`/companies?id=${encodeURIComponent(record.entity_id)}`);
+    if (record.entity_type === "deal") router.push(`/deals?id=${encodeURIComponent(record.entity_id)}`);
+      }}
+    />
+  );
+}

package/stacks/hubspot.json

@@ -2,10 +2,11 @@
   "$schema": "./stack.schema.json",
   "id": "hubspot",
   "title": "HubSpot-style CRM and marketing",
-  "summary": "CRM with custom objects, forms, email and newsletters, nurture, web chat, meetings, landing pages, deals, quotes and workflows.",
+  "summary": "CRM with custom objects, forms, email, newsletters, nurture, campaigns, social and ads, web chat, meetings, pages, deals, quotes and workflows.",
   "status": "available",
   "blocks": [
     "foundation",
+    "pickers",
     "crm",
     "objects",
     "lists",
@@ -13,150 +14,266 @@
     "forms",
     "mailboxes",
     "sequencer",
+    "campaigns",
     "inbox",
     "newsletter",
     "nurture",
+    "surveys",
     "webchat",
     "appointments",
     "pages",
+    "social-ads",
     "lifecycle",
     "deals",
     "quotes",
     "analytics",
     "workflows"
   ],
+  "home": "/analytics",
   "nav": [
+    {
+      "label": "Analytics",
+      "path": "/analytics",
+      "block": "analytics",
+      "component": "AnalyticsScreen",
+      "icon": "BarChart3",
+      "group": "Insights",
+      "description": "Pipeline, engagement and team KPIs"
+    },
     {
       "label": "Contacts",
       "path": "/contacts",
       "block": "crm",
-      "component": "ContactTable"
+      "component": "ContactsScreen",
+      "icon": "Users",
+      "group": "Prospect",
+      "description": "People you sell to, with notes, tasks and activity",
+      "page": "pages/contacts.tsx.tmpl"
     },
     {
       "label": "Companies",
       "path": "/companies",
       "block": "crm",
-      "component": "CompanyTable"
-    },
-    {
-      "label": "Custom objects",
-      "path": "/objects",
-      "block": "objects",
-      "component": "ObjectSchemaEditor"
+      "component": "CompaniesScreen",
+      "icon": "Building2",
+      "group": "Prospect",
+      "description": "Accounts and the people at them",
+      "page": "pages/companies.tsx.tmpl"
     },
     {
       "label": "Lists",
       "path": "/lists",
       "block": "lists",
-      "component": "ListTable"
-    },
-    {
-      "label": "Suppressions",
-      "path": "/suppressions",
-      "block": "lists",
-      "component": "SuppressionManager"
+      "component": "ListsScreen",
+      "icon": "ListChecks",
+      "group": "Prospect",
+      "description": "Saved audiences you can sequence or sync",
+      "page": "pages/lists.tsx.tmpl"
     },
     {
       "label": "Visitors",
       "path": "/visitors",
       "block": "visitors",
-      "component": "VisitorFeed"
-    },
-    {
-      "label": "Forms",
-      "path": "/forms",
-      "block": "forms",
-      "component": "FormBuilder"
+      "component": "VisitorsScreen",
+      "icon": "Eye",
+      "group": "Signals",
+      "description": "Who is on your website right now"
     },
     {
-      "label": "Submissions",
-      "path": "/submissions",
-      "block": "forms",
-      "component": "SubmissionsTable"
+      "label": "Inbox",
+      "path": "/inbox",
+      "block": "inbox",
+      "component": "InboxScreen",
+      "icon": "Inbox",
+      "group": "Engage",
+      "description": "Replies from every channel in one place",
+      "page": "pages/inbox.tsx.tmpl"
     },
     {
-      "label": "Mailboxes",
-      "path": "/mailboxes",
-      "block": "mailboxes",
-      "component": "MailboxList"
+      "label": "Conversations",
+      "path": "/conversations",
+      "block": "webchat",
+      "component": "WebchatScreen",
+      "icon": "MessageCircle",
+      "group": "Engage",
+      "description": "Live chat with your website visitors"
     },
     {
       "label": "Sequences",
       "path": "/sequences",
       "block": "sequencer",
-      "component": "SequenceList"
+      "component": "SequencesScreen",
+      "icon": "Workflow",
+      "group": "Engage",
+      "description": "Multi-step outreach cadences",
+      "page": "pages/sequences.tsx.tmpl"
     },
     {
-      "label": "Inbox",
-      "path": "/inbox",
-      "block": "inbox",
-      "component": "InboxList"
+      "label": "Meetings",
+      "path": "/meetings",
+      "block": "appointments",
+      "component": "MeetingsScreen",
+      "icon": "CalendarCheck",
+      "group": "Engage",
+      "description": "Booked, held and missed meetings",
+      "page": "pages/meetings.tsx.tmpl"
     },
     {
-      "label": "Newsletter",
-      "path": "/newsletter",
-      "block": "newsletter",
-      "component": "NewsletterEditor"
+      "label": "Scheduling",
+      "path": "/scheduling",
+      "block": "appointments",
+      "component": "SchedulingScreen",
+      "icon": "CalendarClock",
+      "group": "Setup",
+      "description": "Booking links and event types"
+    },
+    {
+      "label": "Campaigns",
+      "path": "/campaigns",
+      "block": "campaigns",
+      "component": "CampaignsScreen",
+      "icon": "Rocket",
+      "group": "Engage",
+      "description": "Campaigns from brief to launch"
     },
     {
-      "label": "Subscribers",
-      "path": "/subscribers",
+      "label": "Newsletter",
+      "path": "/newsletter",
       "block": "newsletter",
-      "component": "SubscriberTable"
+      "component": "NewsletterScreen",
+      "icon": "Newspaper",
+      "group": "Marketing",
+      "description": "Write, send and measure issues"
     },
     {
       "label": "Nurture",
       "path": "/nurture",
       "block": "nurture",
-      "component": "NurtureBuilder"
+      "component": "NurtureScreen",
+      "icon": "Sprout",
+      "group": "Marketing",
+      "description": "Automated nurture tracks"
     },
     {
-      "label": "Conversations",
-      "path": "/conversations",
-      "block": "webchat",
-      "component": "ConversationList"
+      "label": "Surveys",
+      "path": "/surveys",
+      "block": "surveys",
+      "component": "SurveysScreen",
+      "icon": "ClipboardCheck",
+      "group": "Marketing",
+      "description": "NPS and CSAT: ask, score and read the answers"
     },
     {
-      "label": "Meetings",
-      "path": "/meetings",
-      "block": "appointments",
-      "component": "MeetingList"
+      "label": "Forms",
+      "path": "/forms",
+      "block": "forms",
+      "component": "FormsScreen",
+      "icon": "ClipboardList",
+      "group": "Marketing",
+      "description": "Forms and their submissions"
     },
     {
       "label": "Pages",
       "path": "/pages",
       "block": "pages",
-      "component": "PageList"
+      "component": "PagesScreen",
+      "icon": "LayoutTemplate",
+      "group": "Marketing",
+      "description": "Landing pages, brand kit and content"
     },
     {
-      "label": "Lifecycle",
-      "path": "/lifecycle",
-      "block": "lifecycle",
-      "component": "LifecycleBoard"
+      "label": "Social",
+      "path": "/social",
+      "block": "social-ads",
+      "component": "SocialScreen",
+      "icon": "Share2",
+      "group": "Marketing",
+      "description": "Plan and publish social posts"
+    },
+    {
+      "label": "Ads",
+      "path": "/ads",
+      "block": "social-ads",
+      "component": "AdsScreen",
+      "icon": "Megaphone",
+      "group": "Marketing",
+      "description": "Ad campaigns and spend"
     },
     {
       "label": "Deals",
       "path": "/deals",
       "block": "deals",
-      "component": "PipelineBoard"
+      "component": "DealsScreen",
+      "icon": "Handshake",
+      "group": "Pipeline",
+      "description": "Pipeline board, forecast and deal detail",
+      "page": "pages/deals.tsx.tmpl"
     },
     {
       "label": "Quotes",
       "path": "/quotes",
       "block": "quotes",
-      "component": "QuoteList"
+      "component": "QuotesScreen",
+      "icon": "FileText",
+      "group": "Pipeline",
+      "description": "Build, send and track quotes",
+      "page": "pages/quotes.tsx.tmpl"
     },
     {
-      "label": "Analytics",
-      "path": "/analytics",
-      "block": "analytics",
-      "component": "KpiTiles"
+      "label": "Lifecycle",
+      "path": "/lifecycle",
+      "block": "lifecycle",
+      "component": "LifecycleScreen",
+      "icon": "GitBranch",
+      "group": "Pipeline",
+      "description": "Move records through lifecycle stages",
+      "page": "pages/lifecycle.tsx.tmpl"
+    },
+    {
+      "label": "Tasks",
+      "path": "/tasks",
+      "block": "crm",
+      "component": "TasksScreen",
+      "icon": "CheckSquare",
+      "group": "Work",
+      "description": "Follow-ups due across your records",
+      "page": "pages/tasks.tsx.tmpl"
     },
     {
       "label": "Workflows",
       "path": "/workflows",
       "block": "workflows",
-      "component": "WorkflowList"
+      "component": "WorkflowsScreen",
+      "icon": "Zap",
+      "group": "Automation",
+      "description": "Triggered automations"
+    },
+    {
+      "label": "Custom objects",
+      "path": "/objects",
+      "block": "objects",
+      "component": "ObjectsScreen",
+      "icon": "Boxes",
+      "group": "Setup",
+      "description": "Define your own record types and fields"
+    },
+    {
+      "label": "Mailboxes",
+      "path": "/mailboxes",
+      "block": "mailboxes",
+      "component": "MailboxesScreen",
+      "icon": "Mail",
+      "group": "Setup",
+      "description": "Sending mailboxes and warmup health"
+    },
+    {
+      "label": "Suppressions",
+      "path": "/suppressions",
+      "block": "lists",
+      "component": "SuppressionsScreen",
+      "icon": "ShieldOff",
+      "group": "Setup",
+      "description": "People and domains you never contact"
     }
   ]
 }

package/stacks/intercom/pages/companies.tsx.tmpl

@@ -0,0 +1,19 @@
+"use client";
+
+// Generated by `graph8-sdk create {{stackId}}`. The {{block}} block's {{component}} (source in {{blockDir}}), with the
+// other blocks of this app plugged into its slots. Edit freely: this file is yours.
+import { CompaniesScreen } from "@/components/g8/crm/companies-screen";
+import { RecordEngagementTab } from "@/components/g8/crm/record-engagement-tab";
+import { useRouter } from "next/navigation";
+
+export default function Page() {
+  const router = useRouter();
+  return (
+    <CompaniesScreen
+      onOpenContact={(contact) => router.push(`/contacts?id=${contact.id}`)}
+      extraDetailTabs={[
+        { id: "engagement", label: "Engagement", render: (c) => <RecordEngagementTab kind="companies" id={c.id} /> },
+      ]}
+    />
+  );
+}

package/stacks/intercom/pages/contacts.tsx.tmpl

@@ -0,0 +1,21 @@
+"use client";
+
+// Generated by `graph8-sdk create {{stackId}}`. The {{block}} block's {{component}} (source in {{blockDir}}), with the
+// other blocks of this app plugged into its slots. Edit freely: this file is yours.
+import { ContactsScreen } from "@/components/g8/crm/contacts-screen";
+import { RecordEngagementTab } from "@/components/g8/crm/record-engagement-tab";
+import { RecordConversationsTab } from "@/components/g8/inbox/record-conversations-tab";
+import { useRouter } from "next/navigation";
+
+export default function Page() {
+  const router = useRouter();
+  return (
+    <ContactsScreen
+      onOpenCompany={(id) => router.push(`/companies?id=${id}`)}
+      extraDetailTabs={[
+        { id: "conversations", label: "Conversations", render: (c) => <RecordConversationsTab email={c.work_email} alsoEmails={[c.personal_emails]} onOpenThread={(sel) => router.push(`/inbox?id=${encodeURIComponent(sel)}`)} /> },
+        { id: "engagement", label: "Engagement", render: (c) => <RecordEngagementTab kind="contacts" id={c.id} /> },
+      ]}
+    />
+  );
+}

package/stacks/intercom/pages/inbox-contact.tsx.tmpl

@@ -0,0 +1,13 @@
+"use client";
+
+// Generated by `graph8-sdk create {{stackId}}`. The {{block}} block's {{component}} (source in {{blockDir}}), with the
+// other blocks of this app plugged into its slots. Edit freely: this file is yours.
+import { useRouter } from "next/navigation";
+import { ContactLookupLink } from "@/components/g8/crm/contact-lookup-link";
+import { InboxScreen } from "@/components/g8/inbox/inbox-screen";
+
+/** A conversation opens the sender when they are a contact in your CRM. */
+export default function Page() {
+  const router = useRouter();
+  return <InboxScreen renderDetailActions={(thread) => <ContactLookupLink email={thread.contact?.email} onOpen={(id) => router.push(`/contacts?id=${id}`)} />} />;
+}

package/stacks/intercom/pages/tasks.tsx.tmpl

@@ -0,0 +1,19 @@
+"use client";
+
+// Generated by `graph8-sdk create {{stackId}}`. The {{block}} block's {{component}} (source in {{blockDir}}), with the
+// other blocks of this app plugged into its slots. Edit freely: this file is yours.
+import { useRouter } from "next/navigation";
+import { TasksScreen } from "@/components/g8/crm/tasks-screen";
+
+/** A task's linked record opens in the screen that owns it. */
+export default function Page() {
+  const router = useRouter();
+  return (
+    <TasksScreen
+      onOpenRecord={(record) => {
+        if (record.entity_type === "contact") router.push(`/contacts?id=${encodeURIComponent(record.entity_id)}`);
+        if (record.entity_type === "company") router.push(`/companies?id=${encodeURIComponent(record.entity_id)}`);
+      }}
+    />
+  );
+}