blocks-dusted 0.1.11 → 0.1.13

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

@@ -0,0 +1,472 @@
+'use client'
+
+import React from 'react'
+import { motion } from 'framer-motion'
+import { TextFade } from '@/components/ui/anims/fade'
+import { cn } from '@/utilities/ui'
+import RichText from '@/components/RichText'
+import { Media } from '@/components/Media'
+import ElectricBorder from './ElectricBorder'
+
+export type CardVariant =
+  | 'SimpleCard_V1'
+  | 'SimpleCard_V2'
+  | 'SimpleCard_V3'
+  | 'SimpleCard_V4'
+  | 'SimpleCard_V5'
+  | 'SimpleCard_V6'
+  | 'SimpleCard_V7'
+
+export type CardWithVariantsProps = {
+  cards: {
+    content?: any
+    variant: CardVariant
+    avatar?: any
+    avatarPriority?: boolean
+    avatarImgClass?: string
+    servCardContClass?: string
+    simpleCard1Class?: string
+    simpleCard2Class?: string
+    simpleCard3Class?: string
+    simpleCard4Class?: string
+    simpleCard5Class?: string
+    simpleCard6Class?: string
+    simpleCard7Class?: string
+    electrifyBorder?: boolean
+    electricColor?: string
+    electricSpeed?: number
+    electricChaos?: number
+    electricThickness?: number
+    enableCustomCSS?: boolean
+    customCSS?: string
+  }[]
+  className?: string
+  gridClass?: string
+  containerClass?: string
+}
+
+const motionSettings = (index: number) => ({
+  initial: { opacity: 0, y: 20 },
+  whileInView: { opacity: 1, y: 0 },
+  transition: { duration: 0.4, delay: index * 0.1, ease: [0.4, 0, 0.2, 1] as const },
+  viewport: { once: true, amount: 0.2 },
+})
+
+const CardBody = ({
+  content,
+  className = 'p-1',
+  richTextClassName,
+  servCardContClass,
+}: {
+  content?: any
+  className?: string
+  richTextClassName?: string
+  servCardContClass?: string
+}) => (
+  <TextFade direction="up" className="card-block-anims">
+    <div className={cn(className, servCardContClass, 'flex justify-center')}>
+      {content && (
+        <RichText
+          data={content}
+          enableGutter={false}
+          enableProse={false}
+          className={cn('card-rt flex', richTextClassName, servCardContClass)}
+        />
+      )}
+    </div>
+  </TextFade>
+)
+
+const SimpleContainer = ({
+  children,
+  customClass,
+}: {
+  children: React.ReactNode
+  customClass?: string
+}) => (
+  <div className={cn('simple-card-1 relative mx-auto w-full bg-transparent', customClass)}>
+    <div className="simple-card-1-div1 relative z-20 mx-auto">{children}</div>
+  </div>
+)
+
+const ShadowContainer = ({
+  children,
+  customClass,
+}: {
+  children: React.ReactNode
+  customClass?: string
+}) => (
+  <div
+    className={cn('simple-card-2 relative mx-auto h-auto w-full bg-card shadow-xl', customClass)}
+  >
+    <div className="simple-card-2-div1 relative z-20 overflow-hidden p-2">{children}</div>
+  </div>
+)
+
+const PlusIcon = ({ className, ...rest }: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    width={24}
+    height={24}
+    strokeWidth="1"
+    stroke="currentColor"
+    role="presentation"
+    aria-hidden="true"
+    {...rest}
+    className={cn('absolute size-6 text-purple-600 dark:text-[#9acd32]', className)}
+  >
+    <path strokeLinecap="round" strokeLinejoin="round" d="M12 6v12m6-6H6" />
+  </svg>
+)
+
+const DecorativeDiv = ({ className, style, ...rest }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    {...rest}
+    className={cn('absolute size-6 text-purple-600 dark:text-[#9acd32]', className)}
+    style={style}
+  />
+)
+
+const cardStyles = {
+  v4: { borderRadius: '0px' },
+  v5: { borderRadius: '4px' },
+  v7Outer: { border: '0px solid rgb(0 0 0 / 0.3)', borderRadius: '14px' },
+  v7Inner: {
+    borderRadius: '4px',
+    filter: 'brightness(1.2) invert(0) contrast(1)',
+    border: '0px solid transparent',
+    // @ts-ignore - styles
+    mixBlendMode: 'revert-layer' as const,
+    boxShadow: '0 0 80px 0px inset rgba(255, 255, 255, 0.2)',
+  },
+}
+
+const cornerStyles = {
+  topLeft: {
+    borderLeft: '3px outset currentColor',
+    borderTop: '3px outset currentColor',
+    borderRadius: '6px 0 0 0',
+  },
+  topRight: {
+    borderRight: '3px outset currentColor',
+    borderTop: '3px outset currentColor',
+    borderRadius: '0 6px 0 0',
+  },
+  bottomLeft: {
+    borderLeft: '3px outset currentColor',
+    borderBottom: '3px outset currentColor',
+    borderRadius: '0 0 0 6px',
+  },
+  bottomRight: {
+    borderRight: '3px outset currentColor',
+    borderBottom: '3px outset currentColor',
+    borderRadius: '0 0 6px 0',
+  },
+}
+
+const CardVariants: Record<
+  CardVariant,
+  React.FC<{
+    content: any
+    index: number
+    avatar?: any
+    avatarPriority?: boolean
+    avatarImgClass?: string
+    servCardContClass?: string
+    simpleCard1Class?: string
+    simpleCard2Class?: string
+    simpleCard3Class?: string
+    simpleCard4Class?: string
+    simpleCard5Class?: string
+    simpleCard6Class?: string
+    simpleCard7Class?: string
+  }>
+> = {
+  SimpleCard_V1: ({ content, index, servCardContClass, simpleCard1Class }) => (
+    <SimpleContainer customClass={simpleCard1Class}>
+      <motion.div {...motionSettings(index)} className="w-full">
+        <CardBody content={content} servCardContClass={servCardContClass} />
+      </motion.div>
+    </SimpleContainer>
+  ),
+
+  SimpleCard_V2: ({
+    content,
+    index,
+    avatar,
+    avatarPriority,
+    avatarImgClass,
+    servCardContClass,
+    simpleCard2Class,
+  }) => (
+    <TextFade direction="up" className="space-y-0">
+      <ShadowContainer customClass={simpleCard2Class}>
+        <motion.div {...motionSettings(index)} className="simple-card-2-div2 flex w-full flex-wrap">
+          {avatar ? (
+            <>
+              <div className="simple-card-2-div3 w-1/4">
+                <div className="simple-card-2-div4 avatar-container relative flex w-full max-w-24 items-start justify-center p-1 object-contain">
+                  <TextFade direction="down" className="w-full space-y-0">
+                    <div className="relative aspect-square w-full overflow-hidden">
+                      <Media
+                        priority={avatarPriority}
+                        resource={avatar}
+                        fill
+                        className="avatar-media h-full w-full [&_picture]:!my-0 [&_picture]:block [&_picture]:h-full [&_picture]:w-full [&_picture_img]:!my-0"
+                        imgClassName={cn(
+                          'z-[1] !my-0 h-full w-full rounded-[2px]',
+                          avatarImgClass || 'object-contain',
+                        )}
+                      />
+                    </div>
+                  </TextFade>
+                </div>
+              </div>
+              <div className="simple-card-2-div5 w-3/4">
+                <CardBody
+                  content={content}
+                  servCardContClass={servCardContClass}
+                  className="card-body-content flex w-full flex-col p-2 [&_p]:!text-[13px] [&_p]:!tracking-[0.5px] [&_p]:!opacity-75"
+                />
+              </div>
+            </>
+          ) : (
+            <div className="simple-card-2-div6 w-full">
+              <CardBody
+                content={content}
+                servCardContClass={servCardContClass}
+                className="card-body-content flex w-full p-1 [&_p]:!text-[13px] [&_p]:!tracking-[0.5px] [&_p]:!opacity-75"
+              />
+            </div>
+          )}
+        </motion.div>
+      </ShadowContainer>
+    </TextFade>
+  ),
+
+  SimpleCard_V3: ({ content, index, servCardContClass, simpleCard3Class }) => (
+    <motion.div
+      {...motionSettings(index)}
+      className={cn(
+        'simple-card-3 relative my-4 flex border border-dashed border-neutral-700 transition-all duration-300 dark:border-white/50',
+        '[&_.custom-span]:!top-1 [&_.custom-span]:left-2 [&_.custom-span]:opacity-100',
+        simpleCard3Class,
+      )}
+    >
+      <PlusIcon className="left-[-12.5px] top-[-12.5px]" />
+      <PlusIcon className="right-[-12.5px] top-[-12.5px]" />
+      <PlusIcon className="bottom-[-12.5px] left-[-12.5px]" />
+      <PlusIcon className="bottom-[-12.5px] right-[-12.5px]" />
+      <CardBody content={content} className="p-0" servCardContClass={servCardContClass} />
+    </motion.div>
+  ),
+
+  SimpleCard_V4: ({ content, index, servCardContClass, simpleCard4Class }) => (
+    <motion.div
+      {...motionSettings(index)}
+      className={cn('simple-card-4 relative border-0 shadow-lg', simpleCard4Class)}
+      style={cardStyles.v4}
+    >
+      <CardBody content={content} className="p-0" servCardContClass={servCardContClass} />
+    </motion.div>
+  ),
+
+  SimpleCard_V5: ({ content, index, servCardContClass, simpleCard5Class }) => (
+    <div
+      className={cn(
+        'simple-card-5 min-w-[250px] border-[0.5px] bg-white/70 p-1 backdrop-blur-[10px] transition-all duration-300',
+        simpleCard5Class,
+      )}
+    >
+      <motion.div
+        {...motionSettings(index)}
+        className={cn(
+          'simple-card-5-div1 border bg-gradient-to-br',
+          'from-white to-zinc-200/60 border-stone-300 shadow-[2px_0_8px_rgba(0,_0,_0,_0.15)]',
+          'dark:from-zinc-950 dark:to-zinc-900/60 dark:border-stone-900/50 dark:shadow-inner',
+        )}
+        style={cardStyles.v5}
+      >
+        <CardBody
+          content={content}
+          servCardContClass={servCardContClass}
+          className="card-body-content flex p-4 [&_p]:!text-[13px] [&_p]:!tracking-[0.5px] [&_p]:!opacity-75"
+        />
+      </motion.div>
+    </div>
+  ),
+
+  SimpleCard_V6: ({ content, index, servCardContClass, simpleCard6Class }) => (
+    <div
+      className={cn(
+        'simple-card-6 border-[0.5px] border-stone-300 p-2 shadow-[2px_0_8px_rgba(0,_0,_0,_0.15)]',
+        '[&_.prose_:where(picture):not(:where([class~="not-prose"],[class~="not-prose"]_*))]:!my-0 [&_.prose_:where(picture):not(:where([class~="not-prose"],[class~="not-prose"]_*))]:block',
+        '[&_.py-4]:!py-0',
+        simpleCard6Class,
+      )}
+    >
+      <motion.div
+        {...motionSettings(index)}
+        className="simple-card-6-div1 relative border border-stone-400 bg-white/70 px-4 py-8 shadow-[2px_0_8px_rgba(0,_0,_0,_0.15)] backdrop-blur-[10px]"
+      >
+        <CardBody
+          content={content}
+          className="simple-card-6-content"
+          servCardContClass={servCardContClass}
+        />
+      </motion.div>
+    </div>
+  ),
+
+  SimpleCard_V7: ({ content, index, servCardContClass, simpleCard7Class }) => (
+    <motion.div
+      {...motionSettings(index)}
+      className={cn('simple-card-7 relative z-0 size-full shadow-lg', simpleCard7Class)}
+      style={cardStyles.v7Outer}
+    >
+      <div
+        className="simple-card-7-div1 relative z-[1] size-full bg-grid p-1"
+        style={cardStyles.v7Inner}
+      >
+        <DecorativeDiv className="-left-0.5 -top-0.5 z-[2] invert-0" style={cornerStyles.topLeft} />
+        <DecorativeDiv
+          className="-right-0.5 -top-0.5 z-[2] invert-0"
+          style={cornerStyles.topRight}
+        />
+        <DecorativeDiv
+          className="-bottom-0.5 -left-0.5 z-[2] invert-0"
+          style={cornerStyles.bottomLeft}
+        />
+        <DecorativeDiv
+          className="-bottom-0.5 -right-0.5 z-[2] invert-0"
+          style={cornerStyles.bottomRight}
+        />
+        <CardBody
+          content={content}
+          className="z-[2] overflow-hidden rounded-sm p-0 shadow-xl invert-0"
+          richTextClassName="px-4 py-4"
+          servCardContClass={servCardContClass}
+        />
+      </div>
+    </motion.div>
+  ),
+}
+
+export const CardWithVariants: React.FC<CardWithVariantsProps> = ({
+  cards,
+  className,
+  containerClass,
+  gridClass,
+}) => {
+  const scopeId = React.useId().replace(/:/g, '')
+
+  const mergedCustomCSS = React.useMemo(() => {
+    return (cards || [])
+      .filter((card) => Boolean(card?.enableCustomCSS && card?.customCSS))
+      .map((card) => String(card.customCSS))
+      .join('\n')
+  }, [cards])
+
+  const injectedCSS = React.useMemo(() => {
+    if (!mergedCustomCSS.trim()) return ''
+    return mergedCustomCSS.split(':host').join(`[data-cwv-scope="${scopeId}"]`)
+  }, [mergedCustomCSS, scopeId])
+
+  const getVariantCustomClass = (card: CardWithVariantsProps['cards'][number]) => {
+    switch (card.variant) {
+      case 'SimpleCard_V1':
+        return card.simpleCard1Class
+      case 'SimpleCard_V2':
+        return card.simpleCard2Class
+      case 'SimpleCard_V3':
+        return card.simpleCard3Class
+      case 'SimpleCard_V4':
+        return card.simpleCard4Class
+      case 'SimpleCard_V5':
+        return card.simpleCard5Class
+      case 'SimpleCard_V6':
+        return card.simpleCard6Class
+      case 'SimpleCard_V7':
+        return card.simpleCard7Class
+      default:
+        return undefined
+    }
+  }
+
+  if (!cards || cards.length === 0) return null
+
+  return (
+    <div
+      className={cn(
+        'simple-cards-container mt-6 block w-full transition-all duration-300',
+        '[&_h1]:!m-0 [&_h1]:!p-0 [&_h2]:!m-0 [&_h2]:!p-0 [&_h3]:!m-0 [&_h3]:!p-0 [&_h4]:!m-0 [&_h4]:!p-0 [&_h5]:!m-0 [&_h5]:!p-0 [&_h6]:!m-0 [&_h6]:!p-0',
+        containerClass,
+        className,
+      )}
+      data-cwv-scope={scopeId}
+    >
+      {injectedCSS.trim() && (
+        <style data-cwv-style={scopeId} dangerouslySetInnerHTML={{ __html: injectedCSS }} />
+      )}
+
+      <div className={cn(gridClass || 'grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3')}>
+        {cards.map((card, index) => {
+          const CardComponent = CardVariants[card.variant] || CardVariants.SimpleCard_V1
+          const baseKey = `${card.variant}-${index}`
+          const variantCustomClass = getVariantCustomClass(card)
+          const derivedCardClasses = variantCustomClass
+            ? variantCustomClass
+                .split(/\s+/)
+                .filter(Boolean)
+                .map((token) => `${token}_card`)
+            : []
+
+          const cardElement = (
+            <div
+              className={cn('cwv-card w-full', derivedCardClasses)}
+              data-cwv-card
+              data-card-index={index}
+              data-card-variant={card.variant}
+              data-card-classlist={variantCustomClass || undefined}
+            >
+              <CardComponent
+                content={card.content}
+                index={index}
+                avatar={card?.avatar}
+                avatarPriority={card?.avatarPriority}
+                avatarImgClass={card?.avatarImgClass}
+                servCardContClass={card?.servCardContClass}
+                simpleCard1Class={card?.simpleCard1Class}
+                simpleCard2Class={card?.simpleCard2Class}
+                simpleCard3Class={card?.simpleCard3Class}
+                simpleCard4Class={card?.simpleCard4Class}
+                simpleCard5Class={card?.simpleCard5Class}
+                simpleCard6Class={card?.simpleCard6Class}
+                simpleCard7Class={card?.simpleCard7Class}
+              />
+            </div>
+          )
+
+          if (card.electrifyBorder) {
+            return (
+              <ElectricBorder
+                key={`electric-${baseKey}`}
+                color={card.electricColor || '#7df9ff'}
+                speed={card.electricSpeed || 1}
+                chaos={card.electricChaos || 0.5}
+                thickness={card.electricThickness || 2}
+                style={{ borderRadius: 16 }}
+              >
+                {cardElement}
+              </ElectricBorder>
+            )
+          }
+
+          return <React.Fragment key={baseKey}>{cardElement}</React.Fragment>
+        })}
+      </div>
+    </div>
+  )
+}

package/templates/blocks/DD-CardsWithVariantV3/ElectricBorder/index.tsx

@@ -0,0 +1,203 @@
+'use client'
+
+import { electricBorderStyles } from './styles'
+import { useInjectStyle } from './useInjectStyle'
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, {
+  CSSProperties,
+  PropsWithChildren,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useRef
+} from 'react'
+
+type ElectricBorderProps = PropsWithChildren<{
+  color?: string
+  speed?: number
+  chaos?: number
+  thickness?: number
+  className?: string
+  style?: CSSProperties
+}>
+
+const ElectricBorder: React.FC<ElectricBorderProps> = ({
+  children,
+  color = '#5227FF',
+  speed = 1,
+  chaos = 1,
+  thickness = 2,
+  className,
+  style
+}: ElectricBorderProps) => {
+  useInjectStyle(electricBorderStyles, 'dd-electric-border-styles')
+  const rawId = useId().replace(/[:]/g, '')
+  const filterId = `turbulent-displace-${rawId}`
+  const svgRef = useRef<SVGSVGElement | null>(null)
+  const rootRef = useRef<HTMLDivElement | null>(null)
+  const strokeRef = useRef<HTMLDivElement | null>(null)
+  const animationFrameRef = useRef<number | null>(null)
+
+  const updateAnim = () => {
+    const svg = svgRef.current
+    const host = rootRef.current
+    if (!svg || !host) return
+
+    if (strokeRef.current) {
+      strokeRef.current.style.filter = `url(#${filterId})`
+    }
+
+    const width = Math.max(
+      1,
+      Math.round(host.clientWidth || host.getBoundingClientRect().width || 0)
+    )
+    const height = Math.max(
+      1,
+      Math.round(host.clientHeight || host.getBoundingClientRect().height || 0)
+    )
+
+    const offsetNoise1 = svg.querySelector<SVGElement>('feOffset[result="offsetNoise1"]')
+    const offsetNoise2 = svg.querySelector<SVGElement>('feOffset[result="offsetNoise2"]')
+    const offsetNoise3 = svg.querySelector<SVGElement>('feOffset[result="offsetNoise3"]')
+    const offsetNoise4 = svg.querySelector<SVGElement>('feOffset[result="offsetNoise4"]')
+
+    const baseDur = 6
+    const durationMs = Math.max(1, (baseDur / (speed || 1)) * 1000)
+
+    if (animationFrameRef.current !== null) {
+      cancelAnimationFrame(animationFrameRef.current)
+    }
+
+    const tick = (now: number) => {
+      const progress = (now % durationMs) / durationMs
+
+      offsetNoise1?.setAttribute('dy', String(height * (1 - progress)))
+      offsetNoise2?.setAttribute('dy', String(-height * progress))
+      offsetNoise3?.setAttribute('dx', String(width * (1 - progress)))
+      offsetNoise4?.setAttribute('dx', String(-width * progress))
+
+      animationFrameRef.current = requestAnimationFrame(tick)
+    }
+
+    animationFrameRef.current = requestAnimationFrame(tick)
+
+    const disp = svg.querySelector('feDisplacementMap')
+    if (disp) disp.setAttribute('scale', String(30 * (chaos || 1)))
+
+    const filterEl = svg.querySelector<SVGFilterElement>(`#${CSS.escape(filterId)}`)
+    if (filterEl) {
+      filterEl.setAttribute('x', '-200%')
+      filterEl.setAttribute('y', '-200%')
+      filterEl.setAttribute('width', '500%')
+      filterEl.setAttribute('height', '500%')
+    }
+  }
+
+  useEffect(() => {
+    updateAnim()
+  }, [speed, chaos])
+
+  useLayoutEffect(() => {
+    if (!rootRef.current) return
+    const ro = new ResizeObserver(() => updateAnim())
+    ro.observe(rootRef.current)
+    updateAnim()
+    return () => {
+      ro.disconnect()
+      if (animationFrameRef.current !== null) {
+        cancelAnimationFrame(animationFrameRef.current)
+      }
+    }
+  }, [])
+
+  const vars: CSSProperties = {
+    ['--electric-border-color' as any]: color,
+    ['--eb-border-width' as any]: `${thickness}px`
+  }
+
+  return (
+    <div
+      ref={rootRef}
+      className={`electric-border ${className ?? ''}`}
+      style={{ ...vars, ...style }}
+    >
+      <svg
+        ref={svgRef}
+        className="eb-svg"
+        aria-hidden
+        focusable="false"
+        style={{ willChange: 'filter' }}
+      >
+        <defs>
+          <filter
+            id={filterId}
+            colorInterpolationFilters="sRGB"
+            x="-20%"
+            y="-20%"
+            width="140%"
+            height="140%"
+            style={{ willChange: 'filter' }}
+          >
+            <feTurbulence
+              type="turbulence"
+              baseFrequency="0.02"
+              numOctaves="10"
+              result="noise1"
+              seed="1"
+            />
+            <feOffset in="noise1" dx="700" dy="0" result="offsetNoise1" />
+
+            <feTurbulence
+              type="turbulence"
+              baseFrequency="0.02"
+              numOctaves="10"
+              result="noise2"
+              seed="1"
+            />
+            <feOffset in="noise2" dx="0" dy="0" result="offsetNoise2" />
+
+            <feTurbulence
+              type="turbulence"
+              baseFrequency="0.02"
+              numOctaves="10"
+              result="noise1"
+              seed="2"
+            />
+            <feOffset in="noise1" dx="490" dy="0" result="offsetNoise3" />
+
+            <feTurbulence
+              type="turbulence"
+              baseFrequency="0.02"
+              numOctaves="10"
+              result="noise2"
+              seed="2"
+            />
+            <feOffset in="noise2" dx="0" dy="0" result="offsetNoise4" />
+
+            <feComposite in="offsetNoise1" in2="offsetNoise2" result="part1" />
+            <feComposite in="offsetNoise3" in2="offsetNoise4" result="part2" />
+            <feBlend in="part1" in2="part2" mode="color-dodge" result="combinedNoise" />
+            <feDisplacementMap
+              in="SourceGraphic"
+              in2="combinedNoise"
+              scale="30"
+              xChannelSelector="R"
+              yChannelSelector="B"
+            />
+          </filter>
+        </defs>
+      </svg>
+
+      <div className="eb-layers">
+        <div ref={strokeRef} className="eb-stroke" style={{ willChange: 'filter' }} />
+        <div className="eb-glow-1" />
+        <div className="eb-glow-2" />
+        <div className="eb-background-glow" />
+      </div>
+
+      <div className="eb-content">{children}</div>
+    </div>
+  )
+}
+
+export default ElectricBorder