feat(sql-editor): ai query on welcome page

studio/components/interfaces/SQLEditor/SQLTemplates/SQLTemplates.tsx

@@ -11,6 +11,7 @@ import { useProfile } from 'lib/profile'
 import Telemetry from 'lib/telemetry'
 import { useRouter } from 'next/router'
 import { useSqlEditorStateSnapshot } from 'state/sql-editor'
+import { AiIcon, IconCornerDownLeft, Input } from 'ui'
 import { createSqlSnippetSkeleton } from '../SQLEditor.utils'
 import SQLCard from './SQLCard'
 
@@ -54,6 +55,23 @@ const SQLTemplates = observer(() => {
 
   return (
     <div className="block h-full space-y-8 overflow-y-auto p-6">
+      <div className="mt-32 mb-32 flex flex-col items-center">
+        <h1 className="text-scale-1200 mb-8 text-3xl">What do you want to build?</h1>
+        <Input
+          size="xlarge"
+          inputRef={(inputElement: HTMLInputElement) => inputElement?.focus()}
+          icon={<AiIcon className="w-4 h-4 ml-1" />}
+          inputClassName=" w-full !border-brand-900 py-4"
+          iconContainerClassName="transition text-scale-800 text-brand-900"
+          placeholder="Ask Supabase AI to build a query"
+          className="w-full max-w-2xl"
+          actions={
+            <div className="flex items-center space-x-1 mr-6">
+              <IconCornerDownLeft size={16} strokeWidth={1.5} />
+            </div>
+          }
+        />
+      </div>
       <div>
         <div className="mb-4">
           <h1 className="text-scale-1200 mb-3 text-xl">Scripts</h1>