<div class='box'>
<div class='container'>
<div class='wrap-point'>
<div class='point'></div>
</div>
<div class='value'>125 000</div>
</div>
</div>.box {
padding: 20px 0px;
width: 300px;
display:flex;
justify-content: center;
border: 1px solid black;
}
.container {
display:flex;
align-items: center;
gap:10px;
min-width: 100%;
}
.wrap-point{
width: 50%;
}
.point {
margin-left: auto;
width:30px;
height: 30px;
background: red;
}
.value {
width: 50%;
font-family: fantasy;
font-size: 20px;
}const Router = createBrowserRouter(
createRoutesFromElements(
<Fragment>
<Route path="/" element={<Layout />} >
<Route index element={<HomePage />} />
</Route>
<Route path='*' element={<NotFoundPage />} />
</Fragment>
)
);
const App = () => {
return <RouterProvider router={Router} />;
};import { Outlet } from "react-router-dom";
const Layout = () => {
return (
<div className="layout">
<Header />
<Outlet />
</div>
)
};
export default Layout;функции пагинации сервер не предоставляеэто твой сервер или какой-то левый ? если твой то переделывай, если левый, то разверни свой сервер + redis и кэшируй данные, а с клиента вытягивай эти данные уже с пагинацией со своего сервера из своего кэша в redis, а данные в redis обновляй каждый час например, выйдет вообще идеально, и суть будет примерно такая , ты с клиента отправляешь запрос на свой сервер с параметрами для пагинации -> твой сервер смотрит данные в redis и проверяет нужно ли их обновить или если нет данных - отправляешь запрос на 5к записей на чужой сервер и сохраняешь в redis, кентавр как раз таки и мыслит в том же направлении
const recursy = (device, isDisabled) => {
if(device.children){
device.children.map(d => recursy(d, isDisabled))
}
device.disabled = isDisabled;
return device;
}
console.log(this.form.os.map(device => recursy(device, !this.form.device_types.includes(device.device_type_id)))){
"device_type_id": 2,
"children": [
{
"name": "Android",
"id": 1,
"children": [
{
"name": "Android 14",
"id": 17,
"key": "2_17",
"disabled": false
},
{
"name": "Other",
"id": 18,
"key": "2_18",
"disabled": false
}
],
"key": "0.6381681047050869-0",
"disabled": false
},
{
"name": "Other",
"id": 6,
"key": "2_6",
"disabled": false
}
],
"key": 2,
"disabled": false
}{
"device_type_id": 2,
"children": [
{
"name": "Android",
"id": 1,
"children": [
{
"name": "Android 14",
"id": 17,
"key": "2_17"
},
{
"name": "Other",
"id": 18,
"key": "2_18"
}
],
"key": "0.6381681047050869-0"
},
{
"name": "Other",
"id": 6,
"key": "2_6"
}
],
"key": 2
}