# Улучшение UI с использованием TailwindCSS

#### Улучшение UI с использованием **TailwindCSS**

Добавим **TailwindCSS** для стилизации интерфейса.

***

#### **1. Установка TailwindCSS**

```sh
npm install -D tailwindcss postcss autoprefixer  
npx tailwindcss init -p
```

***

#### **2. Настройка `tailwind.config.js`**

Добавьте пути к файлам в **content**:

```js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};
```

***

#### **3. Добавление Tailwind в `styles/globals.css`**

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

***

#### **4. Обновленный UI в `pages/index.js`**

```javascript
import { useWallet } from "@solana/wallet-adapter-react";
import { WalletMultiButton } from "@solana/wallet-adapter-react-ui";
import { useEffect, useState } from "react";
import { Connection, PublicKey } from "@solana/web3.js";
import { Program, AnchorProvider, web3, BN } from "@project-serum/anchor";

const programId = new PublicKey("9HhvqA...pXr"); // Ваш Program ID
const network = "https://api.devnet.solana.com";

export default function Home() {
    const { publicKey } = useWallet();
    const [provider, setProvider] = useState(null);
    const [program, setProgram] = useState(null);
    const [amount, setAmount] = useState(100);

    useEffect(() => {
        if (publicKey) {
            const connection = new Connection(network, "processed");
            const walletProvider = new AnchorProvider(connection, window.solana, {});
            const idl = require("../idl.json"); // Замените на ваш IDL-файл
            setProvider(walletProvider);
            setProgram(new Program(idl, programId, walletProvider));
        }
    }, [publicKey]);

    const stakeTokens = async () => {
        if (!publicKey || !program) return;
        await program.rpc.stake(new BN(amount), {
            accounts: {
                stakingAccount: programId,
                userStaking: publicKey,
                userTokenAccount: publicKey,
                tokenProgram: web3.TOKEN_PROGRAM_ID,
            },
        });
        alert(`Staked ${amount} RUM!`);
    };

    const unstakeTokens = async () => {
        if (!publicKey || !program) return;
        await program.rpc.unstake({
            accounts: {
                stakingAccount: programId,
                userStaking: publicKey,
                userTokenAccount: publicKey,
                tokenProgram: web3.TOKEN_PROGRAM_ID,
            },
        });
        alert("Unstaked successfully!");
    };

    return (
        <div className="min-h-screen bg-gray-900 text-white flex flex-col items-center justify-center p-6">
            <h1 className="text-4xl font-bold mb-4">RentumAI Staking</h1>
            <WalletMultiButton className="mb-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" />
            {publicKey && (
                <div className="bg-gray-800 p-6 rounded-lg shadow-lg text-center">
                    <input
                        type="number"
                        value={amount}
                        onChange={(e) => setAmount(e.target.value)}
                        className="w-full px-3 py-2 mb-4 text-black rounded"
                        placeholder="Enter amount"
                    />
                    <button
                        onClick={stakeTokens}
                        className="w-full bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded mb-2"
                    >
                        Stake
                    </button>
                    <button
                        onClick={unstakeTokens}
                        className="w-full bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
                    >
                        Unstake
                    </button>
                </div>
            )}
        </div>
    );
}
```

***

#### **5. Запуск проекта**

```sh
npm run dev
```

Теперь у нас **современный UI** с **тёмной темой, плавными кнопками и адаптивностью**!

***

#### **Что дальше?**


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ryve.gitbook.io/rentum/uluchshenie-ui-s-ispolzovaniem-tailwindcss.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.