UI Component

// Example of the VerifyButton component
<VerifyButton
  proofPath="/demo/proof.bin"
  settingsPath="/demo/settings.bin"
  title="Demo Verification"
  buttonText="Verify Demo Proof"
  author="Giza"
  modelDescription="Example AI Model"
  authorUrl="https://giza.tech"
/>

npm install @gizatech/luminair-react
# or
yarn add @gizatech/luminair-react
# or
pnpm add @gizatech/luminair-react

import '@gizatech/luminair-react/styles.css';

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config, { isServer }) => {
    // Handle WASM files
    config.experiments = {
      ...config.experiments,
      asyncWebAssembly: true,
    };

    config.module.rules.push({
      test: /\.wasm$/,
      type: 'webassembly/async',
    });

    // Fallback for Node.js modules
    if (!isServer) {
      config.resolve.fallback = {
        ...config.resolve.fallback,
        fs: false,
        path: false,
        crypto: false,
      };
    }

    return config;
  },
};

module.exports = nextConfig;

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@gizatech/luminair-react/dist/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

import { VerifyButton } from '@gizatech/luminair-react';
import '@gizatech/luminair-react/styles.css';

function App() {
  return (
    <VerifyButton
      proofPath="/path/to/your/proof.bin"
      settingsPath="/path/to/your/settings.bin"
    />
  );
}

<VerifyButton
  proofPath="/proof.bin"
  settingsPath="/settings.bin"
  title="Custom Verification Portal"
  buttonText="VERIFY PROOF"
  author="Your Organization"
  modelDescription="Custom AI Model v2.0"
  authorUrl="https://yourcompany.com"
  className="bg-blue-600 hover:bg-blue-700 text-white"
/>

function ModelGallery() {
  const models = [
    {
      name: "GPT-4 Compatible",
      proofPath: "/models/gpt4/proof.bin",
      settingsPath: "/models/gpt4/settings.bin",
      description: "Large language model for text generation"
    },
    {
      name: "Image Classifier",
      proofPath: "/models/classifier/proof.bin",
      settingsPath: "/models/classifier/settings.bin",
      description: "Convolutional neural network for image classification"
    }
  ];

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
      {models.map((model, index) => (
        <div key={index} className="p-6 border rounded-lg">
          <h3 className="text-lg font-semibold mb-2">{model.name}</h3>
          <p className="text-gray-600 mb-4">{model.description}</p>
          <VerifyButton
            proofPath={model.proofPath}
            settingsPath={model.settingsPath}
            title={`Verify ${model.name}`}
            modelDescription={model.description}
          />
        </div>
      ))}
    </div>
  );
}

function ThemeToggle() {
  const [isDark, setIsDark] = useState(false);

  useEffect(() => {
    if (isDark) {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }
  }, [isDark]);

  return (
    <button onClick={() => setIsDark(!isDark)}>
      Toggle {isDark ? 'Light' : 'Dark'} Mode
    </button>
  );
}

public/
  ├── proof.bin
  └── settings.bin