import classNames from "classnames/bind";
import style from './style.module.scss';
import Image from "next/image";
import ProductItem from "@/components/product-item";
import Link from "next/link";
import { use } from 'react';
const cn = classNames.bind(style);
const getData = async () => {
const response = await fetch("http://localhost:9000/api/cart/qty");
if (!response.ok) {
throw new Error("Failed to fetch data");
}
return await response.json();
};
export default function MainPage() {
const data = use(getData());
return (
<div className={cn('main-page')}>
<div className={cn('title-section')}>
<div className={cn('title')}>
<p>
Уникальные изделия кубачинских мастеров
</p>
{/* Используем полученные данные */}
<p>{data.qty}</p>
</div>
</div>
<div className={cn('features')}>
<div className={cn('item')}>
<Image src={'/heart.png'} alt={'индивидуальный подход'} width={50} height={50} />
<span>Индивидуальный подход</span>
</div>
<div className={cn('item')}>
<Image src={'/hot-air-balloon.png'} alt={'индивидуальный подход'} width={50} height={50} />
<span>Доставка по всей России</span>
</div>
<div className={cn('item')}>
<Image src={'/diamond-ring.png'} alt={'индивидуальный подход'} width={50} height={50} />
<span>300+ изделий</span>
</div>
<div className={cn('item')}>
<Image src={'/shopping-store.png'} alt={'индивидуальный подход'} width={50} height={50} />
<span>Наш магазин открыт с 2003 года</span>
</div>
</div>
<div className={cn('products-catalog')}>
{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((el) => (
<Link className={cn('product-item-link')} href={`/jewellery-catalog/${el}`} key={el}>
<ProductItem />
</Link>
))}
</div>
</div>
);
}sui client call --package 0xfa9302fe83a1b717293ca0d4f80a9195e66ac3d401977df5b16f1aae00232ab9 ^
--module move_pump --function buy ^
--type-args 0xd177f070ac9dc7ca9cf13107ff9bebc74b4606ab75dde706e9a6bfa78377de23::nsell::NSELL ^
--args 0xd746495d04a6119987c2b9334c5fefd7d8cff52a8a02a3ea4e3995b9a041ace4::3038839::true 0::0 ^
0x3f2d9f724f4a1ce5e71676448dc452be9a6243dac9c5b975a588c8c867066e92::1587827::true ^
904956798544794 ^
0x0000000000000000000000000000000000000000000000000000000000000006::1::false ^
--gas 0xadd7864f026906e79b…09770cd752668e5ef0e9203b0fc81a --gas-budget 1000000000import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { Cart } from "./components/cart/Cart";
import { Catalog } from "./components/catalog/Catalog";
import { About } from "./pages/About";
import { MainPage } from "./components/mainPage/MainPage";
import { Page404 } from "./pages/Page404";
import { ProductPage } from "./components/productPage/ProductPage";
import { Menu } from "./components/menu/Menu";
import { Contacts } from "./pages/Contacts";
import { Footer } from "./UI/Footer";
import { Banner } from "./UI/Banner.jsx";
import { useDispatch } from "react-redux";
import { resetClicks } from "./app/store/searchBarSlice";
function App() {
const dispatch = useDispatch();
const hideMenuSearchBar = () => {
dispatch(resetClicks());
};
return (
<BrowserRouter basename="/test">
<div className="App">
<Menu />
<main className="container" onClick={hideMenuSearchBar}>
<div className="row">
<div className="col">
<Banner />
<Routes>
<Route path="/" exact element={<MainPage />} />
<Route path="/about" element={<About />} />
<Route path="/products/:prdId" element={<ProductPage />} />
<Route path="/cart" element={<Cart />} />
<Route path="/contacts" element={<Contacts />} />
<Route path="*" element={<Page404 />} />
<Route path="/:catId" element={<MainPage />} />
<Route path="/catalog/:catId?" element={<Catalog isCatalogPage={true} />} />
</Routes>
</div>
</div>
</main>
<Footer />
</div>
</BrowserRouter>
);
}
export default App;function increaseSalary() {
let employeeWithNewSalary;
return api.getEmployees()
.then(employeeData => {
const [minSalaryEmployee] = employeeData.reduce(([minEmployee, minSalary], employee) => {
const { salary } = employee;
return (salary < minSalary
? [employee, salary]
: [minEmployee, minSalary]
);
}, [null, Infinity]);
const { id, salary: oldSalary } = minSalaryEmployee;
const newSalary = oldSalary * 1.2;
return { id, salary: newSalary };
})
.then(({ id, salary }) => {
return api.setEmployeeSalary(id, salary)
.then(updatedEmployee => {
employeeWithNewSalary = updatedEmployee;
return updatedEmployee;
});
})
.then(() => {
return api.notifyEmployee(employeeWithNewSalary.id, `Hello, ${employeeWithNewSalary.name}! Congratulations, your new salary is ${employeeWithNewSalary.salary}!`);
})
.then(() => {
return true;
})
.catch(e => {
return api.notifyAdmin(e).then(() => false);
});
}function increaseSalary() {
let employeeWithNewSalary;
return api.getEmployees()
.then(employeeData => {
const [minSalaryEmployee] = employeeData.reduce(([minEmployee, minSalary], employee) => {
const { salary } = employee;
return (salary < minSalary
? [employee, salary]
: [minEmployee, minSalary]
);
}, [null, Infinity]);
const { id, salary: oldSalary } = minSalaryEmployee;
const newSalary = oldSalary * 1.2;
return { id, salary: newSalary };
})
.then(({ id, salary }) => {
return api.setEmployeeSalary(id, salary).then(updatedEmployee => {
employeeWithNewSalary = updatedEmployee;
return updatedEmployee;
});
})
.then(() => {
return api.notifyEmployee(employeeWithNewSalary.id, `Hello, ${employeeWithNewSalary.name}! Congratulations, your new salary is ${employeeWithNewSalary.salary}!`);
})
.catch(e => {
return api.notifyAdmin(e);
});
}IBrowser? browser;
IPage? page;
async Task InitializeBrowserAsync()
{
var playwright = await Playwright.CreateAsync();
browser = await playwright.Chromium.LaunchAsync(new BrowserTypeLaunchOptions { Headless = false });
page = await browser.NewPageAsync();
}
async Task CreateRegistryAsync()
{
if (page == null) throw new InvalidOperationException("Page is not initialized");
await page.GetByRole(AriaRole.Button, new() { Name = "Создать реестр" }).ClickAsync();
}
...
Нельзя использовать асинхронные компоненты для клиентской стороны - они работают исключительно как Server Components. Об этом написано в документации.
Если компонент должен быть серверным и асинхронным, не указывайте 'use client' в начале файла, и просто оставляйте его как серверный:
Если компонент требует клиентской интерактивности, нужно загружать данные на серверной стороне, а на клиенте использовать хуки для обработки состояния: