Список сделали по подсказке ИИ

Возникла проблема со стилями
Наш скролинг
2026-05-19 19:24:21 +03:00 · 2026-05-17 13:11:25 +03:00 · 2026-05-17 13:01:30 +03:00 · 2026-05-14 19:04:57 +03:00 · 2025-06-08 10:23:50 +03:00
13 changed files with 1299 additions and 613 deletions
@@ -1,18 +0,0 @@
 MIT License
 Copyright (c) 2026 laktionov-as
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and 
 associated documentation files (the "Software"), to deal in the Software without restriction, including 
 without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 
 copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the 
 following conditions:
 The above copyright notice and this permission notice shall be included in all copies or substantial 
 portions of the Software.
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT 
 LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO 
 EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 
 IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE 
 USE OR OTHER DEALINGS IN THE SOFTWARE.
@@ -2,17 +2,11 @@ import js from '@eslint/js'
 import globals from 'globals'
 import reactHooks from 'eslint-plugin-react-hooks'
 import reactRefresh from 'eslint-plugin-react-refresh'
 import { defineConfig, globalIgnores } from 'eslint/config'
-export default defineConfig([
+export default [
-  globalIgnores(['dist']),
+  { ignores: ['dist'] },
  {
    files: ['**/*.{js,jsx}'],
    extends: [
      js.configs.recommended,
      reactHooks.configs['recommended-latest'],
      reactRefresh.configs.vite,
    ],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
@@ -22,8 +16,18 @@ export default defineConfig([
        sourceType: 'module',
      },
    },
    plugins: {
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh,
    },
    rules: {
      ...js.configs.recommended.rules,
      ...reactHooks.configs.recommended.rules,
      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
      'react-refresh/only-export-components': [
        'warn',
        { allowConstantExport: true },
      ],
    },
  },
-])
+]
@@ -1,13 +1,13 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-  <head>
+	<head>
-    <meta charset="UTF-8" />
+		<meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+		<link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+		<title>Vite + React</title>
-  </head>
+	</head>
-  <body>
+	<body>
-    <div id="root"></div>
+		<div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
+		<script type="module" src="/src/main.jsx"></script>
-  </body>
+	</body>
 </html>
@@ -1,5 +1,5 @@
 {
-  "name": "router-middleware-practice",
+  "name": "store-client",
  "private": true,
  "version": "0.0.0",
  "type": "module",
@@ -11,18 +11,18 @@
  },
  "dependencies": {
    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
+    "react-dom": "^19.1.0"
    "react-router-dom": "^7.7.1"
  },
  "devDependencies": {
-    "@eslint/js": "^9.30.1",
+    "@eslint/js": "^9.25.0",
-    "@types/react": "^19.1.8",
+    "@types/react": "^19.1.2",
-    "@types/react-dom": "^19.1.6",
+    "@types/react-dom": "^19.1.2",
-    "@vitejs/plugin-react": "^4.6.0",
+    "@vitejs/plugin-react": "^4.4.1",
-    "eslint": "^9.30.1",
+    "eslint": "^9.25.0",
    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.20",
+    "eslint-plugin-react-refresh": "^0.4.19",
-    "globals": "^16.3.0",
+    "globals": "^16.0.0",
-    "vite": "^7.0.4"
+    "sass-embedded": "^1.99.0",
    "vite": "^6.3.5"
  }
 }
@@ -0,0 +1,15 @@
 .container {
 /*    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;*/
    height: 500px;
    overflow: auto;
    border: 1px solid black;
 }
 .item {
    font-size: 16pt;
    border: 1px dotted gray;
    /*margin: 5px 10px;
    padding: 10px;*/
    border-radius: 5px;
 }
@@ -1,35 +1,53 @@
-import { useState } from 'react'
+import { useEffect, useRef, useState } from 'react';
-import reactLogo from './assets/react.svg'
+import styles from './App.module.scss';
 import viteLogo from '/vite.svg'
 import './App.css'
-function App() {
+const InfiniteList = () => {
-  const [count, setCount] = useState(0)
+  const [items, setItems] = useState([...Array(20).keys()]); // Initial data
  const loaderRef = useRef(null);
  const loadMore = () => {
    setItems((prev) => [...prev, ...Array(10).keys()].map((_, i) => prev.length + i));
  };
  useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        loadMore(); // Load next batch when the loader is seen
      }
    });
    if (loaderRef.current) observer.observe(loaderRef.current);
    return () => observer.disconnect();
  }, []);
  return (
-    <>
+    <ul>
-      <div>
+      {items.map(item => <li key={item} className={ styles.item }>Item {item}</li>)}
-        <a href="https://vite.dev" target="_blank">
+      <div ref={loaderRef}>Loading more...</div>
-          <img src={viteLogo} className="logo" alt="Vite logo" />
+    </ul>
-        </a>
+  );
-        <a href="https://react.dev" target="_blank">
+};
-          <img src={reactLogo} className="logo react" alt="React logo" />
+
-        </a>
+function App() {
-      </div>
+    const generatedBigDataSet = () => {
-      <h1>Vite + React</h1>
+        return Array.from({ length: 100 }, (_, index) => ({
-      <div className="card">
+            id: index,
-        <button onClick={() => setCount((count) => count + 1)}>
+            name: `Элемент № ${index}`,
-          count is {count}
+            value: Math.floor(Math.random() * 1000)
-        </button>
+        }))
-        <p>
+    }
-          Edit <code>src/App.jsx</code> and save to test HMR
+    const [data] = useState(generatedBigDataSet);
-        </p>
+    
-      </div>
+	return (
-      <p className="read-the-docs">
+		<>
-        Click on the Vite and React logos to learn more
+            <div>
-      </p>
+                <h2>Визуализация большого списка</h2>
-    </>
+                <div className={ styles.container }>
-  )
+                <InfiniteList />
                </div>
            </div>
 		</>
 	)
 }
 export default App
@@ -1,26 +0,0 @@
 import { redirect } from 'react-router-dom'
 // Проверка авторизации
 export function requireAuth() {
 	const isAuthenticated = localStorage.getItem('auth') === 'true'
 	if (!isAuthenticated) {
 		return redirect('/login')
 	}
 	return null
 }
 // Проверка авторизации и роли
 export function requireAdmin() {
 	const isAuthenticated = localStorage.getItem('auth') === 'true'
 	const role = localStorage.getItem('role')
 	if (!isAuthenticated) {
 		return redirect('/login')
 	}
 	if (role !== 'admin') {
 		return redirect('/dashboard') // если авторизован, но не админ — на общую панель
 	}
 	return null
 }
@@ -1,10 +1,10 @@
-import React from 'react'
+import { StrictMode } from 'react'
-import ReactDOM from 'react-dom/client'
+import { createRoot } from 'react-dom/client'
-import { RouterProvider } from 'react-router-dom'
+// удаляем import './index.css'
-import router from './routes'
+import App from './App.jsx'
-ReactDOM.createRoot(document.getElementById('root')).render(
+createRoot(document.getElementById('root')).render(
-	<React.StrictMode>
+	<StrictMode>
-		<RouterProvider router={router} />
+		<App />
-	</React.StrictMode>
+	</StrictMode>
 )
@@ -1,10 +0,0 @@
 import React from 'react'
 export default function Admin() {
 	return (
 		<div>
 			<h1>Админ-панель</h1>
 			<p>Доступ разрешён только администраторам.</p>
 		</div>
 	)
 }
@@ -1,10 +0,0 @@
 import React from 'react'
 export default function Dashboard() {
 	return (
 		<div>
 			<h1>Панель пользователя</h1>
 			<p>Вы вошли как обычный пользователь или администратор.</p>
 		</div>
 	)
 }
@@ -1,28 +0,0 @@
 import React, { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 export default function Login() {
 	const [role, setRole] = useState('user')
 	const navigate = useNavigate()
 	const handleLogin = () => {
 		localStorage.setItem('auth', 'true')
 		localStorage.setItem('role', role)
 		navigate('/dashboard')
 	}
 	return (
 		<div>
 			<h1>Вход</h1>
 			<label>
 				Роль:
 				<select value={role} onChange={e => setRole(e.target.value)}>
 					<option value='user'>Обычный пользователь</option>
 					<option value='admin'>Администратор</option>
 				</select>
 			</label>
 			<br />
 			<button onClick={handleLogin}>Войти</button>
 		</div>
 	)
 }
@@ -1,24 +0,0 @@
 import { createBrowserRouter } from 'react-router-dom'
 import Login from './pages/Login'
 import Dashboard from './pages/Dashboard'
 import Admin from './pages/Admin'
 import { requireAuth, requireAdmin } from './auth'
 const router = createBrowserRouter([
 	{
 		path: '/login',
 		element: <Login />,
 	},
 	{
 		path: '/dashboard',
 		element: <Dashboard />,
 		loader: requireAuth,
 	},
 	{
 		path: '/admin',
 		element: <Admin />,
 		loader: requireAdmin,
 	},
 ])
 export default router
Author	SHA1	Message	Date
laktionov-as	4472759509	Список сделали по подсказке ИИ	2026-05-19 19:24:21 +03:00
laktionov-as	09b3da5f18	Возникла проблема со стилями	2026-05-17 13:11:25 +03:00
laktionov-as	50becd2dca	Наш скролинг	2026-05-17 13:01:30 +03:00
laktionov-as	a31d35508a	Недоделаная практика, надо обязательно доделать	2026-05-14 19:04:57 +03:00
isHardCoded	ec325b51bc	Развернули проект с помощью Vite, подготовили структуру для разработки	2025-06-08 10:23:50 +03:00