From ab39a7ddf3b58655d57cbbc82f961c3a9c6cfd43 Mon Sep 17 00:00:00 2001 From: JivusAyrus Date: Tue, 2 Sep 2025 14:02:42 +0530 Subject: [PATCH 1/2] feat: add a popup about new features on the dashboard --- .../components/dashboard/NewFeaturesPopup.tsx | 204 ++++++++++++++++++ studio/src/components/layout/sidenav.tsx | 20 +- .../hooks/use-new-features-popup-disabled.ts | 16 ++ 3 files changed, 236 insertions(+), 4 deletions(-) create mode 100644 studio/src/components/dashboard/NewFeaturesPopup.tsx create mode 100644 studio/src/hooks/use-new-features-popup-disabled.ts diff --git a/studio/src/components/dashboard/NewFeaturesPopup.tsx b/studio/src/components/dashboard/NewFeaturesPopup.tsx new file mode 100644 index 0000000000..ec1b2377f1 --- /dev/null +++ b/studio/src/components/dashboard/NewFeaturesPopup.tsx @@ -0,0 +1,204 @@ +import React from "react"; +import Link from "next/link"; +import { Cross2Icon } from "@radix-ui/react-icons"; +import { Button } from "../ui/button"; +import { MdArrowOutward } from "react-icons/md"; +import { useNewFeaturesPopupDisabled } from "@/hooks/use-new-features-popup-disabled"; + +export default function NewFeaturesPopup() { + const [isPopupDisabled, setDisablePopup] = useNewFeaturesPopupDisabled(); + + const handleClosePopup = () => { + setDisablePopup("true"); + }; + + // Don't render the popup if it's been dismissed + if (isPopupDisabled) { + return null; + } + + return ( +
+
+
+
+

+ Cosmo Connect +
+ is here! +

+ +
+

+ A new way to unify your +
+ API ecosystem +

+
+ + Learn more + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ ); +} diff --git a/studio/src/components/layout/sidenav.tsx b/studio/src/components/layout/sidenav.tsx index 0e92fc4db5..654a15d0d6 100644 --- a/studio/src/components/layout/sidenav.tsx +++ b/studio/src/components/layout/sidenav.tsx @@ -26,6 +26,7 @@ import { DropdownMenuSeparator, DropdownMenuTrigger, } from "../ui/dropdown-menu"; +import NewFeaturesPopup from "../dashboard/NewFeaturesPopup"; export type NavLink = { title: ReactNode; @@ -52,13 +53,19 @@ const MobileNav = () => {