blocks-dusted 0.1.11 → 0.1.13

package/templates/blocks/DD-AsideNav/Component.tsx

@@ -1,321 +1,325 @@
-'use client'
-
-import * as React from 'react'
-import { useEffect, useMemo, useRef, useState } from 'react'
-import { createPortal } from 'react-dom'
-import { motion } from 'framer-motion'
-import { ArrowDownWideNarrow } from 'lucide-react'
-import { extractCustomCSS } from '@/utilities/renderCustomCSS'
-
-const Divider: React.FC = () => (
-  <span className="block h-px w-4 shrink-0 bg-white/55 dark:bg-white/55" />
-)
-
-const FadeEdges: React.FC = () => (
-  <div className="sticky top-0 z-[100]">
-    <div
-      aria-hidden="true"
-      className="pointer-events-none absolute -left-1 -top-1 h-24 w-screen bg-gradient-to-b from-[var(--color-muted,transparent)] to-transparent blur-[6px]"
-    />
-    <div
-      aria-hidden="true"
-      className="pointer-events-none absolute -bottom-1 -left-1 h-24 w-screen bg-gradient-to-t from-[var(--color-muted,transparent)] to-transparent"
-    />
-  </div>
-)
-
-const rowVariants = {
-  hidden: { opacity: 0, y: 10 },
-  show: {
-    opacity: 1,
-    y: 0,
-    transition: {
-      type: 'spring' as const,
-      stiffness: 200,
-      damping: 20,
-      staggerChildren: 0.1
-    }
-  }
-} as const
-
+'use client'
+
+import * as React from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { motion } from 'framer-motion'
+import { ArrowDownWideNarrow } from 'lucide-react'
+import { extractCustomCSS } from '@/utilities/renderCustomCSS'
+
+const Divider: React.FC = () => (
+  <span className="block h-px w-4 shrink-0 bg-stone-300 dark:bg-white/55" />
+)
+
+// const FadeEdges: React.FC = () => (
+//   <div className="sticky top-0 z-100">
+//     <div
+//       aria-hidden="true"
+//       className="pointer-events-none absolute -left-1 -top-1 h-24 w-screen bg-linear-to-b from-(--color-muted,transparent) to-transparent blur-[6px]"
+//     />
+//     <div
+//       aria-hidden="true"
+//       className="pointer-events-none absolute -bottom-1 -left-1 h-24 w-screen bg-linear-to-t from-(--color-muted,transparent) to-transparent"
+//     />
+//   </div>
+// )
+
+const rowVariants = {
+  hidden: { opacity: 0, y: 10 },
+  show: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      type: 'spring' as const,
+      stiffness: 200,
+      damping: 20,
+      staggerChildren: 0.1,
+    },
+  },
+} as const
+
 const childBarVariants = (w = 55) => ({
-  rest: { width: 36, backgroundColor: 'rgba(255,255,255,0.65)' },
-  hover: { width: w, backgroundColor: 'var(--accent)' }
+  rest: { width: 36, backgroundColor: 'var(--aside-nav-line)' },
+  hover: { width: w, backgroundColor: '#87da07' },
 })
-
-const childTextVariants = {
-  rest: { opacity: 1, color: 'inherit', filter: 'brightness(1.1)' },
-  hover: { opacity: 1, color: 'var(--accent)' }
-}
-
-const ParentRow: React.FC<{ label: string; index: number }> = ({ label, index }) => (
-  <motion.div
-    initial="hidden"
-    animate="show"
-    variants={rowVariants}
-    custom={index}
-    className="relative color-alt will-change-[transform,opacity]"
-    transition={{
-      delay: index * 0.025,
-      type: 'spring',
-      stiffness: 200,
-      damping: 20
-    }}
-  >
-    <div className="group relative flex h-px items-center gap-3 py-2">
-      <span className="inline-block h-px w-9 shrink-0 bg-white/65 text-sm opacity-100 dark:bg-white/65" />
-      <span className="color-text whitespace-nowrap text-md font-semibold uppercase opacity-100">
-        {label}
-      </span>
-    </div>
-  </motion.div>
-)
-
-const ChildRow: React.FC<{
-  targetSection?: string
-  label: string
-  index: number
-  wideOnHover?: number
-  scrollOffset?: number
-}> = ({ targetSection, label, index, wideOnHover = 55, scrollOffset = -100 }) => {
-  const handleScrollTo = (e: React.MouseEvent) => {
-    e.preventDefault()
-
-    if (!targetSection) return
-
-    const el = document.getElementById(targetSection)
-
-    if (!el) {
-      console.warn(`Target element with id "${targetSection}" not found`)
-      return
-    }
-
-    const elementTop = el.getBoundingClientRect().top + window.pageYOffset
-    const targetTop = elementTop + scrollOffset
-
-    window.scrollTo({ top: targetTop, behavior: 'smooth' })
-  }
-
-  return (
-    <motion.div
-      initial="hidden"
-      animate="show"
-      variants={rowVariants}
-      custom={index}
-      transition={{
-        delay: index * 0.025,
-        type: 'spring',
-        stiffness: 200,
-        damping: 20
-      }}
-    >
-      <motion.button
-        onClick={handleScrollTo}
-        initial="rest"
-        whileHover="hover"
-        animate="rest"
-        disabled={!targetSection}
-        className="group relative flex h-px cursor-pointer items-center gap-4 border-0 bg-transparent py-0 text-left text-sm opacity-50 hover:opacity-100 will-change-[transform,opacity] after:absolute after:left-0 after:top-1/2 after:size-full after:-translate-y-1/2 after:p-[12px] disabled:cursor-not-allowed disabled:opacity-50 disabled:[&_*]:opacity-30 focus-visible:rounded focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--dd-accent,#9803e2)]"
-      >
-        <motion.span
-          className="inline-block h-px shrink-0 text-sm opacity-100 will-change-[width,background-color]"
-          variants={childBarVariants(wideOnHover)}
-          transition={{ type: 'spring', stiffness: 500, damping: 35 }}
-        />
-
-        <motion.span
-          className="whitespace-nowrap text-sm !font-medium text-stone-400 transition-all ease-out will-change-[color,opacity] group-hover:!font-semibold group-hover:text-[var(--dd-accent,#9803e2)]"
-          variants={childTextVariants}
-          transition={{ type: 'spring', stiffness: 500, damping: 35 }}
-        >
-          {label}
-        </motion.span>
-      </motion.button>
-    </motion.div>
-  )
-}
-
-interface AsideScrollLinksProps {
-  parentSections?: Array<{
-    sectionId?: string
-    label: string
-    children?: Array<{
-      linkId?: string
-      label: string
-      targetSection?: string
-      scrollOffset?: number
-      wideOnHover?: number
-    }>
-  }>
-  position?: 'left' | 'right'
-  zIndex?: number
-  offsetFromEdge?: number
-  className?: string
-  blockName?: string
-  enableCustomCSS?: boolean
-  customCSS?: any[]
-}
-
-function AsideNav({
-  parentSections = [
-    {
-      label: 'Out of the box',
-      children: [{ label: 'Aside PageLinks', targetSection: 's1' }]
-    }
-  ],
-  position = 'left',
-  offsetFromEdge = 8,
-  enableCustomCSS = false,
-  customCSS = []
-}: AsideScrollLinksProps) {
-  const [mounted, setMounted] = useState(false)
-  const styleIdRef = useRef(`aside-nav-css-${Math.random().toString(36).slice(2)}`)
-
-  const extractedCSS = enableCustomCSS && customCSS?.length > 0 ? extractCustomCSS(customCSS) : ''
-
-  useEffect(() => {
-    setMounted(true)
-  }, [])
-
-  useEffect(() => {
-    if (!extractedCSS) return
-
-    const styleId = styleIdRef.current
-    const existingStyle = document.getElementById(styleId)
-
-    if (existingStyle) {
-      existingStyle.textContent = extractedCSS
-    } else {
-      const style = document.createElement('style')
-      style.id = styleId
-      style.textContent = extractedCSS
-      document.head.appendChild(style)
-    }
-
-    return () => {
-      document.getElementById(styleId)?.remove()
-    }
-  }, [extractedCSS])
-
-  const items = useMemo(() => {
-    const flat: Array<{
-      type: 'parent' | 'child'
-      label: string
-      targetSection?: string
-      scrollOffset?: number
-      wideOnHover?: number
-    }> = []
-
-    parentSections.forEach((p) => {
-      flat.push({ type: 'parent', label: p.label })
-
-      p.children?.forEach((c) =>
-        flat.push({
-          type: 'child',
-          label: c.label,
-          targetSection: c.targetSection,
-          scrollOffset: c.scrollOffset,
-          wideOnHover: c.wideOnHover
-        })
-      )
-    })
-
-    return flat
-  }, [parentSections])
-
-  const positionClass = position === 'left' ? 'left-2' : 'right-2'
-
-  const asideContent = (
-    <aside
-      className={[
-        'aside-scroll-block group fixed top-16 z-[200] flex items-start overflow-hidden opacity-100 shadow-lg transition-[width,height,max-width,max-height,border-radius,padding] duration-300 delay-50 hover:delay-0 focus-within:delay-0',
-        'h-[2.3rem] w-[2.3rem] max-w-[12rem] max-h-[30vh] p-px',
-        'rounded-2xl backdrop-blur-[10px]',
-        'bg-[var(--border)] border-[2px] border-ridge border-[#edededf0] shadow-[inset_0_0_20px_0px_rgb(255_255_255_/_80%)]',
-        'dark:bg-[var(--background)] dark:border-[rgba(245,245,245,0.5)] dark:shadow-[inset_0_0_20px_#ffffff70]',
-        'hover:h-auto hover:w-[calc(100%+1rem)] hover:max-w-[15rem] hover:max-h-[40vh] hover:rounded-2xl hover:p-1 hover:duration-200 focus-within:h-auto focus-within:w-[calc(100%+1rem)] focus-within:max-w-[15rem] focus-within:max-h-[40vh] focus-within:rounded-2xl focus-within:p-1',
-        positionClass
-      ].join(' ')}
-      style={{
-        opacity: 1,
-        transform: 'none',
-        [position]: `${offsetFromEdge}px`
-      }}
-    >
-      <div
-        data-lenis-prevent
-        className={[
-          'aside-inner-box relative flex h-full w-full overflow-hidden p-1 text-[14px] tracking-tight backdrop-blur-md transition-all duration-300',
-          'rounded-2xl bg-[rgba(5,5,5,0.5)] border border-[rgba(152,3,226,0.1)]',
-          'dark:bg-[rgba(22,20,34,0.9)] dark:border-[rgba(152,3,226,0.15)]',
-          'group-hover:rounded-xl group-hover:p-0.5 group-focus-within:rounded-xl group-focus-within:p-0.5'
-        ].join(' ')}
-      >
-        <div className="w-full overflow-hidden">
-          <ArrowDownWideNarrow className="icon-arrow-down-wide-narrow color-alt sticky left-0 top-1 z-[100] h-auto w-6 shrink-0 p-1" />
-
-          <FadeEdges />
-
-          <nav
-            data-lenis-prevent
-            className="aside-nav-list pointer-events-none relative m-0 flex h-fit max-h-[40vh] w-full flex-col gap-2 overflow-x-clip overflow-y-auto px-0 pb-24 pt-2 text-stone-200 opacity-0 transition-opacity duration-150 group-hover:pointer-events-auto group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:opacity-100 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden [&::-webkit-scrollbar]:h-0 [&::-webkit-scrollbar]:w-0 dark:text-stone-200"
-          >
-            {items.map((it, i) => {
-              if (it.type === 'parent') {
-                return (
-                  <React.Fragment key={`p-${i}`}>
-                    <ParentRow label={it.label} index={i} />
-                    <Divider />
-                    <Divider />
-                  </React.Fragment>
-                )
-              }
-
-              return (
-                <React.Fragment key={`c-${i}`}>
-                  <ChildRow
-                    targetSection={it.targetSection}
-                    label={it.label}
-                    index={i}
-                    wideOnHover={it.wideOnHover ?? 55}
-                    scrollOffset={it.scrollOffset ?? -100}
-                  />
-                  <Divider />
-                  <Divider />
-                  <Divider />
-                </React.Fragment>
-              )
-            })}
-          </nav>
-        </div>
-      </div>
-
-      <style jsx global>{`
-        .aside-nav-list {
-          -ms-overflow-style: none !important;
-          scrollbar-width: none !important;
-          overscroll-behavior: contain;
-        }
-
-        .aside-nav-list::-webkit-scrollbar,
-        .aside-nav-list *::-webkit-scrollbar {
-          display: none !important;
-          width: 0 !important;
-          height: 0 !important;
-          background: transparent !important;
-        }
-
-        .aside-scroll-block {
-          border-style: ridge;
-        }
-      `}</style>
-    </aside>
-  )
-
-  if (!mounted || typeof window === 'undefined') return null
-
-  return createPortal(asideContent, document.body)
-}
-
-export { AsideNav as DDAsideNav }
-export default AsideNav
+
+const childTextVariants = {
+  rest: { opacity: 1, color: 'inherit', filter: 'brightness(1.1)' },
+  hover: { opacity: 1, color: '#9803e2' },
+}
+
+const ParentRow: React.FC<{ label: string; index: number }> = ({ label, index }) => (
+  <motion.div
+    initial="hidden"
+    animate="show"
+    variants={rowVariants}
+    custom={index}
+    className="relative color-alt will-change-[transform,opacity]"
+    transition={{
+      delay: index * 0.025,
+      type: 'spring',
+      stiffness: 200,
+      damping: 20,
+    }}
+  >
+    <div className="group relative flex h-px items-center gap-3 py-2">
+      <span className="inline-block h-px w-9 shrink-0 bg-stone-500 text-sm opacity-100 dark:bg-white/65" />
+      <span className="whitespace-nowrap text-md font-semibold uppercase text-stone-800 opacity-100 dark:text-stone-200">
+        {label}
+      </span>
+    </div>
+  </motion.div>
+)
+
+const ChildRow: React.FC<{
+  targetSection?: string
+  label: string
+  index: number
+  wideOnHover?: number
+  scrollOffset?: number
+}> = ({ targetSection, label, index, wideOnHover = 55, scrollOffset = -100 }) => {
+  const handleScrollTo = (e: React.MouseEvent) => {
+    e.preventDefault()
+
+    if (!targetSection) return
+
+    const el = document.getElementById(targetSection)
+
+    if (!el) {
+      console.warn(`Target element with id "${targetSection}" not found`)
+      return
+    }
+
+    const elementTop = el.getBoundingClientRect().top + window.pageYOffset
+    const targetTop = elementTop + scrollOffset
+
+    window.scrollTo({ top: targetTop, behavior: 'smooth' })
+  }
+
+  return (
+    <motion.div
+      initial="hidden"
+      animate="show"
+      variants={rowVariants}
+      custom={index}
+      transition={{
+        delay: index * 0.025,
+        type: 'spring',
+        stiffness: 200,
+        damping: 20,
+      }}
+    >
+      <motion.button
+        onClick={handleScrollTo}
+        initial="rest"
+        whileHover="hover"
+        animate="rest"
+        disabled={!targetSection}
+        className="group/aside-row relative flex h-px cursor-pointer items-center gap-4 border-0 bg-transparent py-0 text-left text-sm opacity-50 hover:opacity-100 will-change-[transform,opacity] after:absolute after:left-0 after:top-1/2 after:size-full after:-translate-y-1/2 after:p-3 disabled:cursor-not-allowed disabled:opacity-50 disabled:**:opacity-30 focus-visible:rounded focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-[#9803e2]!"
+      >
+        <motion.span
+          className="inline-block h-px shrink-0 text-sm opacity-100 will-change-[width,background-color]"
+          variants={childBarVariants(wideOnHover)}
+          transition={{ type: 'spring', stiffness: 500, damping: 35 }}
+        />
+
+        <motion.span
+          className="whitespace-nowrap text-sm font-medium! text-stone-600 transition-all ease-out will-change-[color,opacity] group-hover/aside-row:font-semibold! group-hover/aside-row:text-[#9803e2]! hover:text-[#9803e2]! active:text-[#9803e2]! dark:text-stone-400"
+          variants={childTextVariants}
+          transition={{ type: 'spring', stiffness: 500, damping: 35 }}
+        >
+          {label}
+        </motion.span>
+      </motion.button>
+    </motion.div>
+  )
+}
+
+interface AsideScrollLinksProps {
+  parentSections?: Array<{
+    sectionId?: string
+    label: string
+    children?: Array<{
+      linkId?: string
+      label: string
+      targetSection?: string
+      scrollOffset?: number
+      wideOnHover?: number
+    }>
+  }>
+  position?: 'left' | 'right'
+  zIndex?: number
+  offsetFromEdge?: number
+  className?: string
+  blockName?: string
+  enableCustomCSS?: boolean
+  customCSS?: any[]
+}
+
+function AsideNav({
+  parentSections = [
+    {
+      label: 'Out of the box',
+      children: [{ label: 'Aside PageLinks', targetSection: 's1' }],
+    },
+  ],
+  position = 'left',
+  offsetFromEdge = 8,
+  enableCustomCSS = false,
+  customCSS = [],
+}: AsideScrollLinksProps) {
+  const [mounted, setMounted] = useState(false)
+  const styleIdRef = useRef(`aside-nav-css-${Math.random().toString(36).slice(2)}`)
+
+  const extractedCSS = enableCustomCSS && customCSS?.length > 0 ? extractCustomCSS(customCSS) : ''
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  useEffect(() => {
+    if (!extractedCSS) return
+
+    const styleId = styleIdRef.current
+    const existingStyle = document.getElementById(styleId)
+
+    if (existingStyle) {
+      existingStyle.textContent = extractedCSS
+    } else {
+      const style = document.createElement('style')
+      style.id = styleId
+      style.textContent = extractedCSS
+      document.head.appendChild(style)
+    }
+
+    return () => {
+      document.getElementById(styleId)?.remove()
+    }
+  }, [extractedCSS])
+
+  const items = useMemo(() => {
+    const flat: Array<{
+      type: 'parent' | 'child'
+      label: string
+      targetSection?: string
+      scrollOffset?: number
+      wideOnHover?: number
+    }> = []
+
+    parentSections.forEach((p) => {
+      flat.push({ type: 'parent', label: p.label })
+
+      p.children?.forEach((c) =>
+        flat.push({
+          type: 'child',
+          label: c.label,
+          targetSection: c.targetSection,
+          scrollOffset: c.scrollOffset,
+          wideOnHover: c.wideOnHover,
+        }),
+      )
+    })
+
+    return flat
+  }, [parentSections])
+
+  const positionClass = position === 'left' ? 'left-2' : 'right-2'
+
+  const asideContent = (
+    <aside
+      className={[
+        'aside-scroll-block group fixed top-16 z-200 flex items-start overflow-hidden opacity-100 shadow-lg transition-[width,height,max-width,max-height,border-radius,padding] duration-300 delay-50 hover:delay-0 focus-within:delay-0',
+        'h-[2.3rem] w-[2.3rem] max-w-48 max-h-[30vh] p-px',
+        'rounded-2xl backdrop-blur-[10px]',
+        'border border-solid border-stone-300 shadow-[inset_0_0_18px_0px_rgb(120_113_108/18%)] dark:border-ridge dark:border-stone-800 dark:bg-background dark:shadow-[inset_0_0_20px_#ffffff70]',
+        'hover:h-auto hover:w-[calc(100%+1rem)] hover:max-w-60 hover:max-h-[40vh] hover:rounded-2xl hover:p-1 hover:duration-200 focus-within:h-auto focus-within:w-[calc(100%+1rem)] focus-within:max-w-60 focus-within:max-h-[40vh] focus-within:rounded-2xl focus-within:p-1',
+        positionClass,
+      ].join(' ')}
+      style={{
+        opacity: 1,
+        transform: 'none',
+        [position]: `${offsetFromEdge}px`,
+      }}
+    >
+      <div
+        data-lenis-prevent
+        className={[
+          'aside-inner-box relative flex h-full w-full overflow-hidden p-1 text-[14px] tracking-tight backdrop-blur-md transition-all duration-300',
+          'rounded-2xl border border-stone-300 bg-stone-100/95 shadow-2xl dark:bg-[rgba(5,5,5,0.5)]',
+          'dark:border-[rgba(152,3,226,0.15)] dark:bg-[rgba(22,20,34,0.9)]',
+          'group-hover:rounded-xl group-hover:p-0.5 group-focus-within:rounded-xl group-focus-within:p-0',
+        ].join(' ')}
+      >
+        <div className="w-full overflow-hidden">
+          <ArrowDownWideNarrow className="icon-arrow-down-wide-narrow color-alt sticky left-0 top-0 z-100 h-auto w-6 shrink-0 p-1" />
+
+          {/* <FadeEdges /> */}
+
+          <nav
+            data-lenis-prevent
+            className="aside-nav-list pointer-events-none relative m-0 flex h-fit max-h-[40vh] w-full flex-col gap-2 overflow-x-clip overflow-y-auto px-0 pb-24 pt-2 text-stone-800 opacity-0 transition-opacity duration-150 group-hover:pointer-events-auto group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:opacity-100 [-ms-overflow-style:none] scrollbar-none [&::-webkit-scrollbar]:hidden [&::-webkit-scrollbar]:h-0 [&::-webkit-scrollbar]:w-0 dark:text-stone-200"
+          >
+            {items.map((it, i) => {
+              if (it.type === 'parent') {
+                return (
+                  <React.Fragment key={`p-${i}`}>
+                    <ParentRow label={it.label} index={i} />
+                    <Divider />
+                    <Divider />
+                  </React.Fragment>
+                )
+              }
+
+              return (
+                <React.Fragment key={`c-${i}`}>
+                  <ChildRow
+                    targetSection={it.targetSection}
+                    label={it.label}
+                    index={i}
+                    wideOnHover={it.wideOnHover ?? 55}
+                    scrollOffset={it.scrollOffset ?? -100}
+                  />
+                  <Divider />
+                  <Divider />
+                  <Divider />
+                </React.Fragment>
+              )
+            })}
+          </nav>
+        </div>
+      </div>
+
+      <style jsx global>{`
+        .aside-nav-list {
+          -ms-overflow-style: none !important;
+          scrollbar-width: none !important;
+          overscroll-behavior: contain;
+        }
+
+        .aside-nav-list::-webkit-scrollbar,
+        .aside-nav-list *::-webkit-scrollbar {
+          display: none !important;
+          width: 0 !important;
+          height: 0 !important;
+          background: transparent !important;
+        }
+
+        .aside-scroll-block {
+          --aside-nav-line: rgb(120 113 108);
+          border-style: ridge;
+        }
+
+        .dark .aside-scroll-block {
+          --aside-nav-line: rgba(255, 255, 255, 0.65);
+        }
+      `}</style>
+    </aside>
+  )
+
+  if (!mounted || typeof window === 'undefined') return null
+
+  return createPortal(asideContent, document.body)
+}
+
+export { AsideNav as DDAsideNav }
+export default AsideNav