blocks-dusted 0.1.9 → 0.1.11

package/templates/blocks/DD-FluidBtn/ButtonsEyeCatching.tsx

@@ -0,0 +1,628 @@
+'use client'
+
+import * as React from 'react'
+import Link from 'next/link'
+import { usePathname, useRouter } from 'next/navigation'
+import { cn } from '@/utilities/ui'
+import { Button, type ButtonProps } from '@/components/ui/button'
+import type { Page, Post } from '@/payload-types'
+import * as LucideIcons from 'lucide-react'
+const useDrawerClose = () => undefined
+
+// import './index.scss'
+
+
+const useDrawerCloseIfAvailable = () => {
+  try {
+    return useDrawerClose()
+  } catch {
+    return undefined
+  }
+}
+
+export type ButtonsEyeCatchingProps = {
+  variant?: 'v1' | 'v2' | 'v3' | 'v4' | 'v5' | 'v6' | 'v7'
+  label?: string
+  displayMode?: 'iconWithLabel' | 'iconOnly' | 'labelOnly'
+  iconPosition?: 'before' | 'after'
+  iconName?: string
+  type?: 'custom' | 'reference' | null
+  reference?: {
+    relationTo: 'pages' | 'posts'
+    value: Page | Post | string | number
+  } | null
+  url?: string | null
+  newTab?: boolean
+  size?: ButtonProps['size']
+  className?: string
+  wrapperClassName?: string
+  fullWidth?: boolean
+  disabled?: ButtonProps['disabled']
+  closeDrawerOnClick?: boolean
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void
+  onMouseEnter?: (e: React.MouseEvent<HTMLButtonElement>) => void
+  onSubmit?: (e: React.FormEvent<HTMLButtonElement>) => void
+  form?: string
+  htmlType?: 'submit' | 'button' | 'reset'
+}
+
+const getCollectionPath = (relationTo: string) => {
+  return relationTo === 'posts' ? 'posts' : relationTo
+}
+
+const getHref = (props: ButtonsEyeCatchingProps): string | null => {
+  const { type, reference, url } = props
+
+  if (type === 'reference' && reference?.value) {
+    const slug =
+      typeof reference.value === 'object' && 'slug' in reference.value
+        ? reference.value.slug
+        : typeof reference.value === 'string'
+          ? reference.value
+          : null
+
+    if (!slug) return null
+
+    const basePath =
+      reference.relationTo === 'pages' ? '' : `/${getCollectionPath(reference.relationTo)}`
+
+    return `${basePath}/${slug}`
+  }
+
+  return url || null
+}
+
+const LinkWrapper: React.FC<
+  React.PropsWithChildren<{
+    href: string
+    newTab?: boolean
+    onClick?: () => void
+    className?: string
+    closeDrawerOnClick?: boolean
+  }>
+> = ({ href, newTab, onClick, className, children, closeDrawerOnClick = true }) => {
+  const closeDrawer = useDrawerClose?.() || (() => {})
+  const pathname = usePathname()
+
+  const hashIndex = href.indexOf('#')
+  const hasHash = hashIndex >= 0
+  const basePath = hasHash ? href.slice(0, hashIndex) : href
+  const hash = hasHash ? href.slice(hashIndex) : ''
+
+  const normalise = (p?: string) => (p ? p.replace(/\/$/, '') : '')
+  const isSamePageHash = hasHash && (basePath === '' || normalise(basePath) === normalise(pathname))
+
+  const handleClick = (e: React.MouseEvent) => {
+    onClick?.()
+
+    if (isSamePageHash && hash) {
+      e.preventDefault()
+
+      const targetId = hash.slice(1)
+      const el = document.getElementById(targetId)
+
+      if (el) {
+        el.scrollIntoView({ behavior: 'smooth', block: 'start' })
+        window.history.pushState(null, '', href)
+      }
+
+      if (closeDrawerOnClick) {
+        closeDrawer()
+      }
+
+      return
+    }
+
+    if (closeDrawerOnClick && !newTab) {
+      closeDrawer()
+    }
+  }
+
+  const newTabProps = newTab ? { rel: 'noopener noreferrer', target: '_blank' } : {}
+
+  return (
+    <Link href={href} {...newTabProps} onClick={handleClick} className={className} prefetch>
+      {children}
+    </Link>
+  )
+}
+function GlassChip() {
+  return (
+    <div className="absolute w-full h-full group mx-auto left-0 right-0 rounded-2xl squircle overflow-hidden">
+      <div
+        className="
+          absolute inset-0 mx-auto
+          flex items-center justify-center
+          overflow-hidden
+          rounded-full
+          border-t border-b border-white/10
+          bg-white/[0.05]
+          text-white
+          text-[18px]
+          font-bold
+          tracking-[1px]
+          backdrop-blur-[15px]
+          shadow-[0_15px_35px_rgba(255,255,255,0.15)]
+          transition-all duration-500
+          hover:tracking-[2px]
+
+          before:absolute
+          before:left-0
+          before:top-0
+          before:h-full
+          before:w-1/2
+          before:skew-x-[45deg]
+          before:bg-[linear-gradient(to_left,rgba(255,255,255,0.22),transparent)]
+          before:transition-transform
+          before:duration-700
+          hover:before:translate-x-[220%]
+
+          after:absolute
+          after:inset-[1px]
+          after:rounded-full
+          after:border
+          after:border-white/10
+          after:shadow-[inset_0_1px_0_rgba(255,255,255,0.45),inset_0_-8px_18px_rgba(0,0,0,0.25)]
+        "
+      ></div>
+
+      <div
+        className="
+          absolute left-1/2 -translate-x-1/2
+          -top-[3px]
+          h-[8px] w-[30px]
+          rounded-full
+          bg-[#ba55d3]
+          shadow-[0_0_5px_#663399,0_0_15px_#ba55d3,0_0_30px_#663399,0_0_60px_#ff00ff]
+          transition-all duration-500
+          group-hover:top-0
+          group-hover:bg-[#ba55d355]
+          group-hover:h-full
+          group-hover:w-[80%]
+          group-hover:rounded-full
+          group-hover:delay-300
+        "
+      />
+
+      <div
+        className="
+          absolute left-1/2 -translate-x-1/2
+          -bottom-[3px]
+          h-[8px] w-[30px]
+          rounded-full
+          bg-[#ba55d3]
+          shadow-[0_0_5px_#663399,0_0_15px_#ba55d3,0_0_30px_#663399,0_0_60px_#ff00ff]
+          transition-all duration-500
+          group-hover:bottom-0
+          group-hover:bg-[#ba55d399]
+          group-hover:h-full
+          group-hover:brightness-150
+          group-hover:w-[80%]
+          group-hover:rounded-full
+          group-hover:delay-300
+        "
+      />
+    </div>
+  )
+}
+function EyeCatchingButton_v1(props: ButtonProps & { wrapperClassName?: string }) {
+  const { wrapperClassName, size = 'default', children, ...buttonProps } = props
+
+  const sizeClasses = {
+    sm: 'h-8 w-fit',
+    default: 'h-10 w-40',
+    lg: 'h-12 w-48',
+    icon: 'h-10 w-10',
+    clear: ''
+  }
+
+  return (
+    <div
+      className={cn(
+        sizeClasses[size || 'default'],
+        wrapperClassName,
+        'relative min-w-fit overflow-hidden rounded-2xl p-0.5 font-semibold group',
+        'border-1 border-stone-800/20',
+        '-bg-card !dark:bg-zinc-900',
+        'shadow',
+        'drop-shadow-[2px_4px_6px_rgba(0,0,0,0.25)]',
+        'transition-all duration-300 hover:duration-300',
+        'hover:-translate-y-0.5 hover:scale-[1]',
+        'hover:!bg-[rgba(102,51,153,1)] hover:border-0 hover:border-[#985fd023] hover:drop-shadow-[inset_0px_0px_6px_rgba(102,51,153,1)]'
+      )}
+    >
+      <GlassChip />
+
+      <span className="absolute inset-[-1000%] animate-[spin_5s_linear_infinite] dark:bg-[conic-gradient(from_90deg_at_50%_50%,#fff_0%,#4a4a4a_7%)] bg-[conic-gradient(from_90deg_at_50%_50%,#000_0%,#fff_5%)] group-hover:bg-none rounded-2xl overflow-hidden blur-[4px] brightness-[1.2]" />
+
+      <Button
+        {...buttonProps}
+        className={cn(
+          buttonProps.className,
+          'h-full w-full rounded-full text-zinc-800 dark:text-zinc-200 backdrop-blur-xl -bg-card dark:!bg-zinc-900 flex items-center justify-center gap-2',
+          'border-2 border-ridge border-[#938eab8c]',
+          'group-hover:shadow-[inset_0_1px_6px_rgba(255,255,255,0.28),inset_0_-8px_18px_rgba(0,0,0,0.22)]',
+          'group-active:translate-y-[1px] group-active:scale-[0.985]',
+          // 'group-active:bg-[rgba(74,35,120,0.95)]',
+          'group-active:shadow-[inset_0_3px_10px_rgba(0,0,0,0.45),inset_0_1px_2px_rgba(255,255,255,0.18)]',
+          'group-active:duration-75'
+        )}
+      >
+        {children}
+      </Button>
+    </div>
+  )
+}
+
+function EyeCatchingButton_v2(props: ButtonProps & { wrapperClassName?: string }) {
+  const { wrapperClassName, size = 'default', children, ...buttonProps } = props
+
+  const sizeClasses = {
+    sm: 'h-8',
+    default: 'h-10',
+    lg: 'h-12',
+    icon: 'h-10 w-10',
+    clear: ''
+  }
+
+  return (
+    <div
+      className={cn(
+        'eyecatchingbtn-2',
+        sizeClasses[size || 'default'],
+        wrapperClassName,
+        'relative overflow-hidden rounded-2xl dark:bg-card-purple bg-violet-600 shadow border dark:border-stone-900/50 group border-stone-400 p-0.5 min-w-fit hover:bg-violet-600 hover:brightness-110 duration-300 hover:duration-300 transition-all font-semibold',
+        'transition-all duration-300 ease-out',
+        'hover:-translate-y-0.5 hover:scale-[1]',
+        'hover:border-[#985fd066] hover:shadow-[0_0_22px_rgba(152,95,208,0.32)] hover:drop-shadow-[0_8px_18px_rgba(102,51,153,0.35)]',
+        'active:translate-y-0 active:scale-[0.975]',
+        'active:shadow-[inset_0_2px_10px_rgba(0,0,0,0.35),0_0_10px_rgba(152,95,208,0.25)]',
+        'active:duration-75'
+      )}
+    >
+      <GlassChip />
+      <span className="absolute inset-[-1000%] animate-[spin_5s_linear_infinite] dark:bg-[conic-gradient(from_90deg_at_50%_50%,#fff_0%,#4a4a4a_7%)] bg-[conic-gradient(from_90deg_at_50%_50%,#000_0%,#fff_5%)] group-hover:bg-none rounded-2xl overflow-hidden blur-[4px] brightness-[1.2]" />
+      <Button
+        {...buttonProps}
+        className={cn(
+          buttonProps.className,
+          'h-full w-full rounded-full text-zinc-800 dark:text-zinc-200 backdrop-blur-xl bg-card-purple dark:bg-zinc-900 flex items-center justify-center gap-2'
+        )}
+      >
+        {children}
+      </Button>
+    </div>
+  )
+}
+
+function EyeCatchingButton_v3(props: ButtonProps & { wrapperClassName?: string }) {
+  const { wrapperClassName, size = 'default', children, ...buttonProps } = props
+
+  const sizeClasses = {
+    sm: 'h-8 w-fit',
+    default: 'h-10 w-40',
+    lg: 'h-12 w-48',
+    icon: 'h-10 w-10',
+    clear: ''
+  }
+
+  return (
+    <div
+      className={cn(
+        sizeClasses[size || 'default'],
+        wrapperClassName,
+        'relative overflow-hidden rounded-2xl dark:bg-card-purple bg-violet-600 shadow border dark:border-[rgba(132,43,222,0.5)] group  border-[rgba(132,43,222,0.5)] p-0.5 min-w-fit hover:bg-violet-600 hover:brightness-110 duration-300 hover:duration-300 transition-all font-semibold drop-shadow-xl'
+        // 'relative min-w-fit overflow-hidden rounded-2xl p-0.5 font-semibold group',
+        // 'border-2 border-[rgba(132,43,222,0.915)]',
+        // '!bg-[rgba(102,51,153,0.551)]',
+        // 'drop-shadow-[2px_4px_6px_rgba(0,0,0,0.25)]',
+        // 'transition-all duration-300 hover:duration-300 ease-in-out',
+        // 'hover:!bg-[rgba(102,51,153,0.842)] hover:!mix-blend-normal hover:brightness-110'
+      )}
+    >
+      <span className="absolute inset-[-1000%] animate-[spin_5s_linear_infinite_reverse] dark:bg-[conic-gradient(from_90deg_at_50%_50%,#fff_0%,#4a4a4a_7%)] bg-[conic-gradient(from_90deg_at_50%_50%,#000_0%,#fff_5%)] group-hover:bg-none blur-[4px] brightness-[1.2]" />
+      <Button
+        {...buttonProps}
+        className={cn(
+          buttonProps.className,
+          'h-full w-full rounded-full text-zinc-800 dark:text-zinc-800 backdrop-blur-xl bg-[radial-gradient(circle_at_center,_#e4e0e0,_#9b9898)] dark:bg-[radial-gradient(circle_at_center,_#e4e0e0,_#9b9898)] --bg-zinc-300 --dark:bg-zinc-300 flex items-center justify-center gap-2 drop-shadow-md'
+        )}
+      >
+        {children}
+      </Button>
+    </div>
+  )
+}
+
+function EyeCatchingButton_v4(props: ButtonProps & { wrapperClassName?: string }) {
+  const { wrapperClassName, size = 'default', children, ...buttonProps } = props
+
+  const sizeClasses = {
+    sm: 'h-8',
+    default: 'h-10',
+    lg: 'h-12',
+    icon: 'h-10 w-10',
+    clear: ''
+  }
+
+  return (
+    <div
+      className={cn(
+        'relative !rounded-full min-w-fit inline-flex items-center gap-1',
+        sizeClasses[size || 'default'],
+        wrapperClassName
+      )}
+    >
+      <Button
+        {...buttonProps}
+        className={cn(
+          'w-full animate-bg-shine border-[1px] rounded-full bg-card shadow-xl bg-[length:200%_100%] tracking-wide flex items-center justify-center gap-2',
+          'dark:bg-[linear-gradient(110deg,#09090B,45%,#27272A,55%,#09090B)] dark:text-zinc-200 dark:border-stone-800 font-semibold',
+          'bg-[linear-gradient(110deg,#FFF,45%,#E4E4E7,55%,#FFF)] text-zinc-800 border-stone-300',
+          'hover:border-violet-500 hover:outline hover:outline-2 hover:outline-offset-1 hover:outline-violet-600',
+          buttonProps.className
+        )}
+      >
+        {children}
+      </Button>
+    </div>
+  )
+}
+
+function EyeCatchingButton_v5(props: ButtonProps & { wrapperClassName?: string }) {
+  const { wrapperClassName, size = 'default', children, ...buttonProps } = props
+
+  const sizeClasses = {
+    sm: 'h-8',
+    default: 'h-10',
+    lg: 'h-12',
+    icon: 'h-10 w-10',
+    clear: ''
+  }
+
+  return (
+    <div
+      className={cn(
+        'relative !rounded-full min-w-fit inline-flex items-center gap-1',
+        sizeClasses[size || 'default'],
+        wrapperClassName
+      )}
+    >
+      <Button
+        {...buttonProps}
+        className={cn(
+          'w-full border border-stone-800 rounded-full shadow-xl tracking-wide flex items-center justify-center gap-2',
+          'bg-[radial-gradient(circle,_rgba(255,_255,_255,_1),_rgba(230,_230,_235,_0.95))] bg-[length:200%_100%] animate-bg-shine',
+          '!text-stone-950 hover:text-stone-950 font-semibold',
+          'hover:border-violet-500 hover:outline hover:outline-2 hover:outline-offset-1 hover:outline-violet-600',
+          buttonProps.className
+        )}
+      >
+        {children}
+      </Button>
+    </div>
+  )
+}
+
+function EyeCatchingButton_v6(props: ButtonProps & { wrapperClassName?: string }) {
+  const { wrapperClassName, size = 'default', children, ...buttonProps } = props
+
+  const sizeClasses = {
+    sm: 'h-8',
+    default: 'h-10',
+    lg: 'h-12',
+    icon: 'h-10 w-10',
+    clear: ''
+  }
+
+  return (
+    <div
+      className={cn(
+        'relative !rounded-full min-w-fit inline-flex items-center gap-1',
+        sizeClasses[size || 'default'],
+        wrapperClassName
+      )}
+    >
+      <Button
+        {...buttonProps}
+        className={cn(
+          'w-full border border-stone-800 rounded-full shadow-xl tracking-wide flex items-center justify-center gap-2',
+          'bg-[radial-gradient(circle,_rgba(190,_242,_100,_1),_rgba(132,_204,_22,_0.95))] bg-[length:200%_100%] animate-bg-shine',
+          '!text-stone-950 hover:text-stone-950 font-semibold',
+          'hover:border-violet-500 hover:outline hover:outline-2 hover:outline-offset-1 hover:outline-violet-600',
+          buttonProps.className
+        )}
+      >
+        {children}
+      </Button>
+    </div>
+  )
+}
+
+function EyeCatchingButton_v7(props: ButtonProps & { wrapperClassName?: string }) {
+  const { wrapperClassName, size = 'default', children, ...buttonProps } = props
+
+  const sizeClasses = {
+    sm: 'text-sm',
+    default: 'text-base',
+    lg: 'text-lg',
+    icon: 'text-base',
+    clear: ''
+  }
+
+  return (
+    <div className={cn('relative inline-flex items-center min-w-fit', wrapperClassName)}>
+      <Button
+        {...buttonProps}
+        variant="ghost"
+        className={cn(
+          'p-0 h-auto bg-transparent shadow-none border-0 rounded-none',
+          'tracking-wide underline-none hover:brightness-110',
+          'text-zinc-800 dark:text-zinc-200 font-semibold',
+          'hover:text-violet-300 transition-colors duration-200',
+          sizeClasses[size || 'default'],
+          buttonProps.className
+        )}
+      >
+        {children}
+      </Button>
+    </div>
+  )
+}
+
+function renderVariant(
+  variant: NonNullable<ButtonsEyeCatchingProps['variant']>,
+  props: ButtonProps & { wrapperClassName?: string }
+) {
+  switch (variant) {
+    case 'v1':
+      return <EyeCatchingButton_v1 {...props} />
+    case 'v2':
+      return <EyeCatchingButton_v2 {...props} />
+    case 'v3':
+      return <EyeCatchingButton_v3 {...props} />
+    case 'v4':
+      return <EyeCatchingButton_v4 {...props} />
+    case 'v5':
+      return <EyeCatchingButton_v5 {...props} />
+    case 'v6':
+      return <EyeCatchingButton_v6 {...props} />
+    case 'v7':
+      return <EyeCatchingButton_v7 {...props} />
+    default:
+      return <EyeCatchingButton_v1 {...props} />
+  }
+}
+
+export const ButtonsEyeCatching = ({
+  variant = 'v1',
+  label,
+  displayMode = 'iconWithLabel',
+  iconPosition = 'before',
+  iconName,
+  type: linkType,
+  reference,
+  url,
+  newTab,
+  size,
+  className,
+  wrapperClassName,
+  fullWidth,
+  disabled,
+  closeDrawerOnClick = true,
+  onClick,
+  onMouseEnter,
+  onSubmit,
+  form,
+  htmlType
+}: ButtonsEyeCatchingProps) => {
+  const closeDrawer = useDrawerClose?.() || (() => {})
+  const router = useRouter()
+  const pathname = usePathname()
+
+  const href = getHref({ type: linkType, reference, url, label })
+
+  const IconComponent =
+    iconName && LucideIcons[iconName as keyof typeof LucideIcons]
+      ? (LucideIcons[iconName as keyof typeof LucideIcons] as React.ComponentType<{
+          className?: string
+        }>)
+      : null
+
+  const hashIndex = href?.indexOf('#') ?? -1
+  const hasHash = hashIndex >= 0
+  const basePath = hasHash && href ? href.slice(0, hashIndex) : href
+  const hash = hasHash && href ? href.slice(hashIndex) : ''
+
+  const normalise = (p?: string) => (p ? p.replace(/\/$/, '') : '')
+  const isSamePageHash =
+    hasHash && (basePath === '' || normalise(basePath ?? undefined) === normalise(pathname))
+
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    if (onClick) {
+      onClick(e)
+      if (e.defaultPrevented) return
+    }
+
+    if (isSamePageHash && hash) {
+      e.preventDefault()
+
+      const targetId = hash.slice(1)
+      const el = document.getElementById(targetId)
+
+      if (el) {
+        el.scrollIntoView({ behavior: 'smooth', block: 'start' })
+
+        if (href) {
+          window.history.pushState(null, '', href)
+        }
+      }
+
+      if (closeDrawerOnClick) {
+        closeDrawer()
+      }
+
+      return
+    }
+
+    if (closeDrawerOnClick && !newTab && href) {
+      closeDrawer()
+    }
+
+    if (href) {
+      e.preventDefault()
+      router.push(href)
+    }
+  }
+
+  const iconElement =
+    IconComponent && displayMode !== 'labelOnly' ? (
+      <IconComponent
+        className={cn('h-4 w-4', size === 'sm' && 'h-3 w-3', size === 'lg' && 'h-5 w-5')}
+      />
+    ) : null
+
+  let buttonChildren: React.ReactNode
+
+  if (displayMode === 'iconOnly') {
+    buttonChildren = iconElement
+  } else if (displayMode === 'labelOnly') {
+    buttonChildren = label
+  } else {
+    buttonChildren =
+      iconPosition === 'before' ? (
+        <>
+          {iconElement}
+          {label}
+        </>
+      ) : (
+        <>
+          {label}
+          {iconElement}
+        </>
+      )
+  }
+
+  const btn = renderVariant(variant, {
+    size,
+    disabled,
+    className: cn(fullWidth ? 'w-full' : undefined, className),
+    wrapperClassName,
+    children: buttonChildren,
+    onClick: handleClick,
+    onMouseEnter,
+    onSubmit,
+    form,
+    type: htmlType
+  })
+
+  if (href && newTab) {
+    return (
+      <LinkWrapper href={href} newTab={newTab} closeDrawerOnClick={closeDrawerOnClick}>
+        {btn}
+      </LinkWrapper>
+    )
+  }
+
+  return btn
+}

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

@@ -0,0 +1,43 @@
+'use client'
+
+import * as React from 'react'
+import ButtonDustedFluid, {
+  type ButtonDustedFluidLinkType
+} from '@/components/ui/button-dusted-fluid'
+import { cn } from '@/utilities/ui'
+
+export type ButtonECDustedFluidProps = {
+  variant?: 'v1' | 'v2' | 'v3' | 'v4' | 'v5'
+  label?: string
+  className?: string
+  wrapperClassName?: string
+  displayMode?: 'iconWithLabel' | 'iconOnly' | 'labelOnly'
+  iconPosition?: 'before' | 'after'
+  iconName?: string
+  link?: ButtonDustedFluidLinkType | null
+}
+
+export function DDFluidBtn({
+  variant = 'v1',
+  label = 'BUTTON',
+  className,
+  wrapperClassName,
+  displayMode,
+  iconPosition,
+  iconName,
+  link
+}: ButtonECDustedFluidProps) {
+  return (
+    <div className={wrapperClassName}>
+      <ButtonDustedFluid
+        variant={variant}
+        label={label}
+        className={cn('dustedfluid-button', className)}
+        displayMode={displayMode}
+        iconPosition={iconPosition}
+        iconName={iconName}
+        link={link}
+      />
+    </div>
+  )
+}

package/templates/blocks/DD-FluidBtn/README.md

@@ -0,0 +1,6 @@
+# Todo: Update and re-enable other variants if needed.
+
+# @/components/ui/button-dusted-fluid
+
+- Deps
+  import { ButtonsEyeCatching } from '@/blocks/DD-FluidBtn/ButtonsEyeCatching'