MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Extract component

This commit is contained in:
Adria Navarro 2025-04-11 11:50:47 +02:00
parent 5621228e37
commit 265881519b
2 changed files with 46 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
packages/builder/src/pages/builder/app/[application]/data/_components/AITableGeneration.svelte Normal file
View File

@ -0,0 +1,43 @@
<script>
import { Input } from "@budibase/bbui"
</script>
<div class="ai-generation">
<div class="ai-generation-prompt">
<Input placeholder="Generate data using AI..." />
</div>
<div class="ai-generation-prompt-example">
Create a table called tickets with title, description, status fields
</div>
<div class="ai-generation-prompt-example">
Create a table called students with name and address fields
</div>
</div>
<style>
.ai-generation {
max-width: 753px;
display: grid;
gap: 10px;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
margin-bottom: 36px;
}
.ai-generation-prompt {
grid-column: 1 / -1;
}
.ai-generation-prompt :global(.spectrum-Textfield-input) {
background: #1d1d1d;
border-radius: 20px;
}
.ai-generation-prompt-example {
padding: 2px 8px;
gap: 10px;
border: 1px solid #393939;
border-radius: 14px;
}
</style>

41
packages/builder/src/pages/builder/app/[application]/data/new.svelte
View File

@ -7,7 +7,7 @@
} from "@/stores/builder"
import { hasData } from "@/stores/selectors"
import { notifications, Body, Icon, AbsTooltip, Input } from "@budibase/bbui"
import { notifications, Body, Icon, AbsTooltip } from "@budibase/bbui"
import { params, goto } from "@roxi/routify"
import CreateExternalDatasourceModal from "./_components/CreateExternalDatasourceModal/index.svelte"
import CreateInternalTableModal from "./_components/CreateInternalTableModal.svelte"
@ -15,6 +15,7 @@
import IntegrationIcon from "@/components/backend/DatasourceNavigator/IntegrationIcon.svelte"
import CreationPage from "@/components/common/CreationPage.svelte"
import ICONS from "@/components/backend/DatasourceNavigator/icons/index.js"
import AiTableGeneration from "./_components/AITableGeneration.svelte"
let internalTableModal
let externalDatasourceModal
@ -57,17 +58,7 @@
<Icon name="Info" size="S" />
</AbsTooltip>
</div>
<div class="ai-generation">
<div class="ai-generation-prompt">
<Input placeholder="Generate data using AI..." />
</div>
<div class="ai-generation-prompt-example">
Create a table called tickets with title, description, status fields
</div>
<div class="ai-generation-prompt-example">
Create a table called students with name and address fields
</div>
</div>
<AiTableGeneration />
<div class="options">
<DatasourceOption
@ -138,30 +129,4 @@
margin-bottom: 48px;
max-width: 1050px;
}
.ai-generation {
max-width: 753px;
display: grid;
gap: 10px;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
margin-bottom: 36px;
}
.ai-generation-prompt {
grid-column: 1 / -1;
}
.ai-generation-prompt :global(.spectrum-Textfield-input) {
background: #1d1d1d;
border-radius: 20px;
}
.ai-generation-prompt-example {
padding: 2px 8px;
gap: 10px;
border: 1px solid #393939;
border-radius: 14px;
}
</style>