blocks-dusted 0.1.11 → 0.1.12

package/templates/blocks/DDHG-NavCodeGrid/Component.tsx

@@ -1,213 +1,227 @@
-'use client'
-
-import Image from 'next/image'
-import Link from 'next/link'
-import * as LucideIcons from 'lucide-react'
-import React from 'react'
-
-import { getMediaUrl } from '@/utilities/getMediaUrl'
-import { cn } from '@/utilities/ui'
-
-type PortableDoc = {
-  slug?: string | null
-  breadcrumbs?: Array<{ url?: string | null }> | null
-  [key: string]: unknown
-}
-
-type Media = {
-  url?: string | null
-  alt?: string | null
-  [key: string]: unknown
-}
-
-type LinkReference =
-  | { relationTo: 'pages'; value: number | PortableDoc }
-  | { relationTo: 'posts'; value: number | PortableDoc }
-  | { relationTo: 'projects'; value: number | PortableDoc }
-  | { relationTo: 'thoughts'; value: number | PortableDoc }
-
-type NavCodeGridLink = {
-  type?: 'reference' | 'custom' | null
-  reference?: LinkReference | null
-  url?: string | null
-  label?: string | null
-  newTab?: boolean | null
-  icon?: string | null
-  iconPosition?: 'before' | 'after' | null
-  customIcon?: number | Media | null
-} | null
-
-export type DDHGNavCodeGridItem = {
-  id?: string | null
-  code?: string | null
-  link?: NavCodeGridLink
-}
-
-export type DDHGNavCodeGridProps = {
-  items?: DDHGNavCodeGridItem[] | null
-  defaultHref?: string | null
-  containerClassName?: string | null
-  gridClassName?: string | null
-  cellClassName?: string | null
-  showIcons?: boolean | null
-}
-
-const getPageURLFromDoc = (doc: PortableDoc | number): string | null => {
-  if (typeof doc === 'number') return null
-  const crumbs = Array.isArray(doc?.breadcrumbs) ? doc.breadcrumbs : []
-  if (crumbs.length) {
-    const last = crumbs[crumbs.length - 1]
-    if (typeof last?.url === 'string' && last.url) return last.url
-  }
-  const slug = doc?.slug
-  if (!slug || slug === 'home') return '/'
-  return slug.startsWith('/') ? slug : `/${slug}`
-}
-
-const getDocumentSlug = (doc: PortableDoc | number): string | null => {
-  if (typeof doc === 'number') return null
-  return doc?.slug || null
-}
-
-const getCollectionPath = (relationTo: LinkReference['relationTo']): string => {
-  if (relationTo === 'posts') return 'internal-docs'
-  if (relationTo === 'thoughts') return 'thoughts'
-  if (relationTo === 'projects') return 'archives'
-  return ''
-}
-
-const isExternalUrl = (href: string): boolean =>
-  href.startsWith('http://') ||
-  href.startsWith('https://') ||
-  href.startsWith('mailto:') ||
-  href.startsWith('tel:')
-
-const resolveHref = (link: NavCodeGridLink, defaultHref = '/archive'): string => {
-  if (!link) return defaultHref
-  if (link.type === 'custom' && link.url) return link.url
-  if (link.type === 'reference' && link.reference?.value) {
-    const { relationTo, value } = link.reference
-    if (relationTo === 'pages') return getPageURLFromDoc(value) || defaultHref
-    const slug = getDocumentSlug(value)
-    if (!slug) return defaultHref
-    const basePath = getCollectionPath(relationTo)
-    return basePath ? `/${basePath}/${slug}` : `/${slug}`
-  }
-  return defaultHref
-}
-
-const renderIcon = (link: NavCodeGridLink, showIcons = true) => {
-  if (!showIcons || !link) return null
-
-  if (link.customIcon && typeof link.customIcon === 'object') {
-    const iconUrl = getMediaUrl(link.customIcon.url)
-    if (iconUrl) {
-      return (
-        <span className="inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center overflow-hidden">
-          <Image
-            src={iconUrl}
-            alt={link.customIcon.alt || ''}
-            width={14}
-            height={14}
-            className="m-0 block h-full w-full object-contain"
-          />
-        </span>
-      )
-    }
-  }
-
-  if (link.icon) {
-    const LucideIcon = LucideIcons[link.icon as keyof typeof LucideIcons] as
-      | React.ComponentType<{ className?: string }>
-      | undefined
-    if (LucideIcon) {
-      return (
-        <span className="inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center">
-          <LucideIcon className="h-3.5 w-3.5" />
-        </span>
-      )
-    }
-  }
-
-  return null
-}
-
-const getDelayClass = (index: number) => {
-  const delay = Math.min(index * 40, 320)
-  return `[transition-delay:${delay}ms]`
-}
-
-export const DDHGNavCodeGrid: React.FC<DDHGNavCodeGridProps> = ({
-  items,
-  defaultHref = '/archive',
-  containerClassName,
-  gridClassName,
-  cellClassName,
-  showIcons = true,
-}) => {
-  if (!Array.isArray(items) || items.length === 0) return null
-
-  return (
-    <div className={cn('w-full', containerClassName)}>
-      <div className={cn('grid grid-cols-2 border border-border sm:grid-cols-4 !gap-0', gridClassName)}>
-        {items.map((item, index) => {
-          const link = item.link || null
-          const href = resolveHref(link, defaultHref || '/archive')
-          const label = link?.label || item.code || 'Archive'
-          const icon = renderIcon(link, Boolean(showIcons))
-          const iconPosition = link?.iconPosition || 'before'
-          const target = link?.newTab ? '_blank' : undefined
-          const rel = link?.newTab ? 'noopener noreferrer' : undefined
-          const className = cn(
-            'menu-cell-hover group bg-transparent backdrop-blur-2xl border border-[var(--hg-50)] [border-style:outset] [text-shadow:0px_2px_4px_#ffffff45] relative flex items-center justify-center gap-2 py-2.5 text-[10px] font-normal uppercase tracking-[0.1em] text-[#6b6860] transition-all duration-200 hover:text-stone-700 dark:text-stone-200 sm:py-3 sm:text-[10px] md:py-4',
-            '--border-r --border-b --border-border',
-            (index + 1) % 4 === 0 ? '--sm:border-r-0' : '--border-border ',
-            index >= 4 ? '--sm:border-b-0' : '',
-            (index + 1) % 2 === 0 ? '--border-r-0' : '--border-r',
-            index >= 6 ? '--border-b-0' : '--border-b',
-            getDelayClass(index),
-            cellClassName,
-          )
-
-          const content = (
-            <>
-              {icon && iconPosition === 'before' && icon}
-              <span className="relative z-10">{label}</span>
-              {icon && iconPosition === 'after' && icon}
-            </>
-          )
-
-          if (isExternalUrl(href)) {
-            return (
-              <a
-                key={item.id || `${label}-${index}`}
-                href={href}
-                target={target}
-                rel={rel}
-                className={className}
-                style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 400, position: 'relative', textDecoration: 'none' }}
-              >
-                {content}
-              </a>
-            )
-          }
-
-          return (
-            <Link
-              key={item.id || `${label}-${index}`}
-              href={href}
-              target={target}
-              rel={rel}
-              className={className}
-              style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 400, position: 'relative', textDecoration: 'none' }}
-            >
-              {content}
-            </Link>
-          )
-        })}
-      </div>
-    </div>
-  )
-}
-
-export default DDHGNavCodeGrid
+'use client'
+
+import Image from 'next/image'
+import Link from 'next/link'
+import * as LucideIcons from 'lucide-react'
+import React from 'react'
+
+import { getMediaUrl } from '@/utilities/getMediaUrl'
+import { cn } from '@/utilities/ui'
+
+type PortableDoc = {
+  slug?: string | null
+  breadcrumbs?: Array<{ url?: string | null }> | null
+  [key: string]: unknown
+}
+
+type Media = {
+  url?: string | null
+  alt?: string | null
+  [key: string]: unknown
+}
+
+type LinkReference =
+  | { relationTo: 'pages'; value: number | PortableDoc }
+  | { relationTo: 'posts'; value: number | PortableDoc }
+  | { relationTo: 'projects'; value: number | PortableDoc }
+  | { relationTo: 'thoughts'; value: number | PortableDoc }
+
+type NavCodeGridLink = {
+  type?: 'reference' | 'custom' | null
+  reference?: LinkReference | null
+  url?: string | null
+  label?: string | null
+  newTab?: boolean | null
+  icon?: string | null
+  iconPosition?: 'before' | 'after' | null
+  customIcon?: number | Media | null
+} | null
+
+export type DDHGNavCodeGridItem = {
+  id?: string | null
+  code?: string | null
+  link?: NavCodeGridLink
+}
+
+export type DDHGNavCodeGridProps = {
+  items?: DDHGNavCodeGridItem[] | null
+  defaultHref?: string | null
+  containerClassName?: string | null
+  gridClassName?: string | null
+  cellClassName?: string | null
+  showIcons?: boolean | null
+}
+
+const getPageURLFromDoc = (doc: PortableDoc | number): string | null => {
+  if (typeof doc === 'number') return null
+  const crumbs = Array.isArray(doc?.breadcrumbs) ? doc.breadcrumbs : []
+  if (crumbs.length) {
+    const last = crumbs[crumbs.length - 1]
+    if (typeof last?.url === 'string' && last.url) return last.url
+  }
+  const slug = doc?.slug
+  if (!slug || slug === 'home') return '/'
+  return slug.startsWith('/') ? slug : `/${slug}`
+}
+
+const getDocumentSlug = (doc: PortableDoc | number): string | null => {
+  if (typeof doc === 'number') return null
+  return doc?.slug || null
+}
+
+const getCollectionPath = (relationTo: LinkReference['relationTo']): string => {
+  if (relationTo === 'posts') return 'internal-docs'
+  if (relationTo === 'thoughts') return 'thoughts'
+  if (relationTo === 'projects') return 'archives'
+  return ''
+}
+
+const isExternalUrl = (href: string): boolean =>
+  href.startsWith('http://') ||
+  href.startsWith('https://') ||
+  href.startsWith('mailto:') ||
+  href.startsWith('tel:')
+
+const resolveHref = (link: NavCodeGridLink, defaultHref = '/archive'): string => {
+  if (!link) return defaultHref
+  if (link.type === 'custom' && link.url) return link.url
+  if (link.type === 'reference' && link.reference?.value) {
+    const { relationTo, value } = link.reference
+    if (relationTo === 'pages') return getPageURLFromDoc(value) || defaultHref
+    const slug = getDocumentSlug(value)
+    if (!slug) return defaultHref
+    const basePath = getCollectionPath(relationTo)
+    return basePath ? `/${basePath}/${slug}` : `/${slug}`
+  }
+  return defaultHref
+}
+
+const renderIcon = (link: NavCodeGridLink, showIcons = true) => {
+  if (!showIcons || !link) return null
+
+  if (link.customIcon && typeof link.customIcon === 'object') {
+    const iconUrl = getMediaUrl(link.customIcon.url)
+    if (iconUrl) {
+      return (
+        <span className="inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center overflow-hidden">
+          <Image
+            src={iconUrl}
+            alt={link.customIcon.alt || ''}
+            width={14}
+            height={14}
+            className="m-0 block h-full w-full object-contain"
+          />
+        </span>
+      )
+    }
+  }
+
+  if (link.icon) {
+    const LucideIcon = LucideIcons[link.icon as keyof typeof LucideIcons] as
+      React.ComponentType<{ className?: string }> | undefined
+    if (LucideIcon) {
+      return (
+        <span className="inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center">
+          <LucideIcon className="h-3.5 w-3.5" />
+        </span>
+      )
+    }
+  }
+
+  return null
+}
+
+const getDelayClass = (index: number) => {
+  const delay = Math.min(index * 40, 320)
+  return `[transition-delay:${delay}ms]`
+}
+
+export const DDHGNavCodeGrid: React.FC<DDHGNavCodeGridProps> = ({
+  items,
+  defaultHref = '/archive',
+  containerClassName,
+  gridClassName,
+  cellClassName,
+  showIcons = true,
+}) => {
+  if (!Array.isArray(items) || items.length === 0) return null
+
+  return (
+    <div className={cn('w-full max-w-7xl mx-auto', containerClassName, 'pt-24')}>
+      <div
+        className={cn(
+          'grid grid-cols-2 overflow-hidden bg-stone-100/50 dark:bg-stone-900/50 sm:grid-cols-4 !gap-0 shadow-lg',
+          gridClassName,
+        )}
+      >
+        {items.map((item, index) => {
+          const link = item.link || null
+          const href = resolveHref(link, defaultHref || '/archive')
+          const label = link?.label || item.code || 'Archive'
+          const icon = renderIcon(link, Boolean(showIcons))
+          const iconPosition = link?.iconPosition || 'before'
+          const target = link?.newTab ? '_blank' : undefined
+          const rel = link?.newTab ? 'noopener noreferrer' : undefined
+          const className = cn(
+            'menu-cell-hover group relative flex items-center justify-center gap-2 bg-stone-200/50 py-2.5 text-xs font-normal uppercase tracking-[0.1em] text-sm [text-shadow:0px_2px_4px_#ffffff45] backdrop-blur-2xl transition-all duration-300 hover:-translate-y-0.5 hover:bg-stone-200/80 hover:text-stone-700 dark:bg-stone-900/50 dark:text-stone-200 dark:hover:bg-stone-800/70 sm:py-3 sm:text-xs md:py-4 hover:shadow-2xl',
+            'border-r border-b border-border',
+            (index + 1) % 4 === 0 ? 'sm:border-r-0' : ' ',
+            index >= 4 ? 'sm:border-b-0' : '',
+            (index + 1) % 2 === 0 ? 'border-r-0' : 'border-r',
+            index >= 6 ? 'border-b-0' : 'border-b',
+            getDelayClass(index),
+            cellClassName,
+          )
+
+          const content = (
+            <>
+              {icon && iconPosition === 'before' && icon}
+              <span className="relative z-10">{label}</span>
+              {icon && iconPosition === 'after' && icon}
+            </>
+          )
+
+          if (isExternalUrl(href)) {
+            return (
+              <a
+                key={item.id || `${label}-${index}`}
+                href={href}
+                target={target}
+                rel={rel}
+                className={className}
+                style={{
+                  fontFamily: "'Space Grotesk', sans-serif",
+                  fontWeight: 400,
+                  position: 'relative',
+                  textDecoration: 'none',
+                }}
+              >
+                {content}
+              </a>
+            )
+          }
+
+          return (
+            <Link
+              key={item.id || `${label}-${index}`}
+              href={href}
+              target={target}
+              rel={rel}
+              className={className}
+              style={{
+                fontFamily: "'Space Grotesk', sans-serif",
+                fontWeight: 400,
+                position: 'relative',
+                textDecoration: 'none',
+              }}
+            >
+              {content}
+            </Link>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+export default DDHGNavCodeGrid