mirror of https://github.com/nocodb/nocodb
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
105 lines
3.1 KiB
105 lines
3.1 KiB
2 weeks ago
|
<script lang="ts" setup>
|
||
|
import NcCreateBasePlaceholder from '~icons/nc-icons/create-base-placeholder'
|
||
|
import NcCreateBaseWithAiPlaceholder from '~icons/nc-icons/create-base-with-ai-placeholder'
|
||
|
|
||
|
interface Props {
|
||
|
aiMode: boolean | null
|
||
|
}
|
||
|
const props = withDefaults(defineProps<Props>(), {})
|
||
|
|
||
|
const emit = defineEmits(['update:aiMode'])
|
||
|
|
||
|
const aiMode = useVModel(props, 'aiMode', emit)
|
||
|
|
||
|
const { isFeatureEnabled } = useBetaFeatureToggle()
|
||
|
|
||
|
onMounted(() => {
|
||
|
if (!isFeatureEnabled(FEATURE_FLAG.AI_FEATURES)) {
|
||
|
aiMode.value = false
|
||
|
}
|
||
|
})
|
||
|
</script>
|
||
|
|
||
|
<template>
|
||
|
<div v-if="isFeatureEnabled(FEATURE_FLAG.AI_FEATURES)" class="nc-create-base-wrapper">
|
||
|
<div v-e="['c:base:create-blank']" class="nc-create-base" @click="aiMode = false">
|
||
|
<div class="nc-placeholder-icon-wrapper">
|
||
|
<component :is="NcCreateBasePlaceholder" class="nc-placeholder-icon stroke-transparent" />
|
||
|
</div>
|
||
|
<div class="nc-create-base-content">
|
||
|
<div class="nc-create-base-content-title">
|
||
|
<GeneralIcon icon="plus" class="h-4 w-4 !text-nc-content-gray-subtle" />
|
||
|
Start from scratch
|
||
|
</div>
|
||
|
<div class="nc-create-base-content-subtitle">Build your Base according to your specific requirements.</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
<div v-e="['c:base:build-with-ai']" class="nc-create-base-ai" @click="aiMode = true">
|
||
|
<div class="nc-placeholder-icon-wrapper">
|
||
|
<component :is="NcCreateBaseWithAiPlaceholder" class="nc-placeholder-icon stroke-transparent" />
|
||
|
</div>
|
||
|
<div class="nc-create-base-content">
|
||
|
<div class="nc-create-base-content-title">
|
||
|
<GeneralIcon icon="ncAutoAwesome" class="h-4 w-4 !text-nc-fill-purple-dark" />
|
||
|
Build Base with AI
|
||
|
</div>
|
||
|
<div class="nc-create-base-content-subtitle">Quickly build your ideal Base with all tables, views and fields.</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</template>
|
||
|
|
||
|
<style lang="scss" scoped>
|
||
|
.nc-create-base-wrapper {
|
||
|
@apply flex gap-4;
|
||
|
|
||
|
& > div {
|
||
|
@apply rounded-xl flex flex-col border-1 w-[288px] overflow-hidden cursor-pointer transition-all;
|
||
|
|
||
|
.nc-placeholder-icon-wrapper {
|
||
|
@apply border-b-1 h-[180px] flex items-center justify-center;
|
||
|
|
||
|
.nc-placeholder-icon {
|
||
|
@apply flex-none;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
&.nc-create-base {
|
||
|
@apply border-brand-200;
|
||
|
|
||
|
&:hover {
|
||
|
box-shadow: 0px 12px 16px -4px rgba(51, 102, 255, 0.12), 0px 4px 6px -2px rgba(51, 102, 255, 0.08);
|
||
|
}
|
||
|
|
||
|
.nc-placeholder-icon-wrapper {
|
||
|
@apply border-brand-200 bg-nc-bg-brand;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
&.nc-create-base-ai {
|
||
|
@apply border-purple-200;
|
||
|
|
||
|
&:hover {
|
||
|
box-shadow: 0px 12px 16px -4px rgba(125, 38, 205, 0.12), 0px 4px 6px -2px rgba(125, 38, 205, 0.08);
|
||
|
}
|
||
|
|
||
|
.nc-placeholder-icon-wrapper {
|
||
|
@apply border-purple-200 bg-nc-bg-purple-light;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.nc-create-base-content {
|
||
|
@apply px-4 py-3 flex flex-col gap-2;
|
||
|
|
||
|
.nc-create-base-content-title {
|
||
|
@apply flex items-center gap-2 text-base text-nc-content-gray font-bold;
|
||
|
}
|
||
|
|
||
|
.nc-create-base-content-subtitle {
|
||
|
@apply text-small leading-[18px] text-nc-content-gray-muted;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
</style>
|