@ieltsrealtest/ui/README.md

Reusable UI components for IELTS Real Test platform, built with React and TypeScript.

# @ieltsrealtest/ui

Reusable React UI components for the IELTS Real Test platform, built with TypeScript and styled using Tailwind CSS.

---


## Installation

```bash
npm i @ieltsrealtest/ui
```

## Setup Notes

### tailwind.config.js

```bash
content: [
  "./node_modules/@ieltsrealtest/ui-components/dist/**/*.{js,ts,jsx,tsx}"
]
```

### globals.css

```bash
@import "tailwindcss";
@config "../../tailwind.config.js";
```

### next.config.ts (optional for Figma-hosted images)

```bash
images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "ieltsrealtest.s3.us-east-1.amazonaws.com",
        port: "",
        pathname: "/**",
      },
      {
        protocol: "https",
        hostname: "ieltsrealtest.s3.us-east-1.amazonaws.com",
        port: "",
        pathname: "/**",
      },
    ],
  },
```

## Usage

```bash
import { Header, Footer, Discussions } from "@ieltsrealtest/ui";
```

Discussions usages: - page: + example: <Discussions page="listening" isDev={isDev}>