✨ updated styling of banner

Author: Ansub

src/app/providers.tsx

@@ -1,9 +1,9 @@
 'use client'
 
-import { Button } from '@/components/mdx'
-import { ChevronRight } from 'lucide-react'
+import SyntaxUIProBanner from '@/components/SyntaxUIProBanner'
+import { useProBannerStore } from '@/store'
+import { X } from 'lucide-react'
 import { ThemeProvider } from 'next-themes'
-import { useRouter } from 'next/navigation'
 
 import posthog from 'posthog-js'
 import { PostHogProvider } from 'posthog-js/react'
@@ -17,26 +17,9 @@ function CSPostHogProvider({ children }: { children: React.ReactNode }) {
   return <PostHogProvider client={posthog}>{children}</PostHogProvider>
 }
 
-const SyntaxUIProBanner = () => {
-  const router = useRouter()
-  return (
-    <>
-      <div
-        onClick={() => router.push('/pro')}
-        className={`fixed bottom-0 left-0 right-0 z-50 cursor-pointer transition-all duration-300 ease-in-out`}
-      >
-        <div className="flex w-full items-center justify-center gap-x-6 bg-red-500 px-6 py-2 sm:px-3.5">
-          <div className="flex items-center gap-4 text-sm font-medium leading-6 text-white">
-            <p>{`Get Premium Blocks and Templates for your next project on SyntaxUI Pro`}</p>
-            <ChevronRight className="h-4 w-4" />
-          </div>
-        </div>
-      </div>
-    </>
-  )
-}
-
 export function Providers({ children }: { children: React.ReactNode }) {
+  const { showProBanner } = useProBannerStore()
+
   return (
     <ThemeProvider
       attribute="class"
@@ -45,7 +28,7 @@ export function Providers({ children }: { children: React.ReactNode }) {
     >
       <CSPostHogProvider>
         {children}
-        <SyntaxUIProBanner />
+        {showProBanner && <SyntaxUIProBanner />}
       </CSPostHogProvider>
     </ThemeProvider>
   )

src/components/SyntaxUIProBanner.tsx

@@ -0,0 +1,32 @@
+import { useProBannerStore } from '@/store'
+import { X } from 'lucide-react'
+
+const SyntaxUIProBanner = () => {
+  const { setShowProBanner } = useProBannerStore()
+  return (
+    <div className="border-border group fixed bottom-2 right-2 z-50 h-auto w-[calc(100vw-16px)] max-w-[350px] overflow-hidden rounded-lg border border-red-700 bg-red-500 p-4 text-white transition-all animate-in slide-in-from-bottom-full md:bottom-4 md:right-4">
+      <a
+        href="https://pro.syntaxui.com/"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <div className="flex flex-col items-start gap-0.5">
+          <h1 className="text-md hidden font-semibold md:block">
+            Code Less, Create More!
+          </h1>
+          <div className="font-regular flex items-start justify-start  text-sm leading-6 text-white/80">
+            {`Get Premium Blocks and Templates for your next project on SyntaxUI Pro ↗`}
+          </div>
+        </div>
+      </a>
+      <button
+        className="p-1s absolute right-2 top-2 transition-all duration-300 ease-in-out group-hover:block md:hidden"
+        onClick={() => setShowProBanner(false)}
+      >
+        <X className="h-5 w-5" />
+      </button>
+    </div>
+  )
+}
+
+export default SyntaxUIProBanner

src/store.ts

@@ -9,3 +9,13 @@ export const useStarStore = create<StarStore>((set) => ({
   stars: 100,
   setStars: (count) => set({ stars: count }),
 }))
+
+interface ProBannerStore {
+  showProBanner: boolean
+  setShowProBanner: (show: boolean) => void
+}
+
+export const useProBannerStore = create<ProBannerStore>((set) => ({
+  showProBanner: true,
+  setShowProBanner: (show) => set({ showProBanner: show }),
+}))