npm package: @sorsiq/markets
Description: React components for embedding Sorsiq prediction markets
Author: Sorsiq Team
Latest version: 1.0.2

# @sorsiq/markets

React components for embedding Sorsiq prediction markets into your applications.

## Installation

```bash
npm install @sorsiq/markets
```

## Quick Start

```jsx
import { MarketWidget } from '@sorsiq/markets';

function App() {
  return (
    <div>
      <h1>Today's Predictions</h1>
      <MarketWidget 
        marketId={123}
        fullWidth={true}
      />
    </div>
  );
}
```

## Features

- 🎯 **Simple Integration** - Drop-in React components
- 📱 **Responsive Design** - Works on all screen sizes
- 🎨 **Customizable** - Flexible styling options
- ⚡ **Real-time Updates** - Live market data
- 🔒 **TypeScript Support** - Full type safety
- 🚀 **Lightweight** - Minimal bundle impact

## Usage

### Basic Market Widget

```jsx
import { MarketWidget } from '@sorsiq/markets';

<MarketWidget marketId={123} />
```

### With Local Market Data

```jsx
import { MarketWidget, Market } from '@sorsiq/markets';

const market: Market = {
  id: 1,
  title: "Will Bitcoin reach $100k?",
  description: "Predict if Bitcoin will hit $100,000 by end of year",
  deadline: "2024-12-31T23:59:59Z",
  resolved: false,
  yes_total: 1500,
  no_total: 800
};

<MarketWidget market={market} fullWidth={true} />
```

### Full Width Layout

```jsx
<MarketWidget 
  marketId={123} 
  fullWidth={true} 
/>
```

## API Reference

### MarketWidget Props

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `marketId` | `number` | No* | The ID of the market to fetch from API |
| `market` | `Market` | No* | Market data object (for local data) |
| `fullWidth` | `boolean` | No | Whether to use full width styling (default: false) |

*Either `marketId` or `market` must be provided.

### Market Interface

```typescript
interface Market {
  id: number;
  title: string;
  description: string;
  deadline: string;
  resolved: boolean;
  outcome?: string;
  yes_total?: number;
  no_total?: number;
}
```

## Examples

### Blog Integration

```jsx
import { MarketWidget } from '@sorsiq/markets';

function BlogPost() {
  return (
    <article>
      <h1>Predicting the Future of AI</h1>
      <p>What do you think? Will AI replace most jobs by 2030?</p>
      
      <MarketWidget marketId={456} fullWidth={true} />
    </article>
  );
}
```

### Dashboard Integration

```jsx
import { MarketWidget } from '@sorsiq/markets';

function Dashboard() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
      <MarketWidget marketId={123} />
      <MarketWidget marketId={456} />
      <MarketWidget marketId={789} />
    </div>
  );
}
```

### Custom Styling

The widget uses Tailwind CSS classes and can be customized with your own CSS:

```css
/* Custom styles for the widget */
.sorsiq-market-widget {
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
```

## Browser Support

- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+

## Development

```bash
# Install dependencies
npm install

# Start development mode
npm run dev

# Build for production
npm run build

# Publish to npm
npm publish
```

## Contributing

1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request

## License

MIT

## Support

- 📖 [Documentation](https://github.com/sorsiq/markets#readme)
- 🐛 [Issues](https://github.com/sorsiq/markets/issues)