Interactive Background Boxes Ripple Effect

Hover over the boxes above and click.To be used on backgrounds of hero sections OR Call to Action sections. I beg you don't use it everywhere.

); } `,__rawStringJsx__:`"use client"; import React from "react"; import { BackgroundRippleEffect } from "@/components/ui/background-ripple-effect"; export function BackgroundRippleEffectDemo() { return (

Interactive Background Boxes Ripple Effect

Hover over the boxes above and click.To be used on backgrounds of hero sections OR Call to Action sections. I beg you don't use it everywhere.

); } `,__src__:"/src/registry/default/example/background-ripple-effect-demo.tsx",children:(0,i.jsxs)(e.code,{"data-language":"tsx","data-theme":"BeardedTheme Arc",style:{display:"grid"},children:[(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"use client"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"import"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" React"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" from"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "react"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"import"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" BackgroundRippleEffect"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" from"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "@/components/ui/background-ripple-effect"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"export"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" function"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" BackgroundRippleEffectDemo"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"()"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" return"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"div "}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"relative flex min-h-screen w-full flex-col items-start justify-start overflow-hidden"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"BackgroundRippleEffect"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" />"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"div"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"mt-60 w-full"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"h2"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"relative z-10 mx-auto max-w-4xl text-center text-2xl font-bold text-neutral-800 md:text-4xl lg:text-7xl dark:text-neutral-100"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:" Interactive Background Boxes Ripple Effect"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"p"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"relative z-10 mx-auto mt-4 max-w-xl text-center text-neutral-800 dark:text-neutral-500"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:" Hover over the boxes above and click.To be used on backgrounds of hero"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:" sections OR Call to Action sections. I beg you don"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"&"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#E35535",color:"var(--shiki-bearded)"},children:"apos"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:"t use it"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:" everywhere."})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" );"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})})]})})})}),` `,(0,i.jsxs)(e.h2,{id:"installation",children:[(0,i.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,i.jsx)(e.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,i.jsxs)(t,{defaultValue:"cli",children:[(0,i.jsxs)(b,{children:[(0,i.jsx)(o,{value:"cli",children:"CLI"}),(0,i.jsx)(o,{value:"manual",children:"Manual"})]}),(0,i.jsx)(c,{value:"cli",children:(0,i.jsxs)(h,{children:[(0,i.jsx)(d,{children:"Run the following command"}),(0,i.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.pre,{className:"BeardedTheme Arc",style:{"--shiki-bearded":"#d3d8e1","--shiki-bearded-bg":"#1c2433"},tabIndex:"0","data-language":"bash","data-theme":"BeardedTheme Arc",__rawString__:`npx shadcn@latest add @aceternity/background-ripple-effect `,__npmCommand__:`npx shadcn@latest add @aceternity/background-ripple-effect `,__yarnCommand__:`npx shadcn@latest add @aceternity/background-ripple-effect `,__pnpmCommand__:`pnpm dlx shadcn@latest add @aceternity/background-ripple-effect `,__bunCommand__:`bun x --bun shadcn@latest add @aceternity/background-ripple-effect `,__shadcnCliCommand__:`npx shadcn@latest add @aceternity/background-ripple-effect `,children:(0,i.jsx)(e.code,{"data-language":"bash","data-theme":"BeardedTheme Arc",style:{display:"grid"},children:(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"npx"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" shadcn@latest"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" add"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" @aceternity/background-ripple-effect"})]})})})}),(0,i.jsxs)(d,{children:["Add this in your ",(0,i.jsx)(e.code,{children:"globals.css"})," file"]}),(0,i.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.pre,{className:"BeardedTheme Arc",style:{"--shiki-bearded":"#d3d8e1","--shiki-bearded-bg":"#1c2433"},tabIndex:"0","data-language":"css","data-theme":"BeardedTheme Arc",__rawString__:`@theme inline { --animate-cell-ripple: cell-ripple var(--duration, 200ms) ease-out none 1 var(--delay, 0ms); @keyframes cell-ripple { 0% { opacity: 0.4; } 50% { opacity: 0.8; } 100% { opacity: 0.4; } } } `,children:(0,i.jsxs)(e.code,{"data-language":"css","data-theme":"BeardedTheme Arc",style:{display:"grid"},children:[(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"@theme"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:" inline "}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"{"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:" --animate-cell-ripple: "}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"cell-ripple"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:" var(--duration"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:" 200ms) "}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"ease-out"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:" none 1"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:" var(--delay"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:" 0ms);"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" @keyframes"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" cell-ripple"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:" 0% "}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"{"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" opacity"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0.4"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:" 50% "}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"{"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" opacity"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0.8"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:" 100% "}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"{"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" opacity"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0.4"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})})]})})})]})}),(0,i.jsx)(c,{value:"manual",children:(0,i.jsxs)(h,{children:[(0,i.jsx)(d,{children:"Install dependencies"}),(0,i.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.pre,{className:"BeardedTheme Arc",style:{"--shiki-bearded":"#d3d8e1","--shiki-bearded-bg":"#1c2433"},tabIndex:"0","data-language":"bash","data-theme":"BeardedTheme Arc",__rawString__:`npm i motion clsx tailwind-merge `,children:(0,i.jsx)(e.code,{"data-language":"bash","data-theme":"BeardedTheme Arc",style:{display:"grid"},children:(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"npm"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" i"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" motion"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" clsx"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" tailwind-merge"})]})})})}),(0,i.jsxs)(d,{children:["Add this in your ",(0,i.jsx)(e.code,{children:"globals.css"})," file"]}),(0,i.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.pre,{className:"BeardedTheme Arc",style:{"--shiki-bearded":"#d3d8e1","--shiki-bearded-bg":"#1c2433"},tabIndex:"0","data-language":"css","data-theme":"BeardedTheme Arc",__rawString__:`@theme inline { --animate-cell-ripple: cell-ripple var(--duration, 200ms) ease-out none 1 var(--delay, 0ms); @keyframes cell-ripple { 0% { opacity: 0.4; } 50% { opacity: 0.8; } 100% { opacity: 0.4; } } } `,children:(0,i.jsxs)(e.code,{"data-language":"css","data-theme":"BeardedTheme Arc",style:{display:"grid"},children:[(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"@theme"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:" inline "}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"{"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:" --animate-cell-ripple: "}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"cell-ripple"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:" var(--duration"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:" 200ms) "}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"ease-out"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:" none 1"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:" var(--delay"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:" 0ms);"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" @keyframes"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" cell-ripple"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:" 0% "}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"{"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" opacity"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0.4"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:" 50% "}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"{"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" opacity"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0.8"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:" 100% "}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"{"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" opacity"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0.4"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})})]})})}),(0,i.jsx)(d,{children:"Add util file"}),(0,i.jsxs)(e.figure,{"data-rehype-pretty-code-figure":"",children:[(0,i.jsx)(e.figcaption,{"data-rehype-pretty-code-title":"","data-language":"tsx","data-theme":"BeardedTheme Arc",children:"lib/utils.ts"}),(0,i.jsx)(e.pre,{className:"BeardedTheme Arc",style:{"--shiki-bearded":"#d3d8e1","--shiki-bearded-bg":"#1c2433"},tabIndex:"0","data-language":"tsx","data-theme":"BeardedTheme Arc",__rawString__:`import { ClassValue, clsx } from "clsx"; import { twMerge } from "tailwind-merge"; export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } `,__rawStringJsx__:`import { clsx } from "clsx"; import { twMerge } from "tailwind-merge"; export function cn(...inputs) { return twMerge(clsx(inputs)); } `,children:(0,i.jsxs)(e.code,{"data-language":"tsx","data-theme":"BeardedTheme Arc",style:{display:"grid"},children:[(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"import"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" ClassValue"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" clsx"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" from"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "clsx"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"import"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" twMerge"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" from"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "tailwind-merge"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"export"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" function"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" cn"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"(..."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#F38CEC",color:"var(--shiki-bearded)"},children:"inputs"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" ClassValue"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"[])"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" return"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" twMerge"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"clsx"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"inputs"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"));"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})})]})})]}),(0,i.jsx)(d,{children:"Copy the source code"}),(0,i.jsx)(e.p,{children:(0,i.jsx)(e.code,{children:"components/ui/background-ripple-effect.tsx"})}),(0,i.jsx)(l,{name:"background-ripple-effect",children:(0,i.jsx)(e.figure,{__src__:"/src/registry/default/ui/background-ripple-effect.tsx",__style__:"default","data-rehype-pretty-code-figure":"",children:(0,i.jsx)(e.pre,{className:"BeardedTheme Arc",style:{"--shiki-bearded":"#d3d8e1","--shiki-bearded-bg":"#1c2433"},tabIndex:"0","data-language":"tsx","data-theme":"BeardedTheme Arc",__rawString__:`"use client"; import React, { useMemo, useRef, useState } from "react"; import { cn } from "@/lib/utils"; export const BackgroundRippleEffect = ({ rows = 8, cols = 27, cellSize = 56, }: { rows?: number; cols?: number; cellSize?: number; }) => { const [clickedCell, setClickedCell] = useState<{ row: number; col: number; } | null>(null); const [rippleKey, setRippleKey] = useState(0); const ref = useRef(null); return (

{ setClickedCell({ row, col }); setRippleKey((k) => k + 1); }} interactive />

); }; type DivGridProps = { className?: string; rows: number; cols: number; cellSize: number; // in pixels borderColor: string; fillColor: string; clickedCell: { row: number; col: number } | null; onCellClick?: (row: number, col: number) => void; interactive?: boolean; }; type CellStyle = React.CSSProperties & { ["--delay"]?: string; ["--duration"]?: string; }; const DivGrid = ({ className, rows = 7, cols = 30, cellSize = 56, borderColor = "#3f3f46", fillColor = "rgba(14,165,233,0.3)", clickedCell = null, onCellClick = () => {}, interactive = true, }: DivGridProps) => { const cells = useMemo( () => Array.from({ length: rows * cols }, (_, idx) => idx), [rows, cols], ); const gridStyle: React.CSSProperties = { display: "grid", gridTemplateColumns: \`repeat(\${cols}, \${cellSize}px)\`, gridTemplateRows: \`repeat(\${rows}, \${cellSize}px)\`, width: cols * cellSize, height: rows * cellSize, marginInline: "auto", }; return (

{cells.map((idx) => { const rowIdx = Math.floor(idx / cols); const colIdx = idx % cols; const distance = clickedCell ? Math.hypot(clickedCell.row - rowIdx, clickedCell.col - colIdx) : 0; const delay = clickedCell ? Math.max(0, distance * 55) : 0; // ms const duration = 200 + distance * 80; // ms const style: CellStyle = clickedCell ? { "--delay": \`\${delay}ms\`, "--duration": \`\${duration}ms\`, } : {}; return (

onCellClick?.(rowIdx, colIdx) : undefined } /> ); })}

); }; `,__rawStringJsx__:`"use client";; import React, { useMemo, useRef, useState } from "react"; import { cn } from "@/lib/utils"; export const BackgroundRippleEffect = ({ rows = 8, cols = 27, cellSize = 56 }) => { const [clickedCell, setClickedCell] = useState(null); const [rippleKey, setRippleKey] = useState(0); const ref = useRef(null); return (

{ setClickedCell({ row, col }); setRippleKey((k) => k + 1); }} interactive />

); }; const DivGrid = ({ className, rows = 7, cols = 30, cellSize = 56, borderColor = "#3f3f46", fillColor = "rgba(14,165,233,0.3)", clickedCell = null, onCellClick = () => {}, interactive = true }) => { const cells = useMemo(() => Array.from({ length: rows * cols }, (_, idx) => idx), [rows, cols]); const gridStyle = { display: "grid", gridTemplateColumns: \`repeat(\${cols}, \${cellSize}px)\`, gridTemplateRows: \`repeat(\${rows}, \${cellSize}px)\`, width: cols * cellSize, height: rows * cellSize, marginInline: "auto", }; return (

{cells.map((idx) => { const rowIdx = Math.floor(idx / cols); const colIdx = idx % cols; const distance = clickedCell ? Math.hypot(clickedCell.row - rowIdx, clickedCell.col - colIdx) : 0; const delay = clickedCell ? Math.max(0, distance * 55) : 0; // ms const duration = 200 + distance * 80; // ms const style = clickedCell ? { "--delay": \`\${delay}ms\`, "--duration": \`\${duration}ms\`, } : {}; return (

onCellClick?.(rowIdx, colIdx) : undefined } /> ); })}

); }; `,__src__:"/src/registry/default/ui/background-ripple-effect.tsx",__style__:"default",children:(0,i.jsxs)(e.code,{"data-language":"tsx","data-theme":"BeardedTheme Arc",style:{display:"grid"},children:[(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"use client"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"import"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" React"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" useMemo"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" useRef"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" useState"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" from"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "react"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"import"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" cn"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" from"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "@/lib/utils"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"export"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" BackgroundRippleEffect"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ({"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" rows"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 8"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" cols"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 27"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" cellSize"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 56"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}:"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" rows"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"?:"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" number"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" cols"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"?:"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" number"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" cellSize"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"?:"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" number"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"})"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ["}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"clickedCell"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" setClickedCell"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"]"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" useState"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"<{"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" row"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" number"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" col"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" number"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" |"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" null"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:">("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#E35535",color:"var(--shiki-bearded)"},children:"null"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:");"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ["}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"rippleKey"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" setRippleKey"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"]"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" useState"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"0"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:");"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" ref"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" useRef"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"<"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"any"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:">("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#E35535",color:"var(--shiki-bearded)"},children:"null"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:");"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" return"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"div"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" ref"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"ref"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"cn"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "absolute inset-0 h-full w-full"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "[--cell-border-color:var(--color-neutral-300)] [--cell-fill-color:var(--color-neutral-100)] [--cell-shadow-color:var(--color-neutral-500)]"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "dark:[--cell-border-color:var(--color-neutral-700)] dark:[--cell-fill-color:var(--color-neutral-900)] dark:[--cell-shadow-color:var(--color-neutral-800)]"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" )}"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" >"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"div"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"relative h-auto w-auto overflow-hidden"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"div"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"pointer-events-none absolute inset-0 z-[2] h-full w-full overflow-hidden"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" />"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"DivGrid"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" key"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:"`base-"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"${"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"rippleKey"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:"`"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"mask-radial-from-20% mask-radial-at-top opacity-600"'})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" rows"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"rows"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" cols"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"cols"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" cellSize"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"cellSize"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" borderColor"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"var(--cell-border-color)"'})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" fillColor"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"var(--cell-fill-color)"'})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" clickedCell"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"clickedCell"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" onCellClick"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#F38CEC",color:"var(--shiki-bearded)"},children:"row"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#F38CEC",color:"var(--shiki-bearded)"},children:" col"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" setClickedCell"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"({"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" row"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" col"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" });"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" setRippleKey"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"(("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#F38CEC",color:"var(--shiki-bearded)"},children:"k"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" k"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" +"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 1"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:");"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }}"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" interactive"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" />"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" );"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"};"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:"type"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" DivGridProps"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"?:"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" string"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" rows"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" number"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" cols"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" number"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" cellSize"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" number"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#54617B","--shiki-bearded-font-style":"italic",color:"var(--shiki-bearded)"},children:" // in pixels"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" borderColor"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" string"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" fillColor"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" string"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" clickedCell"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" row"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" number"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" col"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" number"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" |"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" null"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" onCellClick"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"?:"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#F38CEC",color:"var(--shiki-bearded)"},children:"row"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" number"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#F38CEC",color:"var(--shiki-bearded)"},children:" col"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" number"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" void"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" interactive"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"?:"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" boolean"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"};"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:"type"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" CellStyle"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" React"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"CSSProperties"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" &"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ["}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"--delay"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"]?:"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" string"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ["}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"--duration"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"]?:"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" string"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"};"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:"const"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" DivGrid"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ({"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" rows"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 7"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" cols"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 30"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" cellSize"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 56"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" borderColor"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "#3f3f46"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" fillColor"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "rgba(14,165,233,0.3)"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" clickedCell"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#E35535",color:"var(--shiki-bearded)"},children:" null"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" onCellClick"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ()"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {},"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" interactive"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#E35535",color:"var(--shiki-bearded)"},children:" true"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}:"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" DivGridProps"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" cells"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" useMemo"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ()"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" Array"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"from"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"({"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" length"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" rows"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" *"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" cols"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" },"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#F38CEC",color:"var(--shiki-bearded)"},children:"_"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#F38CEC",color:"var(--shiki-bearded)"},children:" idx"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" idx"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"),"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ["}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"rows"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" cols"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"],"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" );"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" gridStyle"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" React"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"CSSProperties"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" display"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "grid"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" gridTemplateColumns"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" `repeat("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"${"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"cols"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:", "}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"${"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"cellSize"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:"px)`"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" gridTemplateRows"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" `repeat("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"${"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"rows"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:", "}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"${"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"cellSize"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:"px)`"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" width"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" cols"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" *"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" cellSize"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" height"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" rows"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" *"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" cellSize"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" marginInline"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "auto"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" };"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" return"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"div"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"cn"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"relative z-[3]"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")}"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" style"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"gridStyle"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"cells"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"map"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"(("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#F38CEC",color:"var(--shiki-bearded)"},children:"idx"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" rowIdx"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" Math"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"floor"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"idx"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" /"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" cols"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:");"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" colIdx"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" idx"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" %"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" cols"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" distance"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" clickedCell"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ?"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" Math"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"hypot"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"clickedCell"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"row"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" -"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" rowIdx"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" clickedCell"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"col"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" -"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" colIdx"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" :"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" delay"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" clickedCell"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ?"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" Math"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"max"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"0"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" distance"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" *"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 55"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" :"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#54617B","--shiki-bearded-font-style":"italic",color:"var(--shiki-bearded)"},children:" // ms"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" duration"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 200"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" +"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" distance"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" *"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 80"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#54617B","--shiki-bearded-font-style":"italic",color:"var(--shiki-bearded)"},children:" // ms"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" style"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" CellStyle"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" clickedCell"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ?"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "--delay"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" `"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"${"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"delay"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:"ms`"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "--duration"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" `"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"${"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"duration"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:"ms`"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" :"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {};"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" return"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"div"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" key"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"idx"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"cn"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "cell relative border-[0.5px] opacity-40 transition-opacity duration-150 will-change-transform hover:opacity-80 dark:shadow-[0px_0px_40px_1px_var(--cell-shadow-color)_inset]"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" clickedCell"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" &&"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "animate-cell-ripple [animation-fill-mode:none]"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" !"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"interactive"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" &&"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "pointer-events-none"'}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" )}"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" style"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={{"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" backgroundColor"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" fillColor"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" borderColor"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" borderColor"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ..."}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"style"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }}"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" onClick"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"})]}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" interactive"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ?"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ()"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" onCellClick"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"?.("}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"rowIdx"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" colIdx"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" :"}),(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#E35535",color:"var(--shiki-bearded)"},children:" undefined"})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" />"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" );"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" })}"})}),` `,(0,i.jsxs)(e.span,{"data-line":"",children:[(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" );"})}),` `,(0,i.jsx)(e.span,{"data-line":"",children:(0,i.jsx)(e.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"};"})})]})})})})]})})]}),` `,(0,i.jsxs)(e.h4,{id:"props",children:[(0,i.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#props",children:(0,i.jsx)(e.span,{className:"icon icon-link"})}),"Props"]}),` `,(0,i.jsxs)(e.h4,{id:"background-ripple-effect-props",children:[(0,i.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#background-ripple-effect-props",children:(0,i.jsx)(e.span,{className:"icon icon-link"})}),"Background Ripple Effect Props"]}),` `,(0,i.jsxs)(e.table,{children:[(0,i.jsx)(e.thead,{children:(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.th,{children:"Prop"}),(0,i.jsx)(e.th,{children:"Type"}),(0,i.jsx)(e.th,{children:"Default"}),(0,i.jsx)(e.th,{children:"Description"}),(0,i.jsx)(e.th,{children:"Required"})]})}),(0,i.jsxs)(e.tbody,{children:[(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"rows"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"number"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"8"})}),(0,i.jsx)(e.td,{children:"Number of rows in the grid."}),(0,i.jsx)(e.td,{children:"No"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"cols"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"number"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"27"})}),(0,i.jsx)(e.td,{children:"Number of columns in the grid."}),(0,i.jsx)(e.td,{children:"No"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"cellSize"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"number"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"56"})}),(0,i.jsx)(e.td,{children:"Size of each square cell in pixels."}),(0,i.jsx)(e.td,{children:"No"})]})]})]}),` `,(0,i.jsxs)(e.h4,{id:"divgrid-props",children:[(0,i.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#divgrid-props",children:(0,i.jsx)(e.span,{className:"icon icon-link"})}),"DivGrid Props"]}),` `,(0,i.jsxs)(e.table,{children:[(0,i.jsx)(e.thead,{children:(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.th,{children:"Prop"}),(0,i.jsx)(e.th,{children:"Type"}),(0,i.jsx)(e.th,{children:"Default"}),(0,i.jsx)(e.th,{children:"Description"}),(0,i.jsx)(e.th,{children:"Required"})]})}),(0,i.jsxs)(e.tbody,{children:[(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"rows"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"number"})}),(0,i.jsx)(e.td,{children:"-"}),(0,i.jsx)(e.td,{children:"Number of rows in the grid."}),(0,i.jsx)(e.td,{children:"Yes"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"cols"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"number"})}),(0,i.jsx)(e.td,{children:"-"}),(0,i.jsx)(e.td,{children:"Number of columns in the grid."}),(0,i.jsx)(e.td,{children:"Yes"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"cellSize"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"number"})}),(0,i.jsx)(e.td,{children:"-"}),(0,i.jsx)(e.td,{children:"Size of each cell in pixels."}),(0,i.jsx)(e.td,{children:"Yes"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"borderColor"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"string"})}),(0,i.jsx)(e.td,{children:"-"}),(0,i.jsx)(e.td,{children:"CSS color value for cell borders."}),(0,i.jsx)(e.td,{children:"Yes"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"fillColor"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"string"})}),(0,i.jsx)(e.td,{children:"-"}),(0,i.jsx)(e.td,{children:"CSS color value for cell fill."}),(0,i.jsx)(e.td,{children:"Yes"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"clickedCell"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"{ row: number; col: number } | null"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"null"})}),(0,i.jsx)(e.td,{children:"The currently clicked cell coordinates."}),(0,i.jsx)(e.td,{children:"No"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"onCellClick"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"(row: number, col: number) => void"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"undefined"})}),(0,i.jsx)(e.td,{children:"Callback function called when a cell is clicked."}),(0,i.jsx)(e.td,{children:"No"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"interactive"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"boolean"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"false"})}),(0,i.jsx)(e.td,{children:"Whether cells respond to mouse interactions."}),(0,i.jsx)(e.td,{children:"No"})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"className"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"string"})}),(0,i.jsx)(e.td,{children:(0,i.jsx)(e.code,{children:"undefined"})}),(0,i.jsx)(e.td,{children:"Additional CSS classes to apply to the grid container."}),(0,i.jsx)(e.td,{children:"No"})]})]})]})]})}function D(r={}){let{wrapper:e}=r.components||{};return e?(0,i.jsx)(e,{...r,children:(0,i.jsx)(v,{...r})}):v(r)}function s(r,e){throw new Error("Expected "+(e?"component":"object")+" `"+r+"` to be defined: you likely forgot to import, pass, or provide it.")}return x(B);})(); ;return Component;

Best Free Effect Components for your Tailwind CSS and React project

Aceternity UI