diff --git a/apps/sim/app/playground/page.tsx b/apps/sim/app/playground/page.tsx new file mode 100644 index 000000000..7a3804211 --- /dev/null +++ b/apps/sim/app/playground/page.tsx @@ -0,0 +1,566 @@ +'use client' + +import { useState } from 'react' +import { ArrowLeft, Bell, Folder, Key, Settings, User } from 'lucide-react' +import { notFound, useRouter } from 'next/navigation' +import { + Badge, + Breadcrumb, + BubbleChatPreview, + Button, + Card as CardIcon, + ChevronDown, + Code, + Combobox, + Connections, + Copy, + DocumentAttachment, + Duplicate, + Eye, + FolderCode, + FolderPlus, + HexSimple, + Input, + Key as KeyIcon, + Label, + Layout, + Library, + Modal, + ModalBody, + ModalContent, + ModalFooter, + ModalHeader, + ModalTabs, + ModalTabsContent, + ModalTabsList, + ModalTabsTrigger, + ModalTrigger, + MoreHorizontal, + NoWrap, + PanelLeft, + Play, + Popover, + PopoverBackButton, + PopoverContent, + PopoverFolder, + PopoverItem, + PopoverScrollArea, + PopoverSearch, + PopoverSection, + PopoverTrigger, + Redo, + Rocket, + SModal, + SModalContent, + SModalMain, + SModalMainBody, + SModalMainHeader, + SModalSidebar, + SModalSidebarHeader, + SModalSidebarItem, + SModalSidebarSection, + SModalSidebarSectionTitle, + SModalTrigger, + Switch, + Textarea, + Tooltip, + Trash, + Trash2, + Undo, + Wrap, + ZoomIn, + ZoomOut, +} from '@/components/emcn' +import { env, isTruthy } from '@/lib/core/config/env' + +function Section({ title, children }: { title: string; children: React.ReactNode }) { + return ( +
+

+ {title} +

+
{children}
+
+ ) +} + +function VariantRow({ label, children }: { label: string; children: React.ReactNode }) { + return ( +
+ {label} +
{children}
+
+ ) +} + +const SAMPLE_CODE = `function greet(name) { + console.log("Hello, " + name); + return { success: true }; +}` + +const SAMPLE_PYTHON = `def greet(name): + print(f"Hello, {name}") + return {"success": True}` + +const COMBOBOX_OPTIONS = [ + { label: 'Option 1', value: 'opt1' }, + { label: 'Option 2', value: 'opt2' }, + { label: 'Option 3', value: 'opt3' }, +] + +export default function PlaygroundPage() { + const router = useRouter() + const [comboboxValue, setComboboxValue] = useState('') + const [switchValue, setSwitchValue] = useState(false) + const [activeTab, setActiveTab] = useState('profile') + + if (!isTruthy(env.NEXT_PUBLIC_ENABLE_PLAYGROUND)) { + notFound() + } + + return ( + +
+ + + + + Go back + +
+
+

+ EMCN Component Playground +

+

+ All emcn UI components and their variants +

+
+ + {/* Button */} +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + {/* Badge */} +
+ + Default + + + Outline + +
+ + {/* Input */} +
+ + + + + + +
+ + {/* Textarea */} +
+