# 📚 clubzella-comics-widget

A plug-and-play comics widget for React Native apps. Built to display Clubzella comics through a floating button UI that opens an interactive panel for users to explore and read content.

---

## ✨ Features

- 🔘 Floating action button (FAB) with custom circular UI
- 📖 Quick access to “Read Now” interface
- 📚 Dynamic comics panel pulled using your `apiKey`
- 🔧 Minimal configuration – just import and drop into your app

---

## 📦 Installation

```bash
npm install clubzella-comics-widget
# or
yarn add clubzella-comics-widget
```

> Ensure you have installed the peer dependencies:

```bash
npm install react react-native @expo/vector-icons react-native-webview
```

---

## 🚀 Usage

```tsx
import React from "react"
import { Widget } from "clubzella-comics-widget"

export default function App() {
  return (
    <>
      {/* Other components */}
      <Widget apiKey="YOUR_API_KEY" />
    </>
  )
}
```

This will render a floating widget button at the bottom right of your app. When tapped, it expands to a panel displaying Clubzella comics.

---

## ⚙️ Props

| Prop     | Type   | Required | Description                               |
| -------- | ------ | -------- | ----------------------------------------- |
| `apiKey` | string | ✅ Yes   | Your Clubzella API key for fetching data. |

---

## 🧱 Components Breakdown

Internally, the widget includes:

- `CircleText` – Custom FAB content
- `ReadNow` – Preview + CTA to open the comics panel
- `ComicsPanel` – The main comic listing panel (fetched via `apiKey`)

All of these are connected and controlled from the `Widget` root component.

---

## 📝 License

MIT © [Clubzella](https://github.com/zellastudios)

---

## 📬 Contributions

Issues and PRs are welcome! Help us improve and expand the widget by contributing directly to the repo.

```bash
git clone https://github.com/zellastudios/zella-widget.git
cd zella-widget
npm install
npm run build
```