Add dropdown

apps/studio/src/routes/editor/TopBar/Publish/Dropdown.tsx

@@ -0,0 +1,44 @@
+import { Button } from '@onlook/ui/button';
+import { Icons } from '@onlook/ui/icons';
+import { Separator } from '@onlook/ui/separator';
+import { observer } from 'mobx-react-lite';
+
+export const PublishDropdown = observer(() => {
+    return (
+        <div className="rounded-md flex flex-col p-4 text-foreground-secondary gap-2">
+            <BaseDomainSection />
+            <Separator />
+            <CustomDomainSection />
+            <Separator />
+            <div className="flex flex-row items-center gap-2">
+                <Icons.Gear className="h-4 w-4" />
+                Advanced Settings
+                <Icons.ChevronRight className="ml-auto h-4 w-4" />
+            </div>
+        </div>
+    );
+});
+
+export const BaseDomainSection = observer(() => {
+    return (
+        <div className="flex flex-col items-center justify-between gap-2">
+            <h2 className="text-start w-full">Publish</h2>
+            <Button className="w-full rounded-md p-3 mb-4">Publish my site</Button>
+        </div>
+    );
+});
+
+export const CustomDomainSection = observer(() => {
+    return (
+        <div className="flex flex-col items-center gap-2">
+            <div className="flex items-center w-full">
+                <h3 className="">Custom Domain</h3>
+                <span className="ml-auto rounded bg-blue-400 text-white px-1.5 py-0.5 text-xs">
+                    PRO
+                </span>
+            </div>
+
+            <Button className="w-full rounded-md p-3 mb-4 bg-blue-400">Link a Custom Domain</Button>
+        </div>
+    );
+});

apps/studio/src/routes/editor/TopBar/Publish/TriggerButton.tsx

@@ -0,0 +1,13 @@
+import { Button } from '@onlook/ui/button';
+import { DropdownMenuTrigger } from '@onlook/ui/dropdown-menu';
+import { observer } from 'mobx-react-lite';
+
+export const PublishButton = observer(() => {
+    return (
+        <DropdownMenuTrigger asChild>
+            <Button variant="outline" size="sm">
+                Publish
+            </Button>
+        </DropdownMenuTrigger>
+    );
+});

apps/studio/src/routes/editor/TopBar/Publish/index.tsx

@@ -0,0 +1,17 @@
+import { DropdownMenu, DropdownMenuContent } from '@onlook/ui/dropdown-menu';
+import { observer } from 'mobx-react-lite';
+import { PublishDropdown } from './Dropdown';
+import { PublishButton } from './TriggerButton';
+
+const Publish = observer(() => {
+    return (
+        <DropdownMenu>
+            <PublishButton />
+            <DropdownMenuContent align="end" className="w-96 p-0">
+                <PublishDropdown />
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
+});
+
+export default Publish;

apps/studio/src/routes/editor/TopBar/index.tsx

@@ -7,6 +7,7 @@ import { AnimatePresence, motion } from 'framer-motion';
 import { observer } from 'mobx-react-lite';
 import ModeToggle from './ModeToggle';
 import ProjectBreadcrumb from './ProjectSelect';
+import Publish from './Publish';
 import ShareProject from './ShareProject';
 import { Hotkey } from '/common/hotkeys';
 
@@ -104,6 +105,7 @@ const EditorTopBar = observer(() => {
                     </motion.div>
                 </div>
                 <ShareProject />
+                <Publish />
             </div>
         </div>
     );