Tailwind CSS Buttons

"use client";
import React, { useEffect, useRef, useState } from "react";
import { ButtonsCard } from "@/lab/aceternity/ui/tailwindcss-buttons";

const DESIGN_W = 1000;
const DESIGN_H = 625;

export default function TailwindcssButtons() {
  const ref = useRef<HTMLDivElement>(null);
  const [scale, setScale] = useState(1);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const ro = new ResizeObserver(([entry]) => {
      const { width, height } = entry.contentRect;
      setScale(Math.min(width / DESIGN_W, height / DESIGN_H));
    });
    ro.observe(el);
    return () => ro.disconnect();
  }, []);

  return (
    <div ref={ref} className="relative flex h-full w-full items-center justify-center overflow-hidden">
      <div
        className="grid shrink-0 grid-cols-4 grid-rows-3 gap-4 p-6"
        style={{ width: DESIGN_W, height: DESIGN_H, transform: `scale(${scale})` }}
      >
        {buttons.map((button) => (
          <ButtonsCard key={button.name} className="h-full">
            {button.component}
          </ButtonsCard>
        ))}
      </div>
    </div>
  );
}

const buttons = [
  {
    name: "Sketch",
    component: (
      <button className="rounded-md border border-black bg-white px-4 py-2 text-sm text-black transition duration-200 hover:shadow-[4px_4px_0px_0px_rgba(0,0,0)]">
        Sketch
      </button>
    ),
  },
  {
    name: "Simple",
    component: (
      <button className="transform rounded-md border border-neutral-300 bg-neutral-100 px-4 py-2 text-sm text-neutral-500 transition duration-200 hover:-translate-y-1 hover:shadow-md">
        Simple
      </button>
    ),
  },
  {
    name: "Invert",
    component: (
      <button className="rounded-md border-2 border-transparent bg-teal-500 px-8 py-2 font-bold text-white transition duration-200 hover:border-teal-500 hover:bg-white hover:text-black">
        Invert it
      </button>
    ),
  },
  {
    name: "Tailwindcss Connect",
    component: (
      <button className="group relative inline-block cursor-pointer rounded-full bg-slate-800 p-px text-xs leading-6 font-semibold text-white no-underline shadow-2xl shadow-zinc-900">
        <span className="absolute inset-0 overflow-hidden rounded-full">
          <span className="absolute inset-0 rounded-full bg-[image:radial-gradient(75%_100%_at_50%_0%,rgba(56,189,248,0.6)_0%,rgba(56,189,248,0)_75%)] opacity-0 transition-opacity duration-500 group-hover:opacity-100"></span>
        </span>
        <div className="relative z-10 flex items-center space-x-2 rounded-full bg-zinc-950 px-4 py-0.5 ring-1 ring-white/10">
          <span>{`Tailwind Connect`}</span>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              stroke="currentColor"
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="1.5"
              d="M10.75 8.75L14.25 12L10.75 15.25"
            ></path>
          </svg>
        </div>
        <span className="absolute -bottom-0 left-[1.125rem] h-px w-[calc(100%-2.25rem)] bg-gradient-to-r from-emerald-400/0 via-emerald-400/90 to-emerald-400/0 transition-opacity duration-500 group-hover:opacity-40"></span>
      </button>
    ),
  },
  {
    name: "Gradient",
    component: (
      <button className="rounded-full bg-gradient-to-b from-blue-500 to-blue-600 px-8 py-2 text-white transition duration-200 hover:shadow-xl focus:ring-2 focus:ring-blue-400">
        Gradient
      </button>
    ),
  },
  {
    name: "Unapologetic",
    component: (
      <button className="group relative border border-black bg-transparent px-8 py-2 text-black transition duration-200 dark:border-white">
        <div className="absolute -right-2 -bottom-2 -z-10 h-full w-full bg-yellow-300 transition-all duration-200 group-hover:right-0 group-hover:bottom-0" />
        <span className="relative">Unapologetic</span>
      </button>
    ),
  },
  {
    name: "Lit up borders",
    component: (
      <button className="relative p-[3px]">
        <div className="absolute inset-0 rounded-lg bg-gradient-to-r from-indigo-500 to-purple-500" />
        <div className="group relative rounded-[6px] bg-black px-8 py-2 text-white transition duration-200 hover:bg-transparent">
          Lit up borders
        </div>
      </button>
    ),
  },
  {
    name: "Border Magic",
    component: (
      <button className="relative inline-flex h-12 overflow-hidden rounded-full p-[1px] focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50 focus:outline-none">
        <span className="absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#E2CBFF_0%,#393BB2_50%,#E2CBFF_100%)]" />
        <span className="inline-flex h-full w-full cursor-pointer items-center justify-center rounded-full bg-slate-950 px-3 py-1 text-sm font-medium text-white backdrop-blur-3xl">
          Border Magic
        </span>
      </button>
    ),
  },
  {
    name: "Brutal",
    component: (
      <button className="border-2 border-black bg-white px-8 py-0.5 text-sm text-black uppercase shadow-[1px_1px_rgba(0,0,0),2px_2px_rgba(0,0,0),3px_3px_rgba(0,0,0),4px_4px_rgba(0,0,0),5px_5px_0px_0px_rgba(0,0,0)] transition duration-200 dark:border-white dark:shadow-[1px_1px_rgba(255,255,255),2px_2px_rgba(255,255,255),3px_3px_rgba(255,255,255),4px_4px_rgba(255,255,255),5px_5px_0px_0px_rgba(255,255,255)]">
        Brutal
      </button>
    ),
  },
  {
    name: "Shimmer",
    component: (
      <button className="inline-flex h-12 animate-ace-b-shimmer items-center justify-center rounded-md border border-slate-800 bg-[linear-gradient(110deg,#000103,45%,#1e2631,55%,#000103)] bg-[length:200%_100%] px-6 font-medium text-slate-400 transition-colors focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50 focus:outline-none">
        Shimmer
      </button>
    ),
  },
  {
    name: "Next.js Blue",
    component: (
      <button className="rounded-md bg-[#0070f3] px-8 py-2 font-light text-white shadow-[0_4px_14px_0_rgb(0,118,255,39%)] transition duration-200 ease-linear hover:bg-[rgba(0,118,255,0.9)] hover:shadow-[0_6px_20px_rgba(0,118,255,23%)]">
        Next.js Blue
      </button>
    ),
  },
  {
    name: "Top Gradient",
    component: (
      <button className="relative rounded-full border border-slate-600 bg-slate-700 px-8 py-2 text-sm text-white transition duration-200 hover:shadow-2xl hover:shadow-white/[0.1]">
        <div className="absolute inset-x-0 -top-px mx-auto h-px w-1/2 bg-gradient-to-r from-transparent via-teal-500 to-transparent shadow-2xl" />
        <span className="relative z-20">Top gradient</span>
      </button>
    ),
  },
];