blocks-dusted 0.1.11 → 0.1.13

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

@@ -1,243 +1,246 @@
-'use client'
-
-import { ArrowRight } from 'lucide-react'
-import Image from 'next/image'
-import Link from 'next/link'
-import React, { useState } from 'react'
-
-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 HighlightArchiveCardsLink = {
-  type?: 'reference' | 'custom' | null
-  reference?: LinkReference | null
-  url?: string | null
-  label?: string | null
-  newTab?: boolean | null
-} | null
-
-type HighlightArchiveCardsItem = {
-  id?: string | null
-  code?: string | null
-  title?: string | null
-  type?: string | null
-  bgImage?: number | Media | null
-  priority?: boolean | null
-  link?: HighlightArchiveCardsLink
-}
-
-export type DDHGHighlightArcProps = {
-  gridColumns?: '1' | '2' | '3' | '4' | null
-  highlights?: HighlightArchiveCardsItem[] | null
-}
-
-const getGridClassName = (gridColumns?: DDHGHighlightArcProps['gridColumns']) => {
-  switch (gridColumns) {
-    case '2':
-      return 'grid-cols-1 md:grid-cols-2'
-    case '3':
-      return 'grid-cols-1 md:grid-cols-2 xl:grid-cols-3'
-    case '4':
-      return 'grid-cols-1 md:grid-cols-2 xl:grid-cols-4'
-    case '1':
-    default:
-      return 'grid-cols-1'
-  }
-}
-
-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 'thoughts'
-  if (relationTo === 'thoughts') return 'thoughts'
-  if (relationTo === 'projects') return 'archives'
-  return ''
-}
-
-const resolveHref = (link: HighlightArchiveCardsLink): string | null => {
-  if (!link) return null
-  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)
-
-    const slug = getDocumentSlug(value)
-    if (!slug) return null
-    const basePath = getCollectionPath(relationTo)
-    return basePath ? `/${basePath}/${slug}` : `/${slug}`
-  }
-
-  return null
-}
-
-const isExternalHref = (href: string): boolean =>
-  href.startsWith('http://') ||
-  href.startsWith('https://') ||
-  href.startsWith('mailto:') ||
-  href.startsWith('tel:')
-
-export const DDHGHighlightArc: React.FC<DDHGHighlightArcProps> = ({
-  gridColumns = '1',
-  highlights,
-}) => {
-  const [hoveredIdx, setHoveredIdx] = useState<number | null>(null)
-
-  if (!Array.isArray(highlights) || highlights.length === 0) return null
-
-  return (
-    <div className={cn('grid origin-top scale-100 !gap-0', getGridClassName(gridColumns))}>
-      {highlights.map((h, i) => {
-        const isHovered = hoveredIdx === i
-        const bgImage = typeof h.bgImage === 'object' && h.bgImage !== null ? h.bgImage : null
-        const href = resolveHref(h.link || null)
-        const label = h.link?.label || 'View Archive'
-        const target = h.link?.newTab ? '_blank' : undefined
-        const rel = h.link?.newTab ? 'noopener noreferrer' : undefined
-        const isExternal = href ? isExternalHref(href) : false
-        const key = h.id != null ? `id-${h.id}` : `idx-${i}`
-
-        const cardClassName = cn(
-          'group relative block h-[4rem] overflow-hidden rounded-[0px] border border-border px-5 py-5 !no-underline shadow-[0_18px_60px_rgba(31,31,30,0.12),inset_0_1px_0_rgba(255,255,255,0.62)] transition-all duration-500 ease-out hover:shadow-[0_24px_74px_rgba(31,31,30,0.16),inset_0_1px_0_rgba(255,255,255,0.72)]',
-          'before:pointer-events-none before:absolute before:inset-0 before:z-[1] --before:bg-[linear-gradient(90deg,rgba(255,255,255,0.62),rgba(255,255,255,0.22)_42%,rgba(255,255,255,0.06))] before:transition-opacity before:duration-500',
-          'after:pointer-events-none after:absolute after:inset-0 after:z-[2] after:opacity-[0.08] after:mix-blend-multiply --after:[background-image:radial-gradient(circle_at_20%_30%,rgba(31,31,30,0.5)_0_1px,transparent_1px),--radial-gradient(circle_at_80%_70%,rgba(255,255,255,0.8)_0_1px,transparent_1px)] after:[background-size:14px_14px,19px_19px]',
-          href
-            ? 'cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stone-500/40 focus-visible:ring-offset-2'
-            : 'cursor-default',
-        )
-
-        const buttonClassName = cn(
-          'inline-flex items-center gap-2 whitespace-nowrap text-xs font-medium tracking-[0.04em] text-stone-700 transition-all duration-300',
-          'group-hover:text-[#1F1F1E]',
-          isHovered ? 'translate-x-0 opacity-100' : 'translate-x-2 opacity-100',
-          !href && 'opacity-40',
-        )
-
-        const cardContent = (
-          <>
-            <div className="HighCardsContent absolute inset-0 z-0 bg-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-70" />
-
-            {bgImage?.url && (
-              <div className="HighCardImg absolute inset-0 z-[1] overflow-hidden opacity-0 transition-opacity duration-500 ease-out group-hover:opacity-100">
-                <div className="absolute left-0 top-0 h-[260%] w-full transition-transform duration-700 ease-out group-hover:-translate-y-[60%]">
-                  <Image
-                    src={bgImage.url}
-                    alt={bgImage.alt ?? h.title ?? ''}
-                    fill
-                    priority={Boolean(h.priority)}
-                    className="object-cover"
-                    sizes="(max-width: 768px) 100vw, 400px"
-                  />
-                </div>
-
-                {h.title && (
-                  <p className="HighCardTitle absolute left-0 top-0 z-10 px-4 py-4 text-[10px] font-semibold leading-snug text-stone-100 dark:text-stone-100 transition-colors duration-300">
-                    {h.title}
-                  </p>
-                )}
-
-                <div className="HighCardImgBg absolute inset-0 z-[2] bg-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-70" />
-                <div className="absolute mix-blend-darken inset-0 z-[2] bg-gradient-to-r from-[#151515bf] via-[#20202029] to-[#00000000] opacity-0 transition-opacity duration-500 group-hover:opacity-70" />
-              </div>
-            )}
-
-            <div className="card-info relative z-[3] translate-y-0 transition-transform duration-500 group-hover:translate-y-[-7rem]">
-              <div className="relative z-10 flex h-full items-start justify-between gap-6">
-                <span className="relative w-full ml-auto max-w-fit right-0 -top-2 block origin-top-right scale-80">
-                  <span className={buttonClassName}>
-                    <span className="block">{label}</span>
-                    <ArrowRight
-                      size={14}
-                      className="transition-transform duration-300 group-hover:translate-x-1"
-                    />
-                  </span>
-                </span>
-              </div>
-            </div>
-          </>
-        )
-
-        if (!href) {
-          return (
-            <article
-              key={key}
-              className={cardClassName}
-              onMouseEnter={() => setHoveredIdx(i)}
-              onMouseLeave={() => setHoveredIdx(null)}
-            >
-              {cardContent}
-            </article>
-          )
-        }
-
-        if (isExternal) {
-          return (
-            <a
-              key={key}
-              href={href}
-              target={target}
-              rel={rel}
-              aria-label={label}
-              className={cardClassName}
-              onMouseEnter={() => setHoveredIdx(i)}
-              onMouseLeave={() => setHoveredIdx(null)}
-            >
-              {cardContent}
-            </a>
-          )
-        }
-
-        return (
-          <Link
-            key={key}
-            href={href}
-            target={target}
-            rel={rel}
-            aria-label={label}
-            className={cardClassName}
-            onMouseEnter={() => setHoveredIdx(i)}
-            onMouseLeave={() => setHoveredIdx(null)}
-          >
-            {cardContent}
-          </Link>
-        )
-      })}
-    </div>
-  )
-}
-
-export default DDHGHighlightArc
+'use client'
+
+import { ArrowRight } from 'lucide-react'
+import Image from 'next/image'
+import Link from 'next/link'
+import React, { useState } from 'react'
+
+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: 'projects'; value: number | PortableDoc }
+  | { relationTo: 'thoughts'; value: number | PortableDoc }
+
+type HighlightArchiveCardsLink = {
+  type?: 'reference' | 'custom' | null
+  reference?: LinkReference | null
+  url?: string | null
+  label?: string | null
+  newTab?: boolean | null
+} | null
+
+type HighlightArchiveCardsItem = {
+  id?: string | null
+  code?: string | null
+  title?: string | null
+  type?: string | null
+  bgImage?: number | Media | null
+  priority?: boolean | null
+  link?: HighlightArchiveCardsLink
+}
+
+export type DDHGHighlightArcProps = {
+  gridColumns?: '1' | '2' | '3' | '4' | null
+  highlights?: HighlightArchiveCardsItem[] | null
+}
+
+const getGridClassName = (gridColumns?: DDHGHighlightArcProps['gridColumns']) => {
+  switch (gridColumns) {
+    case '2':
+      return 'grid-cols-1 md:grid-cols-2'
+    case '3':
+      return 'grid-cols-1 md:grid-cols-2 xl:grid-cols-3'
+    case '4':
+      return 'grid-cols-1 md:grid-cols-2 xl:grid-cols-4'
+    case '1':
+    default:
+      return 'grid-cols-1'
+  }
+}
+
+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 === 'thoughts') return 'thoughts'
+  if (relationTo === 'projects') return 'archives'
+  return ''
+}
+
+const resolveHref = (link: HighlightArchiveCardsLink): string | null => {
+  if (!link) return null
+  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)
+
+    const slug = getDocumentSlug(value)
+    if (!slug) return null
+    const basePath = getCollectionPath(relationTo)
+    return basePath ? `/${basePath}/${slug}` : `/${slug}`
+  }
+
+  return null
+}
+
+const isExternalHref = (href: string): boolean =>
+  href.startsWith('http://') ||
+  href.startsWith('https://') ||
+  href.startsWith('mailto:') ||
+  href.startsWith('tel:')
+
+export const DDHGHighlightArc: React.FC<DDHGHighlightArcProps> = ({
+  gridColumns = '1',
+  highlights,
+}) => {
+  const [hoveredIdx, setHoveredIdx] = useState<number | null>(null)
+
+  if (!Array.isArray(highlights) || highlights.length === 0) return null
+
+  return (
+    <div
+      className={cn(
+        'mx-auto grid w-full max-w-7xl origin-top scale-100 gap-0!',
+        getGridClassName(gridColumns),
+      )}
+    >
+      {highlights.map((h, i) => {
+        const isHovered = hoveredIdx === i
+        const bgImage = typeof h.bgImage === 'object' && h.bgImage !== null ? h.bgImage : null
+        const href = resolveHref(h.link || null)
+        const label = h.link?.label || 'View Archive'
+        const target = h.link?.newTab ? '_blank' : undefined
+        const rel = h.link?.newTab ? 'noopener noreferrer' : undefined
+        const isExternal = href ? isExternalHref(href) : false
+        const key = h.id != null ? `id-${h.id}` : `idx-${i}`
+
+        const cardClassName = cn(
+          'group relative block h-[4rem] overflow-hidden rounded-md squircle border border-border bg-stone-100/50 px-5 py-5 !no-underline shadow-[0_18px_60px_rgba(31,31,30,0.12),inset_0_1px_0_rgba(255,255,255,0.62)] transition-all duration-500 ease-out hover:-translate-y-1 hover:shadow-[0_24px_74px_rgba(31,31,30,0.16),inset_0_1px_0_rgba(255,255,255,0.72)] dark:bg-stone-900/50',
+          'before:pointer-events-none before:absolute before:inset-0 before:z-[1] --before:bg-[linear-gradient(90deg,rgba(255,255,255,0.62),rgba(255,255,255,0.22)_42%,rgba(255,255,255,0.06))] before:transition-opacity before:duration-500',
+          'after:pointer-events-none after:absolute after:inset-0 after:z-2 after:opacity-[0.08] after:mix-blend-multiply --after:[background-image:radial-gradient(circle_at_20%_30%,rgba(31,31,30,0.5)_0_1px,transparent_1px),--radial-gradient(circle_at_80%_70%,rgba(255,255,255,0.8)_0_1px,transparent_1px)] after:[background-size:14px_14px,19px_19px]',
+          href
+            ? 'cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stone-500/40 focus-visible:ring-offset-2'
+            : 'cursor-default',
+        )
+
+        const buttonClassName = cn(
+          'inline-flex items-center gap-2 whitespace-nowrap text-sm font-medium tracking-[0.04em] text-stone-700 transition-all duration-300',
+          'group-hover:text-[#1F1F1E]',
+          isHovered ? 'translate-x-0 opacity-100' : 'translate-x-2 opacity-100',
+          !href && 'opacity-40',
+        )
+
+        const cardContent = (
+          <>
+            <div className="HighCardsContent absolute inset-0 z-0 bg-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-70" />
+
+            {bgImage?.url && (
+              <div className="HighCardImg absolute inset-0 z-1 overflow-hidden opacity-0 transition-opacity duration-500 ease-out group-hover:opacity-100">
+                <div className="absolute left-0 top-0 h-[260%] w-full transition-transform duration-700 ease-out group-hover:translate-y-[-60%]">
+                  <Image
+                    src={bgImage.url}
+                    alt={bgImage.alt ?? h.title ?? ''}
+                    fill
+                    priority={Boolean(h.priority)}
+                    className="object-cover"
+                    sizes="(max-width: 768px) 100vw, 400px"
+                  />
+                </div>
+
+                {h.title && (
+                  <p className="HighCardTitle absolute left-0 top-0 z-10 px-4 py-4 text-sm font-semibold leading-snug text-stone-100 dark:text-stone-100 transition-colors duration-300">
+                    {h.title}
+                  </p>
+                )}
+
+                <div className="HighCardImgBg absolute inset-0 z-2 bg-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-70" />
+                <div className="absolute mix-blend-darken inset-0 z-2 bg-linear-to-r from-[#151515bf] via-[#20202029] to-[#00000000] opacity-0 transition-opacity duration-500 group-hover:opacity-70" />
+              </div>
+            )}
+
+            <div className="card-info relative z-3 translate-y-0 transition-transform duration-500 group-hover:-translate-y-28">
+              <div className="relative z-10 flex h-full items-start justify-between gap-6">
+                <span className="relative w-full ml-auto max-w-fit right-0 -top-2 block origin-top-right scale-95">
+                  <span className={buttonClassName}>
+                    <span className="block">{label}</span>
+                    <ArrowRight
+                      size={14}
+                      className="transition-transform duration-300 group-hover:translate-x-1"
+                    />
+                  </span>
+                </span>
+              </div>
+            </div>
+          </>
+        )
+
+        if (!href) {
+          return (
+            <article
+              key={key}
+              className={cardClassName}
+              onMouseEnter={() => setHoveredIdx(i)}
+              onMouseLeave={() => setHoveredIdx(null)}
+            >
+              {cardContent}
+            </article>
+          )
+        }
+
+        if (isExternal) {
+          return (
+            <a
+              key={key}
+              href={href}
+              target={target}
+              rel={rel}
+              aria-label={label}
+              className={cardClassName}
+              onMouseEnter={() => setHoveredIdx(i)}
+              onMouseLeave={() => setHoveredIdx(null)}
+            >
+              {cardContent}
+            </a>
+          )
+        }
+
+        return (
+          <Link
+            key={key}
+            href={href}
+            target={target}
+            rel={rel}
+            aria-label={label}
+            className={cardClassName}
+            onMouseEnter={() => setHoveredIdx(i)}
+            onMouseLeave={() => setHoveredIdx(null)}
+          >
+            {cardContent}
+          </Link>
+        )
+      })}
+    </div>
+  )
+}
+
+export default DDHGHighlightArc