custom-demo-controls

// @ts-nocheck fix css later

import React from "react"

export function CustomDemoControls({ children }: React.PropsWithChildren) {
  return (
    <section
      className={`
        relative mt-10 flex w-full animate-in flex-row bg-linear-to-br from-gray-100 to-primary px-8 py-3 transition-all duration-500 ease-in-out
        fade-in-100
        dark:from-neutral-900 dark:to-neutral-950
      `}
    >
      <div
        className={`
          absolute top-0 left-[calc(var(--offset)/2*-1)] z-20 h-(--height) w-[calc(100%+var(--offset))]
          bg-[linear-gradient(to_right,var(--color),var(--color)_50%,transparent_0,transparent)] bg-size-[var(--width)_var(--height)] mask-exclude
          dark:bg-[linear-gradient(to_right,var(--color-dark),var(--color-dark)_50%,transparent_0,transparent)]
        `}
        style={{
          ["--background"]: "#ffffff",
          "--color": "rgba(0, 0, 0, 0.2)",
          "--color-dark": "rgba(255, 255, 255, 0.2)",
          "--fade-stop": "90%",
          "--height": "1px",
          "--offset": "20px",
          "--width": "5px",
          maskComposite: "exclude",
          maskImage:
            "linear-gradient(to top,var(--background)var(--fade-stop),transparent),linear-gradient(to bottom,var(--background)var(--fade-stop),transparent),linear-gradient(black,black)",
        }}
      ></div>

      <div
        className={`
          absolute top-auto bottom-0 left-[calc(var(--offset)/2*-1)] z-20 h-(--height) w-[calc(100%+var(--offset))]
          bg-[linear-gradient(to_right,var(--color),var(--color)_50%,transparent_0,transparent)] bg-size-[var(--width)_var(--height)] mask-exclude
          dark:bg-[linear-gradient(to_right,var(--color-dark),var(--color-dark)_50%,transparent_0,transparent)]
        `}
        style={{
          "--background": "#ffffff",
          "--color": "rgba(0, 0, 0, 0.2)",
          "--color-dark": "rgba(255, 255, 255, 0.2)",
          "--fade-stop": "90%",
          "--height": "1px",
          "--offset": "20px",
          "--width": "5px",
          maskComposite: "exclude",
          maskImage:
            "linear-gradient(to top,var(--background)var(--fade-stop),transparent),linear-gradient(to bottom,var(--background)var(--fade-stop),transparent),linear-gradient(black,black)",
        }}
      ></div>

      <div
        className={`
          absolute top-[calc(var(--offset)/2*-1)] left-0 z-20 h-[calc(100%+var(--offset))] w-(--width)
          bg-[linear-gradient(to_bottom,var(--color),var(--color)_50%,transparent_0,transparent)] bg-size-[var(--width)_var(--height)] mask-exclude
          dark:bg-[linear-gradient(to_bottom,var(--color-dark),var(--color-dark)_50%,transparent_0,transparent)]
        `}
        style={{
          "--background": "#ffffff",
          "--color": "rgba(0, 0, 0, 0.2)",
          "--color-dark": "rgba(255, 255, 255, 0.2)",
          "--fade-stop": "90%",
          "--height": "5px",
          "--offset": "40px",
          "--width": "1px",
          maskComposite: "exclude",
          maskImage:
            "linear-gradient(to top,var(--background)var(--fade-stop),transparent),linear-gradient(to bottom,var(--background)var(--fade-stop),transparent),linear-gradient(black,black)",
        }}
      ></div>

      <div
        className={`
          absolute top-[calc(var(--offset)/2*-1)] right-0 left-auto z-20 h-[calc(100%+var(--offset))] w-(--width)
          bg-[linear-gradient(to_bottom,var(--color),var(--color)_50%,transparent_0,transparent)] bg-size-[var(--width)_var(--height)] mask-exclude
          dark:bg-[linear-gradient(to_bottom,var(--color-dark),var(--color-dark)_50%,transparent_0,transparent)]
        `}
        style={{
          "--background": "#ffffff",
          "--color": "rgba(0, 0, 0, 0.2)",
          "--color-dark": "rgba(255, 255, 255, 0.2)",
          "--fade-stop": "90%",
          "--height": "5px",
          "--offset": "40px",
          "--width": "1px",
          maskComposite: "exclude",
          maskImage:
            "linear-gradient(to top,var(--background)var(--fade-stop),transparent),linear-gradient(to bottom,var(--background)var(--fade-stop),transparent),linear-gradient(black,black)",
        }}
      ></div>
      {children}
    </section>
  )
}