import { Shiny } from "../Shiny"

export default function Example() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-4">
      <button className="group rounded-[var(--border-radius)] [--border-radius:16px]">
        <Shiny className="w-40 bg-zinc-700 py-3.5">
          <span className="relative bg-gradient-to-b from-zinc-50/90 to-zinc-50/60 bg-clip-text text-transparent">
            Zinc Button
          </span>
        </Shiny>
      </button>

      <button className="group rounded-[var(--border-radius)] [--border-radius:16px]">
        <Shiny className="w-40 bg-slate-700 py-3.5">
          <span className="relative bg-gradient-to-b from-slate-50/90 to-slate-50/60 bg-clip-text text-transparent">
            Slate Button
          </span>
        </Shiny>
      </button>

      <button className="group rounded-[var(--border-radius)] [--border-radius:16px]">
        <Shiny className="w-40 bg-red-800 py-3.5">
          <span className="relative bg-gradient-to-b from-red-50/90 to-red-50/60 bg-clip-text text-transparent">
            Red Button
          </span>
        </Shiny>
      </button>

      <button className="group rounded-[var(--border-radius)] [--border-radius:16px]">
        <Shiny className="w-40 bg-green-800 py-3.5">
          <span className="relative bg-gradient-to-b from-green-50/90 to-green-50/60 bg-clip-text text-transparent">
            Green Button
          </span>
        </Shiny>
      </button>
    </div>
  )
}

import { Shiny } from "../Shiny"

export default function Example() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-4">
      <div className="group cursor-default rounded-[var(--border-radius)] [--border-radius:1000px]">
        <Shiny className="bg-zinc-700 px-3 py-1">
          <span className="relative block bg-gradient-to-b from-zinc-50/90 to-zinc-50/60 bg-clip-text text-sm text-transparent">
            Badge
          </span>
        </Shiny>
      </div>

      <div className="group cursor-default rounded-[var(--border-radius)] [--border-radius:1000px]">
        <Shiny className="bg-slate-700 px-3 py-1">
          <span className="relative block bg-gradient-to-b from-slate-50/90 to-slate-50/60 bg-clip-text text-sm text-transparent">
            Badge
          </span>
        </Shiny>
      </div>

      <div className="group cursor-default rounded-[var(--border-radius)] [--border-radius:1000px]">
        <Shiny className="bg-red-800 px-3 py-1">
          <span className="relative block bg-gradient-to-b from-red-50/90 to-red-50/60 bg-clip-text text-sm text-transparent">
            Badge
          </span>
        </Shiny>
      </div>

      <div className="group cursor-default rounded-[var(--border-radius)] [--border-radius:1000px]">
        <Shiny className="bg-green-800 px-3 py-1">
          <span className="relative block bg-gradient-to-b from-green-50/90 to-green-50/60 bg-clip-text text-sm text-transparent">
            Badge
          </span>
        </Shiny>
      </div>
    </div>
  )
}

import { useRef } from "react"
import { Shiny } from "../Shiny"

export default function Example() {
  const cardRef = useRef(null)

  return (
    <div className="flex flex-wrap items-center justify-center gap-4">
      <div
        ref={cardRef}
        className="group p-6 transition-transform duration-200 ease-linear [--border-radius:12px] [transform:perspective(1000px)] hover:duration-[75ms] hover:[transform:perspective(1000px)_rotateY(calc((var(--mx,0.5)-0.5)*20deg))_rotateX(calc((var(--my,0.5)-0.5)*20deg))]"
      >
        <Shiny className="bg-zinc-700" containerRef={cardRef}>
          <div className="flex w-64 max-w-full cursor-default flex-col justify-end p-4 text-sm">
            <div className="h-48 w-full rounded-md bg-zinc-950/70" />
            <span className="relative mt-4 bg-gradient-to-b from-zinc-50/90 to-zinc-50/60 bg-clip-text font-semibold text-transparent">
              3D Card
            </span>
            <p className="mt-1 text-white/50">
              This card rotates as you move your mouse
            </p>
          </div>
        </Shiny>
      </div>
    </div>
  )
}