✨ (theme) Add theme templates

Allows you to save your themes and select a theme from Typebot's gallery

Closes #275

apps/builder/src/features/theme/components/ThemeTemplates.tsx

@@ -0,0 +1,86 @@
+import { Button, HStack, Stack } from '@chakra-ui/react'
+import { ThemeTemplate } from '@typebot.io/schemas'
+import { useState } from 'react'
+import { MyTemplates } from './MyTemplates'
+import { TemplatesGallery } from './TemplatesGallery'
+
+type Tab = 'my-templates' | 'gallery'
+
+type Props = {
+  workspaceId: string
+  selectedTemplateId: string | undefined
+  currentTheme: ThemeTemplate['theme']
+  onTemplateSelect: (
+    template: Partial<Pick<ThemeTemplate, 'id' | 'theme'>>
+  ) => void
+}
+
+export const ThemeTemplates = ({
+  workspaceId,
+  selectedTemplateId,
+  currentTheme,
+  onTemplateSelect,
+}: Props) => {
+  const [selectedTab, setSelectedTab] = useState<Tab>('my-templates')
+
+  return (
+    <Stack spacing={4} pb={12}>
+      <HStack>
+        <Button
+          flex="1"
+          variant="outline"
+          colorScheme={selectedTab === 'my-templates' ? 'blue' : 'gray'}
+          onClick={() => setSelectedTab('my-templates')}
+        >
+          My templates
+        </Button>
+        <Button
+          flex="1"
+          variant="outline"
+          colorScheme={selectedTab === 'gallery' ? 'blue' : 'gray'}
+          onClick={() => setSelectedTab('gallery')}
+        >
+          Gallery
+        </Button>
+      </HStack>
+      <ThemeTemplatesBody
+        tab={selectedTab}
+        currentTheme={currentTheme}
+        workspaceId={workspaceId}
+        selectedTemplateId={selectedTemplateId}
+        onTemplateSelect={onTemplateSelect}
+      />
+    </Stack>
+  )
+}
+
+const ThemeTemplatesBody = ({
+  tab,
+  workspaceId,
+  selectedTemplateId,
+  currentTheme,
+  onTemplateSelect,
+}: {
+  tab: Tab
+} & Props) => {
+  switch (tab) {
+    case 'my-templates':
+      return (
+        <MyTemplates
+          onTemplateSelect={onTemplateSelect}
+          currentTheme={currentTheme}
+          selectedTemplateId={selectedTemplateId}
+          workspaceId={workspaceId}
+        />
+      )
+    case 'gallery':
+      return (
+        <TemplatesGallery
+          onTemplateSelect={onTemplateSelect}
+          currentTheme={currentTheme}
+          selectedTemplateId={selectedTemplateId}
+          workspaceId={workspaceId}
+        />
+      )
+  }
+}