blocks-dusted 0.1.9 → 0.1.11

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

@@ -0,0 +1,777 @@
+'use client'
+
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import Image from 'next/image'
+import Link from 'next/link'
+import { gsap } from 'gsap'
+
+export interface BentoCardMedia {
+  url?: string | null
+  alt?: string | null
+  width?: number | null
+  height?: number | null
+}
+
+export interface BentoCardLink {
+  type?: 'internal' | 'external' | null
+  url?: string | null
+  reference?: { slug?: string | null; value?: { slug?: string | null } } | string | null
+  newTab?: boolean | null
+}
+
+export interface BentoCardData {
+  color?: string | null
+  title?: string | null
+  description?: string | null
+  label?: string | null
+  id?: string | null
+  media?: BentoCardMedia | string | null
+  link?: BentoCardLink | null
+}
+
+export interface MagicBentoBlockProps {
+  blockType?: 'magicBentoBlock'
+  blockName?: string
+  textAutoHide?: boolean
+  enableStars?: boolean
+  enableSpotlight?: boolean
+  enableBorderGlow?: boolean
+  disableAnimations?: boolean
+  enableTilt?: boolean
+  clickEffect?: boolean
+  enableMagnetism?: boolean
+  spotlightRadius?: number
+  particleCount?: number
+  glowColor?: string
+  cards?: BentoCardData[]
+  sectionId?: string
+  customCSS?: string
+}
+
+const DEFAULT_PARTICLE_COUNT = 12
+const DEFAULT_SPOTLIGHT_RADIUS = 300
+const DEFAULT_GLOW_COLOR = '132, 0, 255'
+const MOBILE_BREAKPOINT = 768
+
+const FALLBACK_CARDS: BentoCardData[] = [
+  { color: '#120F17', title: 'Analytics', description: 'Track user behavior', label: 'Insights' },
+  { color: '#120F17', title: 'Dashboard', description: 'Centralized data view', label: 'Overview' },
+  {
+    color: '#120F17',
+    title: 'Collaboration',
+    description: 'Work together seamlessly',
+    label: 'Teamwork'
+  },
+  {
+    color: '#120F17',
+    title: 'Automation',
+    description: 'Streamline workflows',
+    label: 'Efficiency'
+  },
+  {
+    color: '#120F17',
+    title: 'Integration',
+    description: 'Connect favorite tools',
+    label: 'Connectivity'
+  },
+  {
+    color: '#120F17',
+    title: 'Security',
+    description: 'Enterprise-grade protection',
+    label: 'Protection'
+  }
+]
+
+const resolveCardHref = (link?: BentoCardLink | null): string | null => {
+  if (!link) return null
+
+  if (link.type === 'internal') {
+    if (typeof link.reference === 'object') {
+      const slug = link.reference?.slug || link.reference?.value?.slug
+      return slug ? `/${slug}` : null
+    }
+
+    return typeof link.reference === 'string' ? `/${link.reference}` : null
+  }
+
+  return link.url || null
+}
+
+const createParticleElement = (x: number, y: number, color: string): HTMLDivElement => {
+  const el = document.createElement('div')
+  el.className = 'magic-bento-particle'
+
+  Object.assign(el.style, {
+    position: 'absolute',
+    width: '4px',
+    height: '4px',
+    borderRadius: '50%',
+    background: `rgba(${color}, 1)`,
+    boxShadow: `0 0 6px rgba(${color}, 0.6)`,
+    pointerEvents: 'none',
+    zIndex: '100',
+    left: `${x}px`,
+    top: `${y}px`
+  })
+
+  return el
+}
+
+const calculateSpotlightValues = (radius: number) => ({
+  proximity: radius * 0.5,
+  fadeDistance: radius * 0.75
+})
+
+const updateCardGlowProperties = (
+  card: HTMLElement,
+  mouseX: number,
+  mouseY: number,
+  glow: number,
+  radius: number
+) => {
+  const rect = card.getBoundingClientRect()
+
+  card.style.setProperty('--glow-x', `${((mouseX - rect.left) / rect.width) * 100}%`)
+  card.style.setProperty('--glow-y', `${((mouseY - rect.top) / rect.height) * 100}%`)
+  card.style.setProperty('--glow-intensity', glow.toString())
+  card.style.setProperty('--glow-radius', `${radius}px`)
+}
+
+const useMobileDetection = () => {
+  const [isMobile, setIsMobile] = useState(false)
+
+  useEffect(() => {
+    const check = () => setIsMobile(window.innerWidth <= MOBILE_BREAKPOINT)
+
+    check()
+    window.addEventListener('resize', check)
+
+    return () => window.removeEventListener('resize', check)
+  }, [])
+
+  return isMobile
+}
+
+const ParticleCard: React.FC<{
+  children: React.ReactNode
+  className?: string
+  style?: React.CSSProperties
+  disableAnimations?: boolean
+  particleCount?: number
+  glowColor?: string
+  enableTilt?: boolean
+  clickEffect?: boolean
+  enableMagnetism?: boolean
+  href?: string | null
+  newTab?: boolean | null
+}> = ({
+  children,
+  className = '',
+  style,
+  disableAnimations = false,
+  particleCount = DEFAULT_PARTICLE_COUNT,
+  glowColor = DEFAULT_GLOW_COLOR,
+  enableTilt = true,
+  clickEffect = false,
+  enableMagnetism = false,
+  href,
+  newTab
+}) => {
+  const cardRef = useRef<HTMLElement | null>(null)
+  const particlesRef = useRef<HTMLDivElement[]>([])
+  const timeoutsRef = useRef<ReturnType<typeof setTimeout>[]>([])
+  const isHoveredRef = useRef(false)
+  const memoizedParticles = useRef<HTMLDivElement[]>([])
+  const particlesInitialized = useRef(false)
+  const magnetismAnimationRef = useRef<gsap.core.Tween | null>(null)
+
+  const initializeParticles = useCallback(() => {
+    if (particlesInitialized.current || !cardRef.current) return
+
+    const { width, height } = cardRef.current.getBoundingClientRect()
+
+    memoizedParticles.current = Array.from({ length: particleCount }, () =>
+      createParticleElement(Math.random() * width, Math.random() * height, glowColor)
+    )
+
+    particlesInitialized.current = true
+  }, [particleCount, glowColor])
+
+  const clearAllParticles = useCallback(() => {
+    timeoutsRef.current.forEach(clearTimeout)
+    timeoutsRef.current = []
+
+    magnetismAnimationRef.current?.kill()
+
+    particlesRef.current.forEach((particle) => {
+      gsap.to(particle, {
+        scale: 0,
+        opacity: 0,
+        duration: 0.3,
+        ease: 'back.in(1.7)',
+        onComplete: () => particle.parentNode?.removeChild(particle)
+      })
+    })
+
+    particlesRef.current = []
+  }, [])
+
+  const animateParticles = useCallback(() => {
+    if (!cardRef.current || !isHoveredRef.current) return
+
+    if (!particlesInitialized.current) initializeParticles()
+
+    memoizedParticles.current.forEach((particle, index) => {
+      const id = setTimeout(() => {
+        if (!isHoveredRef.current || !cardRef.current) return
+
+        const clone = particle.cloneNode(true) as HTMLDivElement
+
+        cardRef.current.appendChild(clone)
+        particlesRef.current.push(clone)
+
+        gsap.fromTo(
+          clone,
+          { scale: 0, opacity: 0 },
+          { scale: 1, opacity: 1, duration: 0.3, ease: 'back.out(1.7)' }
+        )
+
+        gsap.to(clone, {
+          x: (Math.random() - 0.5) * 100,
+          y: (Math.random() - 0.5) * 100,
+          rotation: Math.random() * 360,
+          duration: 2 + Math.random() * 2,
+          ease: 'none',
+          repeat: -1,
+          yoyo: true
+        })
+
+        gsap.to(clone, {
+          opacity: 0.3,
+          duration: 1.5,
+          ease: 'power2.inOut',
+          repeat: -1,
+          yoyo: true
+        })
+      }, index * 100)
+
+      timeoutsRef.current.push(id)
+    })
+  }, [initializeParticles])
+
+  useEffect(() => {
+    if (disableAnimations || !cardRef.current) return
+
+    const el = cardRef.current
+
+    const onEnter = () => {
+      isHoveredRef.current = true
+      animateParticles()
+
+      if (enableTilt) {
+        gsap.to(el, {
+          rotateX: 5,
+          rotateY: 5,
+          duration: 0.3,
+          ease: 'power2.out',
+          transformPerspective: 1000
+        })
+      }
+    }
+
+    const onLeave = () => {
+      isHoveredRef.current = false
+      clearAllParticles()
+
+      if (enableTilt) {
+        gsap.to(el, {
+          rotateX: 0,
+          rotateY: 0,
+          duration: 0.3,
+          ease: 'power2.out'
+        })
+      }
+
+      if (enableMagnetism) {
+        gsap.to(el, {
+          x: 0,
+          y: 0,
+          duration: 0.3,
+          ease: 'power2.out'
+        })
+      }
+    }
+
+    const onMove = (e: MouseEvent) => {
+      if (!enableTilt && !enableMagnetism) return
+
+      const rect = el.getBoundingClientRect()
+      const x = e.clientX - rect.left
+      const y = e.clientY - rect.top
+      const cx = rect.width / 2
+      const cy = rect.height / 2
+
+      if (enableTilt) {
+        gsap.to(el, {
+          rotateX: ((y - cy) / cy) * -10,
+          rotateY: ((x - cx) / cx) * 10,
+          duration: 0.1,
+          ease: 'power2.out',
+          transformPerspective: 1000
+        })
+      }
+
+      if (enableMagnetism) {
+        magnetismAnimationRef.current = gsap.to(el, {
+          x: (x - cx) * 0.05,
+          y: (y - cy) * 0.05,
+          duration: 0.3,
+          ease: 'power2.out'
+        })
+      }
+    }
+
+    const onClick = (e: MouseEvent) => {
+      if (!clickEffect) return
+
+      const rect = el.getBoundingClientRect()
+      const x = e.clientX - rect.left
+      const y = e.clientY - rect.top
+
+      const maxDist = Math.max(
+        Math.hypot(x, y),
+        Math.hypot(x - rect.width, y),
+        Math.hypot(x, y - rect.height),
+        Math.hypot(x - rect.width, y - rect.height)
+      )
+
+      const ripple = document.createElement('div')
+
+      Object.assign(ripple.style, {
+        position: 'absolute',
+        width: `${maxDist * 2}px`,
+        height: `${maxDist * 2}px`,
+        borderRadius: '50%',
+        background: `radial-gradient(circle, rgba(${glowColor}, 0.4) 0%, rgba(${glowColor}, 0.2) 30%, transparent 70%)`,
+        left: `${x - maxDist}px`,
+        top: `${y - maxDist}px`,
+        pointerEvents: 'none',
+        zIndex: '1000'
+      })
+
+      el.appendChild(ripple)
+
+      gsap.fromTo(
+        ripple,
+        { scale: 0, opacity: 1 },
+        {
+          scale: 1,
+          opacity: 0,
+          duration: 0.8,
+          ease: 'power2.out',
+          onComplete: () => ripple.remove()
+        }
+      )
+    }
+
+    el.addEventListener('mouseenter', onEnter)
+    el.addEventListener('mouseleave', onLeave)
+    el.addEventListener('mousemove', onMove)
+    el.addEventListener('click', onClick)
+
+    return () => {
+      isHoveredRef.current = false
+      el.removeEventListener('mouseenter', onEnter)
+      el.removeEventListener('mouseleave', onLeave)
+      el.removeEventListener('mousemove', onMove)
+      el.removeEventListener('click', onClick)
+      clearAllParticles()
+    }
+  }, [
+    animateParticles,
+    clearAllParticles,
+    disableAnimations,
+    enableTilt,
+    enableMagnetism,
+    clickEffect,
+    glowColor
+  ])
+
+  const sharedClassName = `${className} relative block overflow-hidden`
+  const sharedStyle = { ...style, position: 'relative', overflow: 'hidden' } as React.CSSProperties
+
+  if (href) {
+    return (
+      <Link
+        ref={(node) => {
+          cardRef.current = node
+        }}
+        href={href}
+        target={newTab ? '_blank' : undefined}
+        rel={newTab ? 'noopener noreferrer' : undefined}
+        className={sharedClassName}
+        style={sharedStyle}
+      >
+        {children}
+      </Link>
+    )
+  }
+
+  return (
+    <div
+      ref={(node) => {
+        cardRef.current = node
+      }}
+      className={sharedClassName}
+      style={sharedStyle}
+    >
+      {children}
+    </div>
+  )
+}
+
+const GlobalSpotlight: React.FC<{
+  gridRef: React.RefObject<HTMLDivElement | null>
+  disableAnimations?: boolean
+  enabled?: boolean
+  spotlightRadius?: number
+  glowColor?: string
+}> = ({
+  gridRef,
+  disableAnimations = false,
+  enabled = true,
+  spotlightRadius = DEFAULT_SPOTLIGHT_RADIUS,
+  glowColor = DEFAULT_GLOW_COLOR
+}) => {
+  const spotlightRef = useRef<HTMLDivElement | null>(null)
+
+  useEffect(() => {
+    if (disableAnimations || !gridRef?.current || !enabled) return
+
+    const spotlight = document.createElement('div')
+    spotlight.className = 'magic-bento-spotlight'
+
+    Object.assign(spotlight.style, {
+      position: 'fixed',
+      width: '800px',
+      height: '800px',
+      borderRadius: '50%',
+      pointerEvents: 'none',
+      background: `radial-gradient(circle,
+        rgba(${glowColor}, 0.15) 0%,
+        rgba(${glowColor}, 0.08) 15%,
+        rgba(${glowColor}, 0.04) 25%,
+        rgba(${glowColor}, 0.02) 40%,
+        rgba(${glowColor}, 0.01) 65%,
+        transparent 70%)`,
+      zIndex: '200',
+      opacity: '0',
+      transform: 'translate(-50%, -50%)',
+      // @ts-ignore - styles
+      mixBlendMode: 'screen'
+    })
+
+    document.body.appendChild(spotlight)
+    spotlightRef.current = spotlight
+
+    const onMove = (e: MouseEvent) => {
+      if (!spotlightRef.current || !gridRef.current) return
+
+      const section = gridRef.current.closest('.magic-bento-section')
+      const rect = section?.getBoundingClientRect()
+
+      const inside =
+        rect &&
+        e.clientX >= rect.left &&
+        e.clientX <= rect.right &&
+        e.clientY >= rect.top &&
+        e.clientY <= rect.bottom
+
+      const cards = gridRef.current.querySelectorAll('.magic-bento-card')
+
+      if (!inside) {
+        gsap.to(spotlightRef.current, {
+          opacity: 0,
+          duration: 0.3,
+          ease: 'power2.out'
+        })
+
+        cards.forEach((card) => {
+          ;(card as HTMLElement).style.setProperty('--glow-intensity', '0')
+        })
+
+        return
+      }
+
+      const { proximity, fadeDistance } = calculateSpotlightValues(spotlightRadius)
+      let minDistance = Infinity
+
+      cards.forEach((card) => {
+        const el = card as HTMLElement
+        const cr = el.getBoundingClientRect()
+        const cx = cr.left + cr.width / 2
+        const cy = cr.top + cr.height / 2
+
+        const dist = Math.max(
+          0,
+          Math.hypot(e.clientX - cx, e.clientY - cy) - Math.max(cr.width, cr.height) / 2
+        )
+
+        minDistance = Math.min(minDistance, dist)
+
+        const intensity =
+          dist <= proximity
+            ? 1
+            : dist <= fadeDistance
+              ? (fadeDistance - dist) / (fadeDistance - proximity)
+              : 0
+
+        updateCardGlowProperties(el, e.clientX, e.clientY, intensity, spotlightRadius)
+      })
+
+      gsap.to(spotlightRef.current, {
+        left: e.clientX,
+        top: e.clientY,
+        duration: 0.1,
+        ease: 'power2.out'
+      })
+
+      const targetOpacity =
+        minDistance <= proximity
+          ? 0.8
+          : minDistance <= fadeDistance
+            ? ((fadeDistance - minDistance) / (fadeDistance - proximity)) * 0.8
+            : 0
+
+      gsap.to(spotlightRef.current, {
+        opacity: targetOpacity,
+        duration: targetOpacity > 0 ? 0.2 : 0.5,
+        ease: 'power2.out'
+      })
+    }
+
+    const onLeave = () => {
+      gridRef.current?.querySelectorAll('.magic-bento-card').forEach((card) => {
+        ;(card as HTMLElement).style.setProperty('--glow-intensity', '0')
+      })
+
+      if (spotlightRef.current) {
+        gsap.to(spotlightRef.current, {
+          opacity: 0,
+          duration: 0.3,
+          ease: 'power2.out'
+        })
+      }
+    }
+
+    document.addEventListener('mousemove', onMove)
+    document.addEventListener('mouseleave', onLeave)
+
+    return () => {
+      document.removeEventListener('mousemove', onMove)
+      document.removeEventListener('mouseleave', onLeave)
+      spotlightRef.current?.parentNode?.removeChild(spotlightRef.current)
+    }
+  }, [gridRef, disableAnimations, enabled, spotlightRadius, glowColor])
+
+  return null
+}
+
+export const DDMagicBento: React.FC<MagicBentoBlockProps> = ({
+  textAutoHide = true,
+  enableStars = true,
+  enableSpotlight = true,
+  enableBorderGlow = true,
+  disableAnimations = false,
+  spotlightRadius = DEFAULT_SPOTLIGHT_RADIUS,
+  particleCount = DEFAULT_PARTICLE_COUNT,
+  enableTilt = false,
+  glowColor = DEFAULT_GLOW_COLOR,
+  clickEffect = true,
+  enableMagnetism = true,
+  cards,
+  sectionId,
+  customCSS
+}) => {
+  const gridRef = useRef<HTMLDivElement>(null)
+  const isMobile = useMobileDetection()
+  const shouldDisableAnimations = disableAnimations || isMobile
+  const cardData = cards && cards.length > 0 ? cards : FALLBACK_CARDS
+
+  const baseCardCls = [
+    'magic-bento-card group',
+    'flex flex-col justify-between relative aspect-[4/3] min-h-[240px] max-h-[240px] w-full max-w-full p-5 rounded-[20px]',
+    'border border-solid font-light overflow-hidden no-underline',
+    'transition-all duration-300 ease-in-out',
+    'hover:-translate-y-0.5 hover:shadow-[0_8px_25px_rgba(0,0,0,0.15)]',
+    enableBorderGlow ? 'magic-bento-card--border-glow' : ''
+  ]
+    .filter(Boolean)
+    .join(' ')
+
+  return (
+    <>
+      <style>{`
+        ${customCSS ?? ''}
+
+        .magic-bento-section {
+          --glow-x: 50%;
+          --glow-y: 50%;
+          --glow-intensity: 0;
+          --glow-radius: 200px;
+          --glow-color: ${glowColor};
+          --border-color: #2F293A;
+          --background-dark: #120F17;
+          --white: hsl(0, 0%, 100%);
+        }
+
+        .magic-bento-card--border-glow::after {
+          content: '';
+          position: absolute;
+          inset: 0;
+          padding: 6px;
+          background: radial-gradient(
+            var(--glow-radius) circle at var(--glow-x) var(--glow-y),
+            rgba(${glowColor}, calc(var(--glow-intensity) * 0.8)) 0%,
+            rgba(${glowColor}, calc(var(--glow-intensity) * 0.4)) 30%,
+            transparent 60%
+          );
+          border-radius: inherit;
+          -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+          -webkit-mask-composite: xor;
+          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+          mask-composite: exclude;
+          pointer-events: none;
+          z-index: 1;
+        }
+
+        .magic-bento-card--border-glow:hover {
+          box-shadow: 0 4px 20px rgba(46, 24, 78, 0.4), 0 0 30px rgba(${glowColor}, 0.2);
+        }
+
+        .magic-bento-particle::before {
+          content: '';
+          position: absolute;
+          inset: -2px;
+          background: rgba(${glowColor}, 0.2);
+          border-radius: 50%;
+          z-index: -1;
+        }
+      `}</style>
+
+      {enableSpotlight && (
+        <GlobalSpotlight
+          gridRef={gridRef}
+          disableAnimations={shouldDisableAnimations}
+          enabled={enableSpotlight}
+          spotlightRadius={spotlightRadius}
+          glowColor={glowColor}
+        />
+      )}
+
+      <div
+        id={sectionId || undefined}
+        className="magic-bento-section container relative w-full max-w-[54rem] select-none px-3 !py-8"
+        style={{ fontSize: 'clamp(1rem, 0.9rem + 0.5vw, 1.5rem)' }}
+      >
+        <div
+          ref={gridRef}
+          className="magic-bento-grid mx-auto grid w-[100%] grid-cols-1 gap-4 p-2 sm:grid-cols-2 md:gap-4 lg:grid-cols-4 [&>.magic-bento-card:nth-child(3)]:lg:col-span-2 [&>.magic-bento-card:nth-child(3)]:lg:row-span-2 [&>.magic-bento-card:nth-child(4)]:lg:col-span-2 [&>.magic-bento-card:nth-child(6)]:lg:col-start-4 [&>.magic-bento-card:nth-child(6)]:lg:row-start-3"
+        >
+          {cardData.map((card, index) => {
+            const cardStyle = {
+              backgroundColor: card.color || 'var(--background-dark)',
+              borderColor: 'var(--border-color)',
+              color: 'var(--white)',
+              '--glow-x': '50%',
+              '--glow-y': '50%',
+              '--glow-intensity': '0',
+              '--glow-radius': '200px',
+              outline: '4px solid #181818db'
+            } as React.CSSProperties
+
+            const mediaObj = typeof card.media === 'object' ? card.media : null
+            const mediaUrl = mediaObj?.url ?? null
+            const mediaAlt = mediaObj?.alt ?? card.title ?? ''
+            const cardHref = resolveCardHref(card.link)
+
+            const cardInner = (
+              <>
+                {mediaUrl && (
+                  <div className="pointer-events-none absolute inset-0 z-0 rounded-[inherit] opacity-0 transition-opacity duration-500 ease-in-out group-hover:opacity-100">
+                    <Image
+                      src={mediaUrl}
+                      alt={mediaAlt}
+                      fill
+                      className="rounded-[inherit] object-cover"
+                      sizes="(max-width: 640px) 90vw, (max-width: 1024px) 45vw, 300px"
+                    />
+                    <div className="absolute inset-0 z-[1] rounded-[inherit] bg-[linear-gradient(to_top,rgba(0,0,0,0.85)_0%,rgba(0,0,0,0.35)_50%,rgba(0,0,0,0.1)_100%),radial-gradient(ellipse_at_center,transparent_40%,rgba(0,0,0,0.5)_100%)]" />
+                  </div>
+                )}
+
+                <div className="card__header relative z-10 flex justify-between gap-3 text-stone-300">
+                  {card.label && <span className="card__label text-sm">{card.label}</span>}
+                </div>
+
+                <div className="card__content relative z-10 flex flex-col text-stone-300">
+                  {card.title && (
+                    <h3
+                      className={`card__title m-0 mb-1 text-3d font-semibold ${
+                        textAutoHide
+                          ? 'overflow-hidden text-ellipsis [-webkit-line-clamp:2] [display:-webkit-box] [-webkit-box-orient:vertical]'
+                          : ''
+                      }`}
+                    >
+                      {card.title}
+                    </h3>
+                  )}
+
+                  {card.description && (
+                    <p
+                      className={`card__description text-sm leading-5 text-stone-300 ${
+                        textAutoHide
+                          ? 'overflow-hidden text-ellipsis [-webkit-line-clamp:2] [display:-webkit-box] [-webkit-box-orient:vertical]'
+                          : ''
+                      }`}
+                    >
+                      {card.description}
+                    </p>
+                  )}
+                </div>
+              </>
+            )
+
+            if (enableStars) {
+              return (
+                <ParticleCard
+                  key={card.id || index}
+                  className={baseCardCls}
+                  style={cardStyle}
+                  disableAnimations={shouldDisableAnimations}
+                  particleCount={particleCount}
+                  glowColor={glowColor}
+                  enableTilt={enableTilt}
+                  clickEffect={clickEffect}
+                  enableMagnetism={enableMagnetism}
+                  href={cardHref}
+                  newTab={card.link?.newTab}
+                >
+                  {cardInner}
+                </ParticleCard>
+              )
+            }
+
+            return (
+              <div key={card.id || index} className={baseCardCls} style={cardStyle}>
+                {cardInner}
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default DDMagicBento