Back to top

postcss.config.mjs

@@ -1,7 +1,3 @@
-import { createRequire } from "module"
-
-const require = createRequire(import.meta.url)
-
 const config = {
   plugins: {
     "@tailwindcss/postcss": {},

src/app/(dashboard-layout)/layout.tsx

@@ -38,7 +38,10 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
     <div className="flex h-screen flex-col overflow-hidden">
       <SidebarProvider className="min-h-0 flex-1">
         <AppSidebar variant="sidebar" collapsible="offcanvas" />
-        <SidebarInset className="flex min-h-0 flex-1 flex-col overflow-y-auto">
+        <SidebarInset
+          id="main-scroll-area"
+          className="flex min-h-0 flex-1 flex-col overflow-y-auto"
+        >
           <header className="sticky top-0 z-40 flex h-16 shrink-0 items-center gap-1 bg-background/80 px-4 backdrop-blur-md sm:px-6">
             <SidebarTrigger className="relative mx-1 -ml-1 flex h-11 w-11 items-center justify-center rounded-lg" />
             {/* <SearchBar /> */}

src/app/layout.tsx

@@ -9,6 +9,7 @@ import { Toaster } from "sonner"
 
 // project
 import branding from "@/branding.json"
+import { BackToTop } from "@/components/back-to-top"
 import { ThemePresetStyles } from "@/components/customizer/ThemePresetStyles"
 import { ThemeProvider } from "@/components/theme-provider"
 import Metrics from "@/metrics"
@@ -96,6 +97,7 @@ export default function RootLayout({
           <Toaster richColors />
         </ThemeProvider>
         <Metrics />
+        <BackToTop />
       </body>
     </html>
   )

src/components/animation/HoverBg.tsx

@@ -110,15 +110,15 @@ export default function HoverBg({ className = "" }: HoverBgProps) {
     >
       {/* The SVG grid pattern repeated across the screen and revealed by the mask */}
       <svg
-        className="pointer-events-none absolute inset-0 h-full w-full text-primary/50 dark:text-primary/35"
+        className="pointer-events-none absolute inset-0 h-full w-full text-primary/50 dark:text-primary"
         xmlns="http://www.w3.org/2000/svg"
       >
         <defs>
           <pattern
             id="glow-grid-pattern"
             patternUnits="userSpaceOnUse"
-            width="574"
-            height="574"
+            width="282"
+            height="282"
           >
             <SparkleGrid />
           </pattern>

src/components/back-to-top.tsx

@@ -0,0 +1,75 @@
+"use client"
+
+import { useCallback, useEffect, useRef, useState } from "react"
+
+// shadcn
+import { Button } from "@/components/ui/button"
+
+// project imports
+import { cn } from "@/lib/utils"
+
+// assets
+import { ArrowUp } from "lucide-react"
+
+const SCROLL_THRESHOLD = 300
+
+//  ------------------------------ | BACK TO TOP | ------------------------------  //
+
+export function BackToTop() {
+  const [isVisible, setIsVisible] = useState(false)
+  const tickingRef = useRef(false)
+
+  useEffect(() => {
+    function handleScroll(event: Event) {
+      if (tickingRef.current) return
+      tickingRef.current = true
+
+      requestAnimationFrame(() => {
+        const target = event.target
+        const scrollTop =
+          target instanceof HTMLElement && target.id === "main-scroll-area"
+            ? target.scrollTop
+            : window.scrollY
+
+        setIsVisible((prev) => {
+          const next = scrollTop > SCROLL_THRESHOLD
+          return prev === next ? prev : next
+        })
+
+        tickingRef.current = false
+      })
+    }
+
+    window.addEventListener("scroll", handleScroll, {
+      capture: true,
+      passive: true,
+    })
+
+    return () => {
+      window.removeEventListener("scroll", handleScroll, { capture: true })
+    }
+  }, [])
+
+  const scrollToTop = useCallback(() => {
+    document
+      .getElementById("main-scroll-area")
+      ?.scrollTo({ top: 0, behavior: "smooth" }) ??
+      window.scrollTo({ top: 0, behavior: "smooth" })
+  }, [])
+
+  return (
+    <Button
+      onClick={scrollToTop}
+      className={cn(
+        "fixed right-10 bottom-6 z-50 h-12 w-12 rounded-full shadow-lg transition-all duration-300",
+        "bg-black text-white hover:bg-black/90 dark:bg-white dark:text-black dark:hover:bg-white/90",
+        isVisible
+          ? "translate-y-0 opacity-100"
+          : "pointer-events-none translate-y-10 opacity-0"
+      )}
+    >
+      <ArrowUp className="size-6.5" />
+      <span className="sr-only">Scroll to top</span>
+    </Button>
+  )
+}

src/components/category-description.tsx

@@ -57,19 +57,21 @@ export default function CategoryDescription({
               ))}
             </div>
           </div>
-          <div className="flex flex-col gap-4">
-            <h3 className="capitalize">{data.variantsHeading ?? ""}</h3>
-            <ul className="flex list-disc flex-col gap-3 pl-6">
-              {(data.variants ?? []).map((f: string, i: number) => {
-                const [bold, ...rest] = f.split(". ")
-                return (
-                  <li key={i}>
-                    <b>{bold}:</b> {rest.join(". ")}
-                  </li>
-                )
-              })}
-            </ul>
-          </div>
+          {data.variants && data.variants.length > 0 && (
+            <div className="flex flex-col gap-4">
+              <h3 className="capitalize">{data.variantsHeading ?? ""}</h3>
+              <ul className="flex list-disc flex-col gap-3 pl-6">
+                {data.variants.map((f: string, i: number) => {
+                  const [bold, ...rest] = f.split(". ")
+                  return (
+                    <li key={i}>
+                      <b>{bold}:</b> {rest.join(". ")}
+                    </li>
+                  )
+                })}
+              </ul>
+            </div>
+          )}
           <div className="flex flex-col gap-4">
             <h3 className="capitalize">{data.whyUseHeading}</h3>
             <div className="flex flex-col gap-3">
@@ -103,12 +105,14 @@ export default function CategoryDescription({
                 />
               ))}
             </div>
-            <ul className="flex list-disc flex-col gap-3 pl-6">
-              {(data.integrationList ?? []).map((p: string, i: number) => {
-                return <li key={i}>{p}</li>
-              })}
-            </ul>
-            <p>{data.integrationNote ?? ""}</p>
+            {data.integrationList && data.integrationList.length > 0 && (
+              <ul className="flex list-disc flex-col gap-3 pl-6">
+                {data.integrationList.map((p: string, i: number) => {
+                  return <li key={i}>{p}</li>
+                })}
+              </ul>
+            )}
+            {data.integrationNote && <p>{data.integrationNote}</p>}
           </div>
           {data.faqs && data.faqs.length > 0 && (
             <div className="flex flex-col gap-4">

src/components/uiable/blocks/landing/hero/hero.tsx

@@ -50,7 +50,7 @@ export default function Hero() {
         }}
       />
 
-      <HoverBg className="opacity-60 dark:opacity-45" />
+      <HoverBg className="opacity-60 dark:opacity-60" />
 
       <div className="relative z-10 flex items-center justify-center">
         <Badge