Iro2024-2025/react-recipe
12
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

me commet

Browse Source
This commit is contained in:
Arina
2025-03-29 11:10:04 +03:00
commit a0d6522ed4
14 changed files with 18078 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
node_modules

17736
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

39
package.json Normal file
View File

@@ -0,0 +1,39 @@
{
"name": "my-recipe-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^16.2.0",
"@testing-library/user-event": "^13.5.0",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-router-dom": "^6.22.1",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

20
public/index.html Normal file
View File

@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Кулинарный справочник"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>Кулинарный Справочник</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>

0
src/App.css Normal file
View File

25
src/App.js Normal file
View File

@@ -0,0 +1,25 @@
import React from 'react';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Header from './components/Header';
import HomePage from './components/HomePage';
import LoginPage from './components/LoginPage';
import RegisterPage from './components/RegisterPage';
import './App.css';
function App() {
return (
<BrowserRouter>
<div className="App">
<Header />
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/login" element={<LoginPage />} />
<Route path="/register" element={<RegisterPage />} />
{/* Другие маршруты */}
</Routes>
</div>
</BrowserRouter>
);
}
export default App;

93
src/components/Header.css Normal file
View File

@@ -0,0 +1,93 @@
header {
background-color: #333;
color: white;
padding: 1rem 0;
text-align: center;
}
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
#logo a {
text-decoration: none;
color: white;
font-size: 1.5rem;
font-weight: bold;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
nav li {
margin-left: 1rem;
}
nav a {
color: white;
text-decoration: none;
transition: color 0.3s ease;
}
nav a:hover {
color: #f0f0f0;
}
#search-form {
display: flex;
align-items: center;
}
#search-input {
padding: 0.5rem;
border: none;
border-radius: 4px;
margin-right: 0.5rem;
}
#search-form button {
background-color: #e44d26;
color: white;
border: none;
padding: 0.5rem 1rem;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}
#search-form button:hover {
background-color: #d13d17;
}
#auth a {
margin-left: 1rem;
text-decoration: none;
color: white;
}
/* Мобильная адаптивность (пример) */
@media (max-width: 768px) {
.container {
flex-direction: column;
align-items: flex-start;
}
nav ul {
flex-direction: column;
align-items: flex-start;
}
nav li {
margin-left: 0;
margin-bottom: 0.5rem;
}
}

40
src/components/Header.js Normal file
View File

@@ -0,0 +1,40 @@
import React from 'react';
import { Link } from 'react-router-dom';
import './Header.css';
function Header() {
return (
<header>
<div className="container">
<div id="logo">
<Link to="/">
<img src="" alt="Логотип сайта" width="100" />
</Link>
</div>
<nav>
<ul>
<li><Link to="/">Главная</Link></li>
<li><Link to="/categories">Категории</Link></li>
<li>
<form id="search-form">
<input type="text" id="search-input" placeholder="Поиск рецептов" />
<button type="submit">Найти</button>
</form>
</li>
<li><Link to="/popular">Популярные рецепты</Link></li>
<li><Link to="/contact">Контакты</Link></li>
<li>
<div id="auth">
<Link to="/login">Вход</Link>
<Link to="/register">Регистрация</Link>
</div>
</li>
</ul>
</nav>
</div>
</header>
);
}
export default Header;

69
src/components/HomePage.js Normal file
View File

@@ -0,0 +1,69 @@
import React from 'react';
import { Link } from 'react-router-dom';
import './HomePage.css';
function HomePage() {
return (
<div className="home-page">
<section className="hero">
<div className="hero-content">
<h1>Добро пожаловать в мир вкусных рецептов!</h1>
<p>Найдите идеальный рецепт для любого случая.</p>
<Link to="/categories" className="cta-button">
Посмотреть категории
</Link>
</div>
</section>
<section className="categories">
<h2>Категории рецептов</h2>
<div className="category-grid">
<Link to="/category/salads" className="category-card">
<img src="" alt="Салаты" />
<span>Салаты</span>
</Link>
<Link to="/category/soups" className="category-card">
<img src="" alt="Супы" />
<span>Супы</span>
</Link>
<Link to="/category/main-courses" className="category-card">
<img src="" alt="Основные блюда" />
<span>Основные блюда</span>
</Link>
<Link to="/category/desserts" className="category-card">
<img src="" alt="Десерты" />
<span>Десерты</span>
</Link>
{/*больше категорий*/}
</div>
</section>
<section className="featured-recipes">
<h2>Популярные рецепты</h2>
<div className="recipe-grid">
<div className="recipe-card">
<img src="" alt="Название рецепта 1" />
<h3>Название рецепта 1</h3>
<p>Краткое описание рецепта 1.</p>
<Link to="/recipe/1">Подробнее</Link>
</div>
<div className="recipe-card">
<img src="" alt="Название рецепта 2" />
<h3>Название рецепта 2</h3>
<p>Краткое описание рецепта 2.</p>
<Link to="/recipe/2">Подробнее</Link>
</div>
{/*больше избранных рецептов*/}
</div>
</section>
</div>
);
}
export default HomePage;

21
src/components/LoginPage.js Normal file
View File

@@ -0,0 +1,21 @@
import React from 'react';
import { Link } from 'react-router-dom';
import './LoginPage.css';
function LoginPage() {
return (
<div className="login-page">
<h3>Вход</h3>
<form>
<input type="text" placeholder="Логин или Email" /><br />
<input type="password" placeholder="Пароль" /><br />
<label><input type="checkbox" /> Запомнить меня</label><br />
<Link to="/forgot-password">Забыли пароль?</Link><br />
<button type="submit">Войти</button>
</form>
<p>Нет аккаунта? <Link to="/register">Зарегистрируйтесь</Link></p>
</div>
);
}
export default LoginPage;

23
src/components/RegisterPage.js Normal file
View File

@@ -0,0 +1,23 @@
import React from 'react';
import { Link } from 'react-router-dom';
import './RegisterPage.css';
function RegisterPage() {
return (
<div className="register-page">
<h3>Регистрация</h3>
<form>
<input type="text" placeholder="Имя" /><br />
<input type="email" placeholder="Электронная почта" /><br />
<input type="text" placeholder="Логин" /><br />
<input type="password" placeholder="Пароль" /><br />
<input type="password" placeholder="Подтвердите пароль" /><br />
<label><input type="checkbox" /> Согласен с условиями</label><br />
<button type="submit">Зарегистрироваться</button>
</form>
<p>Уже есть аккаунт? <Link to="/login">Войти</Link></p>
</div>
);
}
export default RegisterPage;

0
src/index.css Normal file
View File

11
src/index.js Normal file
View File

@@ -0,0 +1,11 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);

0
src/logo.svg Normal file
View File