add pricing section

apps/studio/components/interfaces/LogDrains/LogDrainDestinationSheetForm.tsx

@@ -211,7 +211,7 @@ export function LogDrainDestinationSheetForm({
         <SheetHeader>
           <SheetTitle>Add destination</SheetTitle>
         </SheetHeader>
-        <SheetSection className="!px-0">
+        <SheetSection className="!px-0 !pb-0">
           <Form_Shadcn_ {...form}>
             <form
               id={FORM_ID}
@@ -326,14 +326,14 @@ export function LogDrainDestinationSheetForm({
                       )}
                     /> */}
 
-                    <div className="space-y-2">
-                      <div className="px-content">
+                    <div className="border-t">
+                      <div className="px-content pt-2 pb-3 border-b bg-background-alternative-200">
                         <FormLabel_Shadcn_>Custom Headers</FormLabel_Shadcn_>
                         <p className="text-xs text-foreground-lighter">
                           Set custom headers when draining logs to the Endpoint URL
                         </p>
                       </div>
-                      <div className="divide-y border-y">
+                      <div className="divide-y">
                         {hasHeaders &&
                           Object.keys(headers || {})?.map((headerKey) => (
                             <div
@@ -421,7 +421,7 @@ export function LogDrainDestinationSheetForm({
                 e.stopPropagation()
                 addHeader()
               }}
-              className="flex gap-2 mt-4 items-center px-content"
+              className="flex border-t py-4 gap-4 items-center px-content"
             >
               <label className="sr-only" htmlFor="header-name">
                 Header name
@@ -451,7 +451,26 @@ export function LogDrainDestinationSheetForm({
           )}
         </SheetSection>
 
-        <SheetSection></SheetSection>
+        <SheetSection className="border-t mt-4 bg-background-alternative-200">
+          <FormItemLayout
+            isReactForm={false}
+            layout="horizontal"
+            label={
+              <div className="text-foreground-light">
+                Additional drain cost
+                <div className="text-foreground-lighter mt-2">
+                  <Link href="/">Documentation</Link>
+                </div>
+              </div>
+            }
+          >
+            <ul className="text-right text-foreground-light">
+              <li className="text-brand-link text-base">$60 / drain / month</li>
+              <li>$0.20 per million events</li>
+              <li>$0.09 per GB</li>
+            </ul>
+          </FormItemLayout>
+        </SheetSection>
 
         <SheetFooter className="p-content">
           <Button form={FORM_ID} loading={isLoading} htmlType="submit" type="primary">