UltraQualityTabs

"use client";

import React from "react";
import { UltraQualityTabs } from "@/components/ui/ultra-quality-tabs";

const tabData = [
  {
    label: "Overview",
    content: (
      <div>
        <h2 className="text-lg font-semibold mb-2 text-gray-800 dark:text-gray-100">
          Product Overview
        </h2>
        <p className="text-gray-600 dark:text-gray-300">
          UltraQualityTabs provides a polished tabbed interface with full
          keyboard support and smooth style transitions. Perfect for
          organizing your content in clean, separated panels.
        </p>
      </div>
    ),
  },
  {
    label: "Features",
    content: (
      <ul className="list-disc list-inside text-gray-600 dark:text-gray-300 space-y-1">
        <li>Keyboard navigation (Arrow & Tab keys)</li>
        <li>Smooth background and shadow transitions</li>
        <li>Responsive layout adapts to any width</li>
        <li>Easy to customize colors and spacing</li>
      </ul>
    ),
  },
  {
    label: "Pricing",
    content: (
      <div className="text-gray-600 dark:text-gray-300">
        <p className="mb-2">Choose a plan that fits your needs:</p>
        <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
          {["Basic", "Pro", "Enterprise"].map((plan) => (
            <div
              key={plan}
              className="border rounded-lg p-3 bg-gray-50 dark:bg-gray-700"
            >
              <h3 className="font-semibold text-gray-800 dark:text-gray-100">
                {plan}
              </h3>
              <p className="mt-1 text-xl font-bold text-indigo-600 dark:text-indigo-400">
                {plan === "Basic" ? "$10/mo" : plan === "Pro" ? "$25/mo" : "$50/mo"}
              </p>
            </div>
          ))}
        </div>
      </div>
    ),
  },
];

export default function DemoOne() {
  return (
    <div className="min-h-screen flex flex-col items-center justify-center bg-gray-50 dark:bg-gray-900 p-6">
      <h1 className="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-100">
        Ultra Quality Tabs Demo
      </h1>
      <UltraQualityTabs tabs={tabData} />
    </div>
  );
}