create-chaaskit 0.1.0 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (62) hide show
  1. package/LICENSE +21 -0
  2. package/dist/commands/init.js +5 -0
  3. package/dist/commands/init.js.map +1 -1
  4. package/dist/index.js +1 -1
  5. package/dist/templates/app/root.tsx +26 -14
  6. package/dist/templates/app/routes/chat.admin.promo-codes.tsx +10 -0
  7. package/dist/templates/app/routes/chat.admin.waitlist.tsx +10 -0
  8. package/dist/templates/app/routes.ts +2 -0
  9. package/dist/templates/app/styles/app.css +9 -0
  10. package/dist/templates/config/app.config.ts +29 -80
  11. package/dist/templates/package.json +8 -5
  12. package/dist/templates/postcss.config.js +6 -0
  13. package/dist/templates/server.js +40 -10
  14. package/dist/templates/tailwind.config.ts +76 -0
  15. package/package.json +19 -10
  16. package/dist/cli.d.ts +0 -3
  17. package/dist/cli.d.ts.map +0 -1
  18. package/dist/cli.js +0 -25
  19. package/dist/cli.js.map +0 -1
  20. package/dist/templates/app/components/AcceptInviteClient.tsx +0 -10
  21. package/dist/templates/app/components/AdminDashboardClient.tsx +0 -10
  22. package/dist/templates/app/components/AdminTeamClient.tsx +0 -10
  23. package/dist/templates/app/components/AdminTeamsClient.tsx +0 -10
  24. package/dist/templates/app/components/AdminUsersClient.tsx +0 -10
  25. package/dist/templates/app/components/ApiKeysClient.tsx +0 -10
  26. package/dist/templates/app/components/AutomationsClient.tsx +0 -10
  27. package/dist/templates/app/components/ChatClient.tsx +0 -13
  28. package/dist/templates/app/components/DocumentsClient.tsx +0 -10
  29. package/dist/templates/app/components/OAuthConsentClient.tsx +0 -10
  30. package/dist/templates/app/components/PricingClient.tsx +0 -10
  31. package/dist/templates/app/components/TeamSettingsClient.tsx +0 -10
  32. package/dist/templates/app/components/VerifyEmailClient.tsx +0 -10
  33. package/dist/templates/app/routes/admin._index.tsx +0 -57
  34. package/dist/templates/app/routes/admin.teams.$teamId.tsx +0 -57
  35. package/dist/templates/app/routes/admin.teams._index.tsx +0 -57
  36. package/dist/templates/app/routes/admin.users.tsx +0 -57
  37. package/dist/templates/app/routes/api-keys.tsx +0 -57
  38. package/dist/templates/app/routes/automations.tsx +0 -57
  39. package/dist/templates/app/routes/documents.tsx +0 -57
  40. package/dist/templates/app/routes/team.$teamId.settings.tsx +0 -57
  41. package/dist/templates/app/routes/thread.$threadId.tsx +0 -102
  42. package/dist/templates/docs/admin.md +0 -257
  43. package/dist/templates/docs/api-keys.md +0 -403
  44. package/dist/templates/docs/authentication.md +0 -247
  45. package/dist/templates/docs/configuration.md +0 -1212
  46. package/dist/templates/docs/custom-pages.md +0 -466
  47. package/dist/templates/docs/deployment.md +0 -362
  48. package/dist/templates/docs/development.md +0 -411
  49. package/dist/templates/docs/documents.md +0 -293
  50. package/dist/templates/docs/extensions.md +0 -639
  51. package/dist/templates/docs/index.md +0 -139
  52. package/dist/templates/docs/installation.md +0 -286
  53. package/dist/templates/docs/mcp.md +0 -952
  54. package/dist/templates/docs/native-tools.md +0 -688
  55. package/dist/templates/docs/queue.md +0 -514
  56. package/dist/templates/docs/scheduled-prompts.md +0 -279
  57. package/dist/templates/docs/settings.md +0 -415
  58. package/dist/templates/docs/slack.md +0 -318
  59. package/dist/templates/docs/styling.md +0 -288
  60. package/dist/templates/index.html +0 -16
  61. package/dist/templates/prisma/schema.prisma +0 -271
  62. package/dist/templates/src/main.tsx +0 -8
package/dist/cli.js DELETED
@@ -1,25 +0,0 @@
1
- #!/usr/bin/env node
2
- import { Command } from 'commander';
3
- import { dev } from './commands/dev.js';
4
- import { build } from './commands/build.js';
5
- const program = new Command();
6
- program
7
- .name('chat-saas')
8
- .description('CLI for managing Chat SaaS applications')
9
- .version('0.1.0');
10
- program
11
- .command('dev')
12
- .description('Start development servers')
13
- .option('-p, --port <port>', 'Server port', '3000')
14
- .option('--client-port <port>', 'Client dev server port', '5173')
15
- .action(async (options) => {
16
- await dev(options);
17
- });
18
- program
19
- .command('build')
20
- .description('Build for production')
21
- .action(async () => {
22
- await build();
23
- });
24
- program.parse();
25
- //# sourceMappingURL=cli.js.map
package/dist/cli.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"cli.js","sourceRoot":"","sources":["../src/cli.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAE5C,MAAM,OAAO,GAAG,IAAI,OAAO,EAAE,CAAC;AAE9B,OAAO;KACJ,IAAI,CAAC,WAAW,CAAC;KACjB,WAAW,CAAC,yCAAyC,CAAC;KACtD,OAAO,CAAC,OAAO,CAAC,CAAC;AAEpB,OAAO;KACJ,OAAO,CAAC,KAAK,CAAC;KACd,WAAW,CAAC,2BAA2B,CAAC;KACxC,MAAM,CAAC,mBAAmB,EAAE,aAAa,EAAE,MAAM,CAAC;KAClD,MAAM,CAAC,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,CAAC;KAChE,MAAM,CAAC,KAAK,EAAE,OAAO,EAAE,EAAE;IACxB,MAAM,GAAG,CAAC,OAAO,CAAC,CAAC;AACrB,CAAC,CAAC,CAAC;AAEL,OAAO;KACJ,OAAO,CAAC,OAAO,CAAC;KAChB,WAAW,CAAC,sBAAsB,CAAC;KACnC,MAAM,CAAC,KAAK,IAAI,EAAE;IACjB,MAAM,KAAK,EAAE,CAAC;AAChB,CAAC,CAAC,CAAC;AAEL,OAAO,CAAC,KAAK,EAAE,CAAC"}
@@ -1,10 +0,0 @@
1
- // Client-only component for Accept Invite page
2
- import { ChatProviders, AcceptInvitePage } from '@chaaskit/client';
3
-
4
- export default function AcceptInviteClient() {
5
- return (
6
- <ChatProviders>
7
- <AcceptInvitePage />
8
- </ChatProviders>
9
- );
10
- }
@@ -1,10 +0,0 @@
1
- // Client-only component for Admin Dashboard page
2
- import { ChatProviders, AdminDashboardPage } from '@chaaskit/client';
3
-
4
- export default function AdminDashboardClient() {
5
- return (
6
- <ChatProviders>
7
- <AdminDashboardPage />
8
- </ChatProviders>
9
- );
10
- }
@@ -1,10 +0,0 @@
1
- // Client-only component for Admin Team detail page
2
- import { ChatProviders, AdminTeamPage } from '@chaaskit/client';
3
-
4
- export default function AdminTeamClient() {
5
- return (
6
- <ChatProviders>
7
- <AdminTeamPage />
8
- </ChatProviders>
9
- );
10
- }
@@ -1,10 +0,0 @@
1
- // Client-only component for Admin Teams page
2
- import { ChatProviders, AdminTeamsPage } from '@chaaskit/client';
3
-
4
- export default function AdminTeamsClient() {
5
- return (
6
- <ChatProviders>
7
- <AdminTeamsPage />
8
- </ChatProviders>
9
- );
10
- }
@@ -1,10 +0,0 @@
1
- // Client-only component for Admin Users page
2
- import { ChatProviders, AdminUsersPage } from '@chaaskit/client';
3
-
4
- export default function AdminUsersClient() {
5
- return (
6
- <ChatProviders>
7
- <AdminUsersPage />
8
- </ChatProviders>
9
- );
10
- }
@@ -1,10 +0,0 @@
1
- // Client-only component for API Keys page
2
- import { ChatProviders, ApiKeysPage } from '@chaaskit/client';
3
-
4
- export default function ApiKeysClient() {
5
- return (
6
- <ChatProviders>
7
- <ApiKeysPage />
8
- </ChatProviders>
9
- );
10
- }
@@ -1,10 +0,0 @@
1
- // Client-only component for Automations (Scheduled Prompts) page
2
- import { ChatProviders, ScheduledPromptsPage } from '@chaaskit/client';
3
-
4
- export default function AutomationsClient() {
5
- return (
6
- <ChatProviders>
7
- <ScheduledPromptsPage />
8
- </ChatProviders>
9
- );
10
- }
@@ -1,13 +0,0 @@
1
- // This file is only imported on the client side via dynamic import
2
- // It uses @chaaskit/client components directly
3
- import { ChatProviders, MainLayout, ChatPage } from '@chaaskit/client';
4
-
5
- export default function ChatClient() {
6
- return (
7
- <ChatProviders>
8
- <MainLayout>
9
- <ChatPage />
10
- </MainLayout>
11
- </ChatProviders>
12
- );
13
- }
@@ -1,10 +0,0 @@
1
- // Client-only component for Documents page
2
- import { ChatProviders, DocumentsPage } from '@chaaskit/client';
3
-
4
- export default function DocumentsClient() {
5
- return (
6
- <ChatProviders>
7
- <DocumentsPage />
8
- </ChatProviders>
9
- );
10
- }
@@ -1,10 +0,0 @@
1
- // Client-only component for OAuth Consent page
2
- import { ChatProviders, OAuthConsentPage } from '@chaaskit/client';
3
-
4
- export default function OAuthConsentClient() {
5
- return (
6
- <ChatProviders>
7
- <OAuthConsentPage />
8
- </ChatProviders>
9
- );
10
- }
@@ -1,10 +0,0 @@
1
- // Client-only component for Pricing page
2
- import { ChatProviders, PricingPage } from '@chaaskit/client';
3
-
4
- export default function PricingClient() {
5
- return (
6
- <ChatProviders>
7
- <PricingPage />
8
- </ChatProviders>
9
- );
10
- }
@@ -1,10 +0,0 @@
1
- // Client-only component for Team Settings page
2
- import { ChatProviders, TeamSettingsPage } from '@chaaskit/client';
3
-
4
- export default function TeamSettingsClient() {
5
- return (
6
- <ChatProviders>
7
- <TeamSettingsPage />
8
- </ChatProviders>
9
- );
10
- }
@@ -1,10 +0,0 @@
1
- // Client-only component for Email Verification page
2
- import { ChatProviders, VerifyEmailPage } from '@chaaskit/client';
3
-
4
- export default function VerifyEmailClient() {
5
- return (
6
- <ChatProviders>
7
- <VerifyEmailPage />
8
- </ChatProviders>
9
- );
10
- }
@@ -1,57 +0,0 @@
1
- import type { Route } from './+types/admin._index';
2
- import { lazy, Suspense } from 'react';
3
- import { ClientOnly } from '../components/ClientOnly';
4
-
5
- const AdminDashboardClient = lazy(() => import('../components/AdminDashboardClient'));
6
-
7
- export function meta({}: Route.MetaArgs) {
8
- return [{ title: 'Admin Dashboard' }];
9
- }
10
-
11
- export function links() {
12
- return [{ rel: 'stylesheet', href: '/node_modules/@chaaskit/client/dist/lib/styles.css' }];
13
- }
14
-
15
- export default function AdminDashboard() {
16
- return (
17
- <ClientOnly fallback={<LoadingSkeleton />}>
18
- {() => (
19
- <Suspense fallback={<LoadingSkeleton />}>
20
- <AdminDashboardClient />
21
- </Suspense>
22
- )}
23
- </ClientOnly>
24
- );
25
- }
26
-
27
- function LoadingSkeleton() {
28
- return (
29
- <div
30
- style={{
31
- display: 'flex',
32
- height: '100vh',
33
- alignItems: 'center',
34
- justifyContent: 'center',
35
- backgroundColor: 'rgb(var(--color-background))',
36
- }}
37
- >
38
- <div
39
- style={{
40
- width: '2rem',
41
- height: '2rem',
42
- border: '2px solid rgb(var(--color-primary))',
43
- borderTopColor: 'transparent',
44
- borderRadius: '50%',
45
- animation: 'spin 1s linear infinite',
46
- }}
47
- />
48
- <style>
49
- {`
50
- @keyframes spin {
51
- to { transform: rotate(360deg); }
52
- }
53
- `}
54
- </style>
55
- </div>
56
- );
57
- }
@@ -1,57 +0,0 @@
1
- import type { Route } from './+types/admin.teams.$teamId';
2
- import { lazy, Suspense } from 'react';
3
- import { ClientOnly } from '../components/ClientOnly';
4
-
5
- const AdminTeamClient = lazy(() => import('../components/AdminTeamClient'));
6
-
7
- export function meta({}: Route.MetaArgs) {
8
- return [{ title: 'Admin - Team Details' }];
9
- }
10
-
11
- export function links() {
12
- return [{ rel: 'stylesheet', href: '/node_modules/@chaaskit/client/dist/lib/styles.css' }];
13
- }
14
-
15
- export default function AdminTeamDetails() {
16
- return (
17
- <ClientOnly fallback={<LoadingSkeleton />}>
18
- {() => (
19
- <Suspense fallback={<LoadingSkeleton />}>
20
- <AdminTeamClient />
21
- </Suspense>
22
- )}
23
- </ClientOnly>
24
- );
25
- }
26
-
27
- function LoadingSkeleton() {
28
- return (
29
- <div
30
- style={{
31
- display: 'flex',
32
- height: '100vh',
33
- alignItems: 'center',
34
- justifyContent: 'center',
35
- backgroundColor: 'rgb(var(--color-background))',
36
- }}
37
- >
38
- <div
39
- style={{
40
- width: '2rem',
41
- height: '2rem',
42
- border: '2px solid rgb(var(--color-primary))',
43
- borderTopColor: 'transparent',
44
- borderRadius: '50%',
45
- animation: 'spin 1s linear infinite',
46
- }}
47
- />
48
- <style>
49
- {`
50
- @keyframes spin {
51
- to { transform: rotate(360deg); }
52
- }
53
- `}
54
- </style>
55
- </div>
56
- );
57
- }
@@ -1,57 +0,0 @@
1
- import type { Route } from './+types/admin.teams._index';
2
- import { lazy, Suspense } from 'react';
3
- import { ClientOnly } from '../components/ClientOnly';
4
-
5
- const AdminTeamsClient = lazy(() => import('../components/AdminTeamsClient'));
6
-
7
- export function meta({}: Route.MetaArgs) {
8
- return [{ title: 'Admin - Teams' }];
9
- }
10
-
11
- export function links() {
12
- return [{ rel: 'stylesheet', href: '/node_modules/@chaaskit/client/dist/lib/styles.css' }];
13
- }
14
-
15
- export default function AdminTeams() {
16
- return (
17
- <ClientOnly fallback={<LoadingSkeleton />}>
18
- {() => (
19
- <Suspense fallback={<LoadingSkeleton />}>
20
- <AdminTeamsClient />
21
- </Suspense>
22
- )}
23
- </ClientOnly>
24
- );
25
- }
26
-
27
- function LoadingSkeleton() {
28
- return (
29
- <div
30
- style={{
31
- display: 'flex',
32
- height: '100vh',
33
- alignItems: 'center',
34
- justifyContent: 'center',
35
- backgroundColor: 'rgb(var(--color-background))',
36
- }}
37
- >
38
- <div
39
- style={{
40
- width: '2rem',
41
- height: '2rem',
42
- border: '2px solid rgb(var(--color-primary))',
43
- borderTopColor: 'transparent',
44
- borderRadius: '50%',
45
- animation: 'spin 1s linear infinite',
46
- }}
47
- />
48
- <style>
49
- {`
50
- @keyframes spin {
51
- to { transform: rotate(360deg); }
52
- }
53
- `}
54
- </style>
55
- </div>
56
- );
57
- }
@@ -1,57 +0,0 @@
1
- import type { Route } from './+types/admin.users';
2
- import { lazy, Suspense } from 'react';
3
- import { ClientOnly } from '../components/ClientOnly';
4
-
5
- const AdminUsersClient = lazy(() => import('../components/AdminUsersClient'));
6
-
7
- export function meta({}: Route.MetaArgs) {
8
- return [{ title: 'Admin - Users' }];
9
- }
10
-
11
- export function links() {
12
- return [{ rel: 'stylesheet', href: '/node_modules/@chaaskit/client/dist/lib/styles.css' }];
13
- }
14
-
15
- export default function AdminUsers() {
16
- return (
17
- <ClientOnly fallback={<LoadingSkeleton />}>
18
- {() => (
19
- <Suspense fallback={<LoadingSkeleton />}>
20
- <AdminUsersClient />
21
- </Suspense>
22
- )}
23
- </ClientOnly>
24
- );
25
- }
26
-
27
- function LoadingSkeleton() {
28
- return (
29
- <div
30
- style={{
31
- display: 'flex',
32
- height: '100vh',
33
- alignItems: 'center',
34
- justifyContent: 'center',
35
- backgroundColor: 'rgb(var(--color-background))',
36
- }}
37
- >
38
- <div
39
- style={{
40
- width: '2rem',
41
- height: '2rem',
42
- border: '2px solid rgb(var(--color-primary))',
43
- borderTopColor: 'transparent',
44
- borderRadius: '50%',
45
- animation: 'spin 1s linear infinite',
46
- }}
47
- />
48
- <style>
49
- {`
50
- @keyframes spin {
51
- to { transform: rotate(360deg); }
52
- }
53
- `}
54
- </style>
55
- </div>
56
- );
57
- }
@@ -1,57 +0,0 @@
1
- import type { Route } from './+types/api-keys';
2
- import { lazy, Suspense } from 'react';
3
- import { ClientOnly } from '../components/ClientOnly';
4
-
5
- const ApiKeysClient = lazy(() => import('../components/ApiKeysClient'));
6
-
7
- export function meta({}: Route.MetaArgs) {
8
- return [{ title: 'API Keys' }];
9
- }
10
-
11
- export function links() {
12
- return [{ rel: 'stylesheet', href: '/node_modules/@chaaskit/client/dist/lib/styles.css' }];
13
- }
14
-
15
- export default function ApiKeys() {
16
- return (
17
- <ClientOnly fallback={<LoadingSkeleton />}>
18
- {() => (
19
- <Suspense fallback={<LoadingSkeleton />}>
20
- <ApiKeysClient />
21
- </Suspense>
22
- )}
23
- </ClientOnly>
24
- );
25
- }
26
-
27
- function LoadingSkeleton() {
28
- return (
29
- <div
30
- style={{
31
- display: 'flex',
32
- height: '100vh',
33
- alignItems: 'center',
34
- justifyContent: 'center',
35
- backgroundColor: 'rgb(var(--color-background))',
36
- }}
37
- >
38
- <div
39
- style={{
40
- width: '2rem',
41
- height: '2rem',
42
- border: '2px solid rgb(var(--color-primary))',
43
- borderTopColor: 'transparent',
44
- borderRadius: '50%',
45
- animation: 'spin 1s linear infinite',
46
- }}
47
- />
48
- <style>
49
- {`
50
- @keyframes spin {
51
- to { transform: rotate(360deg); }
52
- }
53
- `}
54
- </style>
55
- </div>
56
- );
57
- }
@@ -1,57 +0,0 @@
1
- import type { Route } from './+types/automations';
2
- import { lazy, Suspense } from 'react';
3
- import { ClientOnly } from '../components/ClientOnly';
4
-
5
- const AutomationsClient = lazy(() => import('../components/AutomationsClient'));
6
-
7
- export function meta({}: Route.MetaArgs) {
8
- return [{ title: 'Automations' }];
9
- }
10
-
11
- export function links() {
12
- return [{ rel: 'stylesheet', href: '/node_modules/@chaaskit/client/dist/lib/styles.css' }];
13
- }
14
-
15
- export default function Automations() {
16
- return (
17
- <ClientOnly fallback={<LoadingSkeleton />}>
18
- {() => (
19
- <Suspense fallback={<LoadingSkeleton />}>
20
- <AutomationsClient />
21
- </Suspense>
22
- )}
23
- </ClientOnly>
24
- );
25
- }
26
-
27
- function LoadingSkeleton() {
28
- return (
29
- <div
30
- style={{
31
- display: 'flex',
32
- height: '100vh',
33
- alignItems: 'center',
34
- justifyContent: 'center',
35
- backgroundColor: 'rgb(var(--color-background))',
36
- }}
37
- >
38
- <div
39
- style={{
40
- width: '2rem',
41
- height: '2rem',
42
- border: '2px solid rgb(var(--color-primary))',
43
- borderTopColor: 'transparent',
44
- borderRadius: '50%',
45
- animation: 'spin 1s linear infinite',
46
- }}
47
- />
48
- <style>
49
- {`
50
- @keyframes spin {
51
- to { transform: rotate(360deg); }
52
- }
53
- `}
54
- </style>
55
- </div>
56
- );
57
- }
@@ -1,57 +0,0 @@
1
- import type { Route } from './+types/documents';
2
- import { lazy, Suspense } from 'react';
3
- import { ClientOnly } from '../components/ClientOnly';
4
-
5
- const DocumentsClient = lazy(() => import('../components/DocumentsClient'));
6
-
7
- export function meta({}: Route.MetaArgs) {
8
- return [{ title: 'Documents' }];
9
- }
10
-
11
- export function links() {
12
- return [{ rel: 'stylesheet', href: '/node_modules/@chaaskit/client/dist/lib/styles.css' }];
13
- }
14
-
15
- export default function Documents() {
16
- return (
17
- <ClientOnly fallback={<LoadingSkeleton />}>
18
- {() => (
19
- <Suspense fallback={<LoadingSkeleton />}>
20
- <DocumentsClient />
21
- </Suspense>
22
- )}
23
- </ClientOnly>
24
- );
25
- }
26
-
27
- function LoadingSkeleton() {
28
- return (
29
- <div
30
- style={{
31
- display: 'flex',
32
- height: '100vh',
33
- alignItems: 'center',
34
- justifyContent: 'center',
35
- backgroundColor: 'rgb(var(--color-background))',
36
- }}
37
- >
38
- <div
39
- style={{
40
- width: '2rem',
41
- height: '2rem',
42
- border: '2px solid rgb(var(--color-primary))',
43
- borderTopColor: 'transparent',
44
- borderRadius: '50%',
45
- animation: 'spin 1s linear infinite',
46
- }}
47
- />
48
- <style>
49
- {`
50
- @keyframes spin {
51
- to { transform: rotate(360deg); }
52
- }
53
- `}
54
- </style>
55
- </div>
56
- );
57
- }
@@ -1,57 +0,0 @@
1
- import type { Route } from './+types/team.$teamId.settings';
2
- import { lazy, Suspense } from 'react';
3
- import { ClientOnly } from '../components/ClientOnly';
4
-
5
- const TeamSettingsClient = lazy(() => import('../components/TeamSettingsClient'));
6
-
7
- export function meta({}: Route.MetaArgs) {
8
- return [{ title: 'Team Settings' }];
9
- }
10
-
11
- export function links() {
12
- return [{ rel: 'stylesheet', href: '/node_modules/@chaaskit/client/dist/lib/styles.css' }];
13
- }
14
-
15
- export default function TeamSettings() {
16
- return (
17
- <ClientOnly fallback={<LoadingSkeleton />}>
18
- {() => (
19
- <Suspense fallback={<LoadingSkeleton />}>
20
- <TeamSettingsClient />
21
- </Suspense>
22
- )}
23
- </ClientOnly>
24
- );
25
- }
26
-
27
- function LoadingSkeleton() {
28
- return (
29
- <div
30
- style={{
31
- display: 'flex',
32
- height: '100vh',
33
- alignItems: 'center',
34
- justifyContent: 'center',
35
- backgroundColor: 'rgb(var(--color-background))',
36
- }}
37
- >
38
- <div
39
- style={{
40
- width: '2rem',
41
- height: '2rem',
42
- border: '2px solid rgb(var(--color-primary))',
43
- borderTopColor: 'transparent',
44
- borderRadius: '50%',
45
- animation: 'spin 1s linear infinite',
46
- }}
47
- />
48
- <style>
49
- {`
50
- @keyframes spin {
51
- to { transform: rotate(360deg); }
52
- }
53
- `}
54
- </style>
55
- </div>
56
- );
57
- }