# Clerk Pricing Table Integration

## Overview
This project now includes a Clerk Pricing Table component that allows users to view and select subscription plans.

## Features
- **Clerk PricingTable Component**: Displays pricing plans configured in your Clerk dashboard
- **Responsive Design**: The pricing table is centered and responsive across devices
- **Navigation Integration**: Accessible via sidebar menu item "Pricing Tables"
- **Error Handling**: Shows configuration instructions if Clerk is not properly set up

## Setup Instructions

### 1. Configure Clerk
1. Sign up for a Clerk account at [clerk.com](https://clerk.com)
2. Create a new application or use an existing one
3. Go to your Clerk Dashboard > API Keys
4. Copy your **Publishable Key**

### 2. Environment Configuration
Update your `.env` file with your Clerk publishable key:

```bash
REACT_APP_CLERK_PUBLISHABLE_KEY=pk_test_your_actual_clerk_publishable_key_here
```

### 3. Configure Pricing Plans
1. In your Clerk Dashboard, go to **Billing** or **Subscriptions**
2. Set up your pricing plans with the features you want to offer
3. Configure the pricing table display options

## Usage

### Accessing the Pricing Table
- Navigate to `/pricing-tables` in your browser
- Or click "Pricing Tables" in the sidebar navigation menu

### Code Structure
- **Page Component**: `src/pages/clerk/PricingTables.tsx`
- **Route Configuration**: `src/routes/contentRoutes.tsx`
- **Menu Configuration**: `src/menu.ts` (clerkMenu)
- **Navigation**: `src/layout/MySidebar.tsx`

### Components Used
```tsx
import { PricingTable } from '@clerk/clerk-react';

// Basic usage
<PricingTable />
```

## Customization

### Styling
The pricing table inherits the application's theme and can be styled using CSS classes or styled-components.

### Layout
The current implementation:
- Centers the pricing table on the page
- Includes a header with title and description
- Uses the application's standard page layout components

### Error States
If Clerk is not configured properly, users will see:
- Setup instructions
- Current configuration status
- Links to Clerk documentation

## Development

### Running the Application
```bash
npm start
```

### Building for Production
```bash
npm run build
```

## Troubleshooting

### Common Issues
1. **"Missing Publishable Key" Error**: Ensure your `.env` file contains the correct Clerk publishable key
2. **Pricing Table Not Loading**: Check your Clerk dashboard for properly configured pricing plans
3. **Navigation Issues**: Verify the route is properly configured in `contentRoutes.tsx`

### Support
- Clerk Documentation: [docs.clerk.com](https://docs.clerk.com)
- Clerk Community: [clerk.com/community](https://clerk.com/community)