CodeCow/typebot.io
1
0
Fork 0
mirror of https://github.com/baptisteArno/typebot.io.git synced 2026-06-19 21:04:33 +08:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

💄 Enhance UI for create typebot and duplicate typebot pages

Browse Source
This commit is contained in:
Baptiste Arnaud 2025-02-08 15:06:16 +01:00
parent f20a2ed9c3
commit 868dc533ca
No known key found for this signature in database
2 changed files with 113 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

119
apps/builder/src/features/templates/components/CreateNewTypebotButtons.tsx
View File

@ -95,61 +95,72 @@ export const CreateNewTypebotButtons = () => {
};
return (
<VStack maxW="600px" w="full" flex="1" pt="20" spacing={10}>
<Heading>{t("templates.buttons.heading")}</Heading>
<Stack w="full" spacing={6}>
<Button
variant="outline"
w="full"
py="8"
fontSize="lg"
leftIcon={
<ToolIcon
color={useColorModeValue("blue.500", "blue.300")}
boxSize="25px"
mr="2"
/>
}
onClick={() => handleCreateSubmit()}
isLoading={isLoading}
>
{t("templates.buttons.fromScratchButton.label")}
</Button>
<Button
variant="outline"
w="full"
py="8"
fontSize="lg"
leftIcon={
<TemplateIcon
color={useColorModeValue("orange.500", "orange.300")}
boxSize="25px"
mr="2"
/>
}
onClick={onOpen}
isLoading={isLoading}
>
{t("templates.buttons.fromTemplateButton.label")}
</Button>
<ImportTypebotFromFileButton
variant="outline"
w="full"
py="8"
fontSize="lg"
leftIcon={
<DownloadIcon
color={useColorModeValue("purple.500", "purple.300")}
boxSize="25px"
mr="2"
/>
}
isLoading={isLoading}
onNewTypebot={handleCreateSubmit}
>
{t("templates.buttons.importFileButton.label")}
</ImportTypebotFromFileButton>
<VStack w="full" pt="20" spacing={10}>
<Stack
w="full"
maxW="650px"
p="10"
gap={10}
rounded="lg"
borderWidth={1}
bgColor={useColorModeValue("white", "gray.900")}
>
<Heading>{t("templates.buttons.heading")}</Heading>
<Stack w="full" spacing={6}>
<Button
variant="outline"
w="full"
py="8"
fontSize="lg"
leftIcon={
<ToolIcon
color={useColorModeValue("blue.500", "blue.300")}
boxSize="25px"
mr="2"
/>
}
onClick={() => handleCreateSubmit()}
isLoading={isLoading}
>
{t("templates.buttons.fromScratchButton.label")}
</Button>
<Button
variant="outline"
w="full"
py="8"
fontSize="lg"
leftIcon={
<TemplateIcon
color={useColorModeValue("orange.500", "orange.300")}
boxSize="25px"
mr="2"
/>
}
onClick={onOpen}
isLoading={isLoading}
>
{t("templates.buttons.fromTemplateButton.label")}
</Button>
<ImportTypebotFromFileButton
variant="outline"
w="full"
py="8"
fontSize="lg"
leftIcon={
<DownloadIcon
color={useColorModeValue("purple.500", "purple.300")}
boxSize="25px"
mr="2"
/>
}
isLoading={isLoading}
onNewTypebot={handleCreateSubmit}
>
{t("templates.buttons.importFileButton.label")}
</ImportTypebotFromFileButton>
</Stack>
</Stack>
<TemplatesModal
isOpen={isOpen}
onClose={onClose}

88
apps/builder/src/pages/typebots/[typebotId]/duplicate.tsx
View File

@ -5,7 +5,13 @@ import { PlanTag } from "@/features/billing/components/PlanTag";
import { useTypebot } from "@/features/editor/providers/TypebotProvider";
import { useWorkspace } from "@/features/workspace/WorkspaceProvider";
import { trpc } from "@/lib/trpc";
import { Button, HStack, Stack, Text } from "@chakra-ui/react";
import {
Button,
HStack,
Stack,
Text,
useColorModeValue,
} from "@chakra-ui/react";
import { useRouter } from "next/router";
import { useState } from "react";
@ -29,46 +35,48 @@ const Page = () => {
};
return (
<Stack
w="full"
justifyContent="center"
pt="10"
h="100vh"
maxW="350px"
mx="auto"
spacing={4}
>
<Text>
Choose a workspace to duplicate <strong>{typebot?.name}</strong> in:
</Text>
<RadioButtons
direction="column"
options={workspaces?.map((workspace) => ({
value: workspace.id,
label: (
<HStack w="full">
<EmojiOrImageIcon
icon={workspace.icon}
boxSize="16px"
defaultIcon={HardDriveIcon}
/>
<Text>{workspace.name}</Text>
<PlanTag plan={workspace.plan} />
</HStack>
),
}))}
value={selectedWorkspaceId}
onSelect={updateSelectedWorkspaceId}
/>
<Button
isDisabled={!selectedWorkspaceId}
onClick={() => duplicateTypebot(selectedWorkspaceId as string)}
isLoading={isLoading}
colorScheme="orange"
size="sm"
<Stack w="full" justifyContent="center" pt="10" h="100vh">
<Stack
bgColor={useColorModeValue("white", "gray.900")}
spacing={4}
maxW="400px"
mx="auto"
p="6"
rounded="lg"
borderWidth={1}
>
Duplicate
</Button>
<Text>
Choose a workspace to duplicate <strong>{typebot?.name}</strong> in:
</Text>
<RadioButtons
direction="column"
options={workspaces?.map((workspace) => ({
value: workspace.id,
label: (
<HStack w="full">
<EmojiOrImageIcon
icon={workspace.icon}
boxSize="16px"
defaultIcon={HardDriveIcon}
/>
<Text>{workspace.name}</Text>
<PlanTag plan={workspace.plan} />
</HStack>
),
}))}
value={selectedWorkspaceId}
onSelect={updateSelectedWorkspaceId}
/>
<Button
isDisabled={!selectedWorkspaceId}
onClick={() => duplicateTypebot(selectedWorkspaceId as string)}
isLoading={isLoading}
colorScheme="orange"
size="sm"
>
Duplicate
</Button>
</Stack>
</Stack>
);
};