Tailwind CSS

module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@c15t/react/**/*.{js,mjs}',
  ],
};

import { type ReactNode } from 'react';
import { type Theme, ConsentManagerProvider } from '@c15t/react';

const theme = {
  slots: {
    consentBanner: 'fixed bottom-0 inset-x-0 z-50',
    consentBannerCard:
      'mx-auto max-w-2xl rounded-t-2xl bg-white p-6 shadow-2xl',
    consentBannerTitle: 'text-lg font-semibold text-gray-900',
    consentBannerDescription: 'mt-2 text-sm text-gray-600',
    consentBannerFooter: 'mt-4 flex flex-wrap gap-3',
    buttonPrimary:
      'rounded-full bg-indigo-600 px-6 py-2.5 text-sm font-medium text-white hover:bg-indigo-700',
    buttonSecondary:
      'rounded-full border border-gray-300 px-6 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50',
    toggle: 'data-[state=checked]:bg-indigo-600',
  },
} satisfies Theme;

export function ConsentManager({ children }: { children: ReactNode }) {
  return (
    <ConsentManagerProvider
      options={{
        theme,
        mode: 'c15t',
        backendURL: 'https://your-instance.c15t.dev',
      }}
    >
      {children}
    </ConsentManagerProvider>
  );
}

const theme = {
  colors: {
    primary: '#6366f1',
    surface: '#ffffff',
    text: '#1f2937',
  },
  dark: {
    primary: '#818cf8',
    surface: '#1f2937',
    text: '#f9fafb',
  },
  slots: {
    consentBannerCard:
      'bg-white dark:bg-gray-900 shadow-lg dark:shadow-gray-900/30',
    consentBannerTitle: 'text-gray-900 dark:text-gray-100',
  },
} satisfies Theme;