klz-cables.com/components/blog/TechnicalGrid.tsx

import Scribble from '@/components/Scribble';
import { formatTechnicalValue } from '@/lib/utils/technical';

interface TechnicalGridItem {
  label: string;
  value: string;
}

interface TechnicalGridProps {
  title?: string;
  items: TechnicalGridItem[];
}

export default function TechnicalGrid({ title, items }: TechnicalGridProps) {
  return (
    <div className="my-16 not-prose">
      {title && (
        <h3 className="text-2xl font-bold text-text-primary mb-8 flex items-center gap-4 relative">
          <span className="relative inline-block">
            {title}
            <Scribble
              variant="underline"
              className="absolute -bottom-2 left-0 w-full h-3 text-accent/40"
            />
          </span>
        </h3>
      )}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {items.map((item, index) => {
          const formatted = formatTechnicalValue(item.value);
          return (
            <div key={index} className="bg-white p-8 rounded-2xl border border-neutral-200 shadow-sm hover:shadow-md transition-all duration-300 group relative overflow-hidden">
              <div className="absolute top-0 right-0 w-16 h-16 bg-primary/5 -mr-8 -mt-8 rotate-45 transition-transform group-hover:scale-110" />
              <span className="block text-xs font-bold text-primary uppercase tracking-[0.2em] mb-3 opacity-70">
                {item.label}
              </span>
              <div className="text-lg text-text-secondary leading-relaxed group-hover:text-text-primary transition-colors">
                {formatted.isList ? (
                  <div className="flex flex-wrap gap-2 mt-2">
                    {formatted.parts.map((p, pIdx) => (
                      <span
                        key={pIdx}
                        className="inline-block px-3 py-1 bg-neutral-light border border-neutral-dark/10 rounded-lg text-xs font-bold text-primary shadow-sm group-hover:border-accent/40 transition-colors"
                      >
                        {p}
                      </span>
                    ))}
                  </div>
                ) : (
                  item.value
                )}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}