frontend (navbar+sidebar)
This commit is contained in:
User
@@ -1,13 +1,12 @@
|
|||||||
<!doctype html>
|
<!-- public/index.html -->
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<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>Marketplace</title>
|
||||||
<title>Vite + React</title>
|
</head>
|
||||||
</head>
|
<body>
|
||||||
<body>
|
<div id="root"></div>
|
||||||
<div id="root"></div>
|
<script src="src/main.jsx" type="module"></script>
|
||||||
<script type="module" src="/src/main.jsx"></script>
|
</body>
|
||||||
</body>
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
116
frontend/NodeJS/package-lock.json
generated
116
frontend/NodeJS/package-lock.json
generated
@@ -9,8 +9,10 @@
|
|||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@clerk/clerk-react": "^5.21.0",
|
"@clerk/clerk-react": "^5.21.0",
|
||||||
|
"@coreui/react": "^5.4.1",
|
||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
"react-dom": "^18.3.1"
|
"react-dom": "^18.3.1",
|
||||||
|
"react-router-dom": "^7.1.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@eslint/js": "^9.17.0",
|
"@eslint/js": "^9.17.0",
|
||||||
@@ -396,6 +398,36 @@
|
|||||||
"integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==",
|
"integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/@coreui/coreui": {
|
||||||
|
"version": "5.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@coreui/coreui/-/coreui-5.2.0.tgz",
|
||||||
|
"integrity": "sha512-DZLWzPIZP3KTNgcaRXny/7lcQm0rDMrheu3VsWpgbln5rUuJwxdopwhTSnOryVyCwjlDbs3Z8ZfIzOeBXNC4GA==",
|
||||||
|
"funding": [
|
||||||
|
{
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/coreui"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"license": "MIT",
|
||||||
|
"peerDependencies": {
|
||||||
|
"@popperjs/core": "^2.11.8"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@coreui/react": {
|
||||||
|
"version": "5.4.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@coreui/react/-/react-5.4.1.tgz",
|
||||||
|
"integrity": "sha512-ycO1XEGWqxa1Yx+1FK9wieEKVxSP8tS9QwgmtyEifZ6ArA6AvG8C1rPBuVb3FNE1SXwSEc50+zmy62QfRLtG0Q==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@coreui/coreui": "^5.2.0",
|
||||||
|
"@popperjs/core": "^2.11.8",
|
||||||
|
"prop-types": "^15.8.1"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": ">=17",
|
||||||
|
"react-dom": ">=17"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@esbuild/aix-ppc64": {
|
"node_modules/@esbuild/aix-ppc64": {
|
||||||
"version": "0.24.2",
|
"version": "0.24.2",
|
||||||
"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.24.2.tgz",
|
"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.24.2.tgz",
|
||||||
@@ -1062,6 +1094,16 @@
|
|||||||
"@jridgewell/sourcemap-codec": "^1.4.14"
|
"@jridgewell/sourcemap-codec": "^1.4.14"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@popperjs/core": {
|
||||||
|
"version": "2.11.8",
|
||||||
|
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
|
||||||
|
"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
|
||||||
|
"license": "MIT",
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/popperjs"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@rollup/rollup-android-arm-eabi": {
|
"node_modules/@rollup/rollup-android-arm-eabi": {
|
||||||
"version": "4.29.1",
|
"version": "4.29.1",
|
||||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.29.1.tgz",
|
"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.29.1.tgz",
|
||||||
@@ -1373,6 +1415,12 @@
|
|||||||
"@babel/types": "^7.20.7"
|
"@babel/types": "^7.20.7"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@types/cookie": {
|
||||||
|
"version": "0.6.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
|
||||||
|
"integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/@types/estree": {
|
"node_modules/@types/estree": {
|
||||||
"version": "1.0.6",
|
"version": "1.0.6",
|
||||||
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
|
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
|
||||||
@@ -1824,6 +1872,15 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/cookie": {
|
||||||
|
"version": "1.0.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
|
||||||
|
"integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
|
||||||
|
"license": "MIT",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=18"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/cross-spawn": {
|
"node_modules/cross-spawn": {
|
||||||
"version": "7.0.6",
|
"version": "7.0.6",
|
||||||
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
|
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
|
||||||
@@ -3484,7 +3541,6 @@
|
|||||||
"version": "4.1.1",
|
"version": "4.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
|
||||||
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
|
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
|
||||||
"dev": true,
|
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=0.10.0"
|
"node": ">=0.10.0"
|
||||||
}
|
}
|
||||||
@@ -3747,7 +3803,6 @@
|
|||||||
"version": "15.8.1",
|
"version": "15.8.1",
|
||||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||||
"dev": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"loose-envify": "^1.4.0",
|
"loose-envify": "^1.4.0",
|
||||||
"object-assign": "^4.1.1",
|
"object-assign": "^4.1.1",
|
||||||
@@ -3801,8 +3856,7 @@
|
|||||||
"node_modules/react-is": {
|
"node_modules/react-is": {
|
||||||
"version": "16.13.1",
|
"version": "16.13.1",
|
||||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
|
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
|
||||||
"dev": true
|
|
||||||
},
|
},
|
||||||
"node_modules/react-refresh": {
|
"node_modules/react-refresh": {
|
||||||
"version": "0.14.2",
|
"version": "0.14.2",
|
||||||
@@ -3814,6 +3868,46 @@
|
|||||||
"node": ">=0.10.0"
|
"node": ">=0.10.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/react-router": {
|
||||||
|
"version": "7.1.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.1.1.tgz",
|
||||||
|
"integrity": "sha512-39sXJkftkKWRZ2oJtHhCxmoCrBCULr/HAH4IT5DHlgu/Q0FCPV0S4Lx+abjDTx/74xoZzNYDYbOZWlJjruyuDQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@types/cookie": "^0.6.0",
|
||||||
|
"cookie": "^1.0.1",
|
||||||
|
"set-cookie-parser": "^2.6.0",
|
||||||
|
"turbo-stream": "2.4.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=20.0.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": ">=18",
|
||||||
|
"react-dom": ">=18"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"react-dom": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/react-router-dom": {
|
||||||
|
"version": "7.1.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.1.1.tgz",
|
||||||
|
"integrity": "sha512-vSrQHWlJ5DCfyrhgo0k6zViOe9ToK8uT5XGSmnuC2R3/g261IdIMpZVqfjD6vWSXdnf5Czs4VA/V60oVR6/jnA==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"react-router": "7.1.1"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=20.0.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": ">=18",
|
||||||
|
"react-dom": ">=18"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/reflect.getprototypeof": {
|
"node_modules/reflect.getprototypeof": {
|
||||||
"version": "1.0.10",
|
"version": "1.0.10",
|
||||||
"resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
|
"resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
|
||||||
@@ -3988,6 +4082,12 @@
|
|||||||
"semver": "bin/semver.js"
|
"semver": "bin/semver.js"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/set-cookie-parser": {
|
||||||
|
"version": "2.7.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
|
||||||
|
"integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/set-function-length": {
|
"node_modules/set-function-length": {
|
||||||
"version": "1.2.2",
|
"version": "1.2.2",
|
||||||
"resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
|
"resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
|
||||||
@@ -4315,6 +4415,12 @@
|
|||||||
"integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==",
|
"integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==",
|
||||||
"license": "0BSD"
|
"license": "0BSD"
|
||||||
},
|
},
|
||||||
|
"node_modules/turbo-stream": {
|
||||||
|
"version": "2.4.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz",
|
||||||
|
"integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==",
|
||||||
|
"license": "ISC"
|
||||||
|
},
|
||||||
"node_modules/type-check": {
|
"node_modules/type-check": {
|
||||||
"version": "0.4.0",
|
"version": "0.4.0",
|
||||||
"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
|
"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
|
||||||
|
|||||||
@@ -11,8 +11,10 @@
|
|||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@clerk/clerk-react": "^5.21.0",
|
"@clerk/clerk-react": "^5.21.0",
|
||||||
|
"@coreui/react": "^5.4.1",
|
||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
"react-dom": "^18.3.1"
|
"react-dom": "^18.3.1",
|
||||||
|
"react-router-dom": "^7.1.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@eslint/js": "^9.17.0",
|
"@eslint/js": "^9.17.0",
|
||||||
|
|||||||
@@ -1,28 +1,19 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Route, Routes } from 'react-router-dom';
|
import Navbar from './components/Navbar';
|
||||||
|
import Sidebar from './components/Sidebar';
|
||||||
import { Sidebar, Navbar } from './components';
|
import Home from './Home';
|
||||||
import { CampaignDetails, CreateCampaign, Home, Profile } from './pages';
|
import './App.css';
|
||||||
|
|
||||||
const App = () => {
|
const App = () => {
|
||||||
return (
|
return (
|
||||||
<div className="relative sm:-8 p-4 bg-[#13131a] min-h-screen flex flex-row">
|
<div className="app">
|
||||||
<div className="sm:flex hidden mr-10 relative">
|
<Navbar />
|
||||||
|
<div className="main-content">
|
||||||
<Sidebar />
|
<Sidebar />
|
||||||
</div>
|
<Home />
|
||||||
|
|
||||||
<div className="flex-1 max-sm:w-full max-w-[1280px] mx-auto sm:pr-5">
|
|
||||||
<Navbar />
|
|
||||||
|
|
||||||
<Routes>
|
|
||||||
<Route path="/" element={<Home />} />
|
|
||||||
<Route path="/profile" element={<Profile />} />
|
|
||||||
<Route path="/create-campaign" element={<CreateCampaign />} />
|
|
||||||
<Route path="/campaign-details/:id" element={<CampaignDetails />} />
|
|
||||||
</Routes>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
export default App
|
export default App;
|
||||||
|
|||||||
@@ -1,26 +1,27 @@
|
|||||||
/* Стили для Header */
|
/* Стили для Header */
|
||||||
.header {
|
.header {
|
||||||
background-color: #1e90ff; /* Голубой цвет фона */
|
background-color: #da1eff; /* Голубой цвет фона */
|
||||||
color: #ffffff; /* Белый цвет текста */
|
color: #ffffff; /* Белый цвет текста */
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 20px 40px;
|
padding: 20px 100px;
|
||||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
font-size: 36px;
|
font-size: 36px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-name {
|
.project-name {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-family: 'Arial', sans-serif;
|
font-family: 'Calibri', sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav {
|
.nav {
|
||||||
font-family: 'Arial', sans-serif;
|
font-family: 'Calibri', sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-links {
|
.nav-links {
|
||||||
|
|||||||
@@ -7,14 +7,7 @@ const Header = () => {
|
|||||||
<div className="logo">
|
<div className="logo">
|
||||||
<h4 className="project-name">Eternos</h4>
|
<h4 className="project-name">Eternos</h4>
|
||||||
</div>
|
</div>
|
||||||
<nav className="nav">
|
|
||||||
<ul className="nav-links">
|
|
||||||
<li><a href="#home">Главная</a></li>
|
|
||||||
<li><a href="#products">Товары</a></li>
|
|
||||||
<li><a href="#about">О нас</a></li>
|
|
||||||
<li><a href="#contact">Контакты</a></li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</header>
|
</header>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
16
frontend/NodeJS/src/Home.css
Normal file
16
frontend/NodeJS/src/Home.css
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
.home {
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-title {
|
||||||
|
font-size: 2rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
23
frontend/NodeJS/src/Home.jsx
Normal file
23
frontend/NodeJS/src/Home.jsx
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
import React from "react";
|
||||||
|
import ProductCard from "./components/ProductCard";
|
||||||
|
|
||||||
|
const Home = () => {
|
||||||
|
const products = [
|
||||||
|
{ id: 1, name: "Product 1", price: 50, image: "https://via.placeholder.com/150" },
|
||||||
|
{ id: 2, name: "Product 2", price: 75, image: "https://via.placeholder.com/150" },
|
||||||
|
{ id: 3, name: "Product 3", price: 100, image: "https://via.placeholder.com/150" },
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="home">
|
||||||
|
<h1 className="home-title">Welcome to Eternos</h1>
|
||||||
|
<div className="product-grid">
|
||||||
|
{products.map((product) => (
|
||||||
|
<ProductCard key={product.id} product={product} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Home;
|
||||||
@@ -1,64 +0,0 @@
|
|||||||
/* Основные стили страницы */
|
|
||||||
.product-page {
|
|
||||||
background-color: #f0f8ff; /* Светлый голубой фон */
|
|
||||||
font-family: Arial, sans-serif;
|
|
||||||
padding: 20px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-title {
|
|
||||||
color: #1e90ff; /* Синий цвет для заголовка */
|
|
||||||
font-size: 36px;
|
|
||||||
margin-bottom: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Контейнер для карточек товаров */
|
|
||||||
.products {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-around;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Стили для каждой карточки товара */
|
|
||||||
.product-card {
|
|
||||||
background-color: #ffffff; /* Белый фон карточки */
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
||||||
padding: 20px;
|
|
||||||
width: 250px;
|
|
||||||
transition: transform 0.3s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-card:hover {
|
|
||||||
transform: scale(1.05); /* Эффект увеличения при наведении */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Стили для изображения товара */
|
|
||||||
.product-image {
|
|
||||||
width: 100%;
|
|
||||||
height: 200px;
|
|
||||||
object-fit: cover;
|
|
||||||
border-radius: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Стили для текста */
|
|
||||||
.product-name {
|
|
||||||
font-size: 24px;
|
|
||||||
color: #1e90ff;
|
|
||||||
margin-top: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-description {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #555555;
|
|
||||||
margin: 10px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-price {
|
|
||||||
font-size: 18px;
|
|
||||||
color: #1e90ff;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
@@ -1,52 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import Header from "./Header"; // Подключаем Header
|
|
||||||
import "./ProductPage.css";
|
|
||||||
|
|
||||||
const ProductPage = () => {
|
|
||||||
const products = [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
name: "Товар 1",
|
|
||||||
description: "Описание товара 1",
|
|
||||||
price: "1000 ₽",
|
|
||||||
imageUrl: "https://via.placeholder.com/200", // Замените на реальный URL изображения
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
name: "Товар 2",
|
|
||||||
description: "Описание товара 2",
|
|
||||||
price: "1500 ₽",
|
|
||||||
imageUrl: "https://via.placeholder.com/200", // Замените на реальный URL изображения
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
name: "Товар 3",
|
|
||||||
description: "Описание товара 3",
|
|
||||||
price: "2000 ₽",
|
|
||||||
imageUrl: "https://via.placeholder.com/200", // Замените на реальный URL изображения
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="product-page">
|
|
||||||
<Header /> {/* Используем Header */}
|
|
||||||
<h1 className="page-title">Наши товары</h1>
|
|
||||||
<div className="products">
|
|
||||||
{products.map((product) => (
|
|
||||||
<div key={product.id} className="product-card">
|
|
||||||
<img
|
|
||||||
src={product.imageUrl}
|
|
||||||
alt={product.name}
|
|
||||||
className="product-image"
|
|
||||||
/>
|
|
||||||
<h2 className="product-name">{product.name}</h2>
|
|
||||||
<p className="product-description">{product.description}</p>
|
|
||||||
<p className="product-price">{product.price}</p>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ProductPage;
|
|
||||||
141
frontend/NodeJS/src/components/Navbar.css
Normal file
141
frontend/NodeJS/src/components/Navbar.css
Normal file
@@ -0,0 +1,141 @@
|
|||||||
|
.navbar {
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
background-color: #f8f8f8;
|
||||||
|
border-bottom: 1px solid #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-main {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 10px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo img {
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.catalog-button {
|
||||||
|
background-color: #0073e6;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: 5px 10px;
|
||||||
|
margin-left: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-bar {
|
||||||
|
display: flex;
|
||||||
|
flex-grow: 1;
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-bar select,
|
||||||
|
.search-bar input {
|
||||||
|
border-radius: 5px; padding: 5px;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-bar input {
|
||||||
|
border-radius: 5px;
|
||||||
|
flex-grow: 1;
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-button {
|
||||||
|
border-radius: 5px;
|
||||||
|
background-color: #0073e6;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: 5px 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.personal-doc-button {
|
||||||
|
background-color: #0073e6;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: 5px 15px;
|
||||||
|
margin-left: 20px;
|
||||||
|
border-radius: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-bottom {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
padding: 10px;
|
||||||
|
font-size: 14px;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-bottom a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #0073e6;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* Адаптация для мобильных устройств */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.navbar-main {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.catalog-button {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
margin: 0;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-bar {
|
||||||
|
width: 100%;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-bar select,
|
||||||
|
.search-bar input,
|
||||||
|
.search-button {
|
||||||
|
width: 100%;
|
||||||
|
margin: 5px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.personal-doc-button {
|
||||||
|
width: 100%;
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-bottom {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-bottom a {
|
||||||
|
margin: 5px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Адаптация для очень маленьких экранов (например, телефоны) */
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.navbar-main {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-bar select {
|
||||||
|
display: none; /* Убираем селектор "Везде" для упрощения */
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-bottom a {
|
||||||
|
flex: 1 1 100%; /* Каждая ссылка занимает всю ширину */
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@@ -1,97 +1,57 @@
|
|||||||
import React, { useState } from 'react'
|
import React, { useState } from "react";
|
||||||
import { Link, useNavigate } from 'react-router-dom';
|
import "./Navbar.css";
|
||||||
|
import Sidebar from "./Sidebar";
|
||||||
import { useStateContext } from '../context';
|
|
||||||
import { CustomButton } from './';
|
|
||||||
import { logo, menu, search, thirdweb } from '../assets';
|
|
||||||
import { navlinks } from '../constants';
|
|
||||||
|
|
||||||
const Navbar = () => {
|
const Navbar = () => {
|
||||||
const navigate = useNavigate();
|
const [isSidebarVisible, setIsSidebarVisible] = useState(false);
|
||||||
const [isActive, setIsActive] = useState('dashboard');
|
const [searchQuery, setSearchQuery] = useState("");
|
||||||
const [toggleDrawer, setToggleDrawer] = useState(false);
|
|
||||||
const { connect, address } = useStateContext();
|
const toggleSidebar = () => {
|
||||||
|
// Открывать Sidebar только если пользователь ввел текст
|
||||||
|
if (searchQuery.trim() !== "") {
|
||||||
|
setIsSidebarVisible(!isSidebarVisible);
|
||||||
|
} else {
|
||||||
|
alert("Пожалуйста, введите текст для поиска.");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSearchChange = (e) => {
|
||||||
|
setSearchQuery(e.target.value);
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex md:flex-row flex-col-reverse justify-between mb-[35px] gap-6">
|
<div>
|
||||||
<div className="lg:flex-1 flex flex-row max-w-[458px] py-2 pl-4 pr-2 h-[52px] bg-[#1c1c24] rounded-[100px]">
|
<nav className="navbar">
|
||||||
<input type="text" placeholder="Search for campaigns" className="flex w-full font-epilogue font-normal text-[14px] placeholder:text-[#4b5264] text-white bg-transparent outline-none" />
|
<div className="navbar-main">
|
||||||
|
<div className="logo">
|
||||||
<div className="w-[72px] h-full rounded-[20px] bg-[#4acd8d] flex justify-center items-center cursor-pointer">
|
<img src="" alt="Eternos" />
|
||||||
<img src={search} alt="search" className="w-[15px] h-[15px] object-contain"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="sm:flex hidden flex-row justify-end gap-4">
|
|
||||||
<CustomButton
|
|
||||||
btnType="button"
|
|
||||||
title={address ? 'Create a campaign' : 'Connect'}
|
|
||||||
styles={address ? 'bg-[#1dc071]' : 'bg-[#8c6dfd]'}
|
|
||||||
handleClick={() => {
|
|
||||||
if(address) navigate('create-campaign')
|
|
||||||
else connect()
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Link to="/profile">
|
|
||||||
<div className="w-[52px] h-[52px] rounded-full bg-[#2c2f32] flex justify-center items-center cursor-pointer">
|
|
||||||
<img src={thirdweb} alt="user" className="w-[60%] h-[60%] object-contain" />
|
|
||||||
</div>
|
</div>
|
||||||
</Link>
|
<button className="catalog-button" onClick={toggleSidebar}>
|
||||||
</div>
|
Каталог
|
||||||
|
</button>
|
||||||
{/* Small screen navigation */}
|
<div className="search-bar">
|
||||||
<div className="sm:hidden flex justify-between items-center relative">
|
<select>
|
||||||
<div className="w-[40px] h-[40px] rounded-[10px] bg-[#2c2f32] flex justify-center items-center cursor-pointer">
|
<option value="all">Везде</option>
|
||||||
<img src={logo} alt="user" className="w-[60%] h-[60%] object-contain" />
|
</select>
|
||||||
</div>
|
<input
|
||||||
|
type="text"
|
||||||
<img
|
placeholder="Искать на Eternos"
|
||||||
src={menu}
|
value={searchQuery}
|
||||||
alt="menu"
|
onChange={handleSearchChange}
|
||||||
className="w-[34px] h-[34px] object-contain cursor-pointer"
|
|
||||||
onClick={() => setToggleDrawer((prev) => !prev)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className={`absolute top-[60px] right-0 left-0 bg-[#1c1c24] z-10 shadow-secondary py-4 ${!toggleDrawer ? '-translate-y-[100vh]' : 'translate-y-0'} transition-all duration-700`}>
|
|
||||||
<ul className="mb-4">
|
|
||||||
{navlinks.map((link) => (
|
|
||||||
<li
|
|
||||||
key={link.name}
|
|
||||||
className={`flex p-4 ${isActive === link.name && 'bg-[#3a3a43]'}`}
|
|
||||||
onClick={() => {
|
|
||||||
setIsActive(link.name);
|
|
||||||
setToggleDrawer(false);
|
|
||||||
navigate(link.link);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src={link.imgUrl}
|
|
||||||
alt={link.name}
|
|
||||||
className={`w-[24px] h-[24px] object-contain ${isActive === link.name ? 'grayscale-0' : 'grayscale'}`}
|
|
||||||
/>
|
|
||||||
<p className={`ml-[20px] font-epilogue font-semibold text-[14px] ${isActive === link.name ? 'text-[#1dc071]' : 'text-[#808191]'}`}>
|
|
||||||
{link.name}
|
|
||||||
</p>
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<div className="flex mx-4">
|
|
||||||
<CustomButton
|
|
||||||
btnType="button"
|
|
||||||
title={address ? 'Create a campaign' : 'Connect'}
|
|
||||||
styles={address ? 'bg-[#1dc071]' : 'bg-[#8c6dfd]'}
|
|
||||||
handleClick={() => {
|
|
||||||
if(address) navigate('create-campaign')
|
|
||||||
else connect();
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
<button className="search-button">🔍</button>
|
||||||
</div>
|
</div>
|
||||||
|
<button className="personal-doc-button">Личный кабинет</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</nav>
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Navbar
|
{isSidebarVisible && (
|
||||||
|
<div className="sidebar-overlay">
|
||||||
|
<Sidebar />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Navbar;
|
||||||
|
|||||||
33
frontend/NodeJS/src/components/ProductCard.css
Normal file
33
frontend/NodeJS/src/components/ProductCard.css
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
.product-card {
|
||||||
|
border: 1px solid #d1d5db;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 1rem;
|
||||||
|
text-align: center;
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-image {
|
||||||
|
width: 100%;
|
||||||
|
height: 200px;
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-title {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
margin: 1rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-price {
|
||||||
|
font-size: 1rem;
|
||||||
|
color: #4ade80;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-to-cart-btn {
|
||||||
|
background-color: #1e3a8a;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
border-radius: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
15
frontend/NodeJS/src/components/ProductCard.jsx
Normal file
15
frontend/NodeJS/src/components/ProductCard.jsx
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
import React from "react";
|
||||||
|
import "./ProductCard.css";
|
||||||
|
|
||||||
|
const ProductCard = ({ product }) => {
|
||||||
|
return (
|
||||||
|
<div className="product-card">
|
||||||
|
<img src={product.image} alt={product.name} className="product-image" />
|
||||||
|
<h3 className="product-title">{product.name}</h3>
|
||||||
|
<p className="product-price">${product.price}</p>
|
||||||
|
<button className="add-to-cart-btn">Add to Cart</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ProductCard;
|
||||||
82
frontend/NodeJS/src/components/Sidebar.css
Normal file
82
frontend/NodeJS/src/components/Sidebar.css
Normal file
@@ -0,0 +1,82 @@
|
|||||||
|
.sidebar {
|
||||||
|
width: 300px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding: 20px;
|
||||||
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||||
|
border-radius: 0;
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar h2 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-section {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-section h3 {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-inputs input {
|
||||||
|
width: 45%;
|
||||||
|
padding: 5px;
|
||||||
|
margin-right: 10px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-categories label,
|
||||||
|
.filter-section label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
label.switch {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
width: 40px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
label.switch input {
|
||||||
|
opacity: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
label.switch .slider {
|
||||||
|
position: absolute;
|
||||||
|
cursor: pointer;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: #ccc;
|
||||||
|
border-radius: 34px;
|
||||||
|
transition: 0.4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
label.switch .slider:before {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
height: 14px;
|
||||||
|
width: 14px;
|
||||||
|
left: 3px;
|
||||||
|
bottom: 3px;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 50%;
|
||||||
|
transition: 0.4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
label.switch input:checked + .slider {
|
||||||
|
background-color: #0073e6;
|
||||||
|
}
|
||||||
|
|
||||||
|
label.switch input:checked + .slider:before {
|
||||||
|
transform: translateX(20px);
|
||||||
|
}
|
||||||
@@ -1,50 +1,100 @@
|
|||||||
import React, { useState } from 'react';
|
import React, { useState } from "react";
|
||||||
import { Link, useNavigate } from 'react-router-dom';
|
import "./Sidebar.css";
|
||||||
|
|
||||||
import { logo, sun } from '../assets';
|
|
||||||
import { navlinks } from '../constants';
|
|
||||||
|
|
||||||
const Icon = ({ styles, name, imgUrl, isActive, disabled, handleClick }) => (
|
|
||||||
<div className={`w-[48px] h-[48px] rounded-[10px] ${isActive && isActive === name && 'bg-[#2c2f32]'} flex justify-center items-center ${!disabled && 'cursor-pointer'} ${styles}`} onClick={handleClick}>
|
|
||||||
{!isActive ? (
|
|
||||||
<img src={imgUrl} alt="fund_logo" className="w-1/2 h-1/2" />
|
|
||||||
) : (
|
|
||||||
<img src={imgUrl} alt="fund_logo" className={`w-1/2 h-1/2 ${isActive !== name && 'grayscale'}`} />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
|
|
||||||
const Sidebar = () => {
|
const Sidebar = () => {
|
||||||
const navigate = useNavigate();
|
const [priceRange, setPriceRange] = useState({ min: 0, max: 25000 });
|
||||||
const [isActive, setIsActive] = useState('dashboard');
|
const [selectedPriceCategory, setSelectedPriceCategory] = useState("any");
|
||||||
|
const [isOriginal, setIsOriginal] = useState(false);
|
||||||
|
const [teaSort, setTeaSort] = useState("");
|
||||||
|
|
||||||
|
const handlePriceRangeChange = (e) => {
|
||||||
|
const { name, value } = e.target;
|
||||||
|
setPriceRange((prev) => ({
|
||||||
|
...prev,
|
||||||
|
[name]: value,
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex justify-between items-center flex-col sticky top-5 h-[93vh]">
|
<div className="sidebar">
|
||||||
<Link to="/">
|
<h2>Фильтры</h2>
|
||||||
<Icon styles="w-[52px] h-[52px] bg-[#2c2f32]" imgUrl={logo} />
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
<div className="flex-1 flex flex-col justify-between items-center bg-[#1c1c24] rounded-[20px] w-[76px] py-4 mt-12">
|
<div className="filter-section">
|
||||||
<div className="flex flex-col justify-center items-center gap-3">
|
<h3>Рассрочка 0-0-6</h3>
|
||||||
{navlinks.map((link) => (
|
<label className="switch">
|
||||||
<Icon
|
<input
|
||||||
key={link.name}
|
type="checkbox"
|
||||||
{...link}
|
checked={isOriginal}
|
||||||
isActive={isActive}
|
onChange={() => setIsOriginal(!isOriginal)}
|
||||||
handleClick={() => {
|
/>
|
||||||
if(!link.disabled) {
|
<span className="slider"></span>
|
||||||
setIsActive(link.name);
|
</label>
|
||||||
navigate(link.link);
|
</div>
|
||||||
}
|
|
||||||
}}
|
<div className="filter-section">
|
||||||
/>
|
<h3>Цена</h3>
|
||||||
))}
|
<div className="price-inputs">
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
name="min"
|
||||||
|
value={priceRange.min}
|
||||||
|
onChange={handlePriceRangeChange}
|
||||||
|
placeholder="Минимум"
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
name="max"
|
||||||
|
value={priceRange.max}
|
||||||
|
onChange={handlePriceRangeChange}
|
||||||
|
placeholder="Максимум"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="price-categories">
|
||||||
|
{["до 500 ₽", "500–1 000 ₽", "1 000–2 000 ₽", "2 000 ₽ и дороже", "Неважно"].map(
|
||||||
|
(category, index) => (
|
||||||
|
<label key={index}>
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
name="price-category"
|
||||||
|
value={category}
|
||||||
|
checked={selectedPriceCategory === category}
|
||||||
|
onChange={() => setSelectedPriceCategory(category)}
|
||||||
|
/>
|
||||||
|
{category}
|
||||||
|
</label>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<Icon styles="bg-[#1c1c24] shadow-secondary" imgUrl={sun} />
|
<div className="filter-section">
|
||||||
|
<h3>Оригинальный товар</h3>
|
||||||
|
<label className="switch">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={isOriginal}
|
||||||
|
onChange={() => setIsOriginal(!isOriginal)}
|
||||||
|
/>
|
||||||
|
<span className="slider"></span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="filter-section">
|
||||||
|
<h3>Сорт чая</h3>
|
||||||
|
{["Матча", "Сенча", "Улун", "Черный чай"].map((sort) => (
|
||||||
|
<label key={sort}>
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
value={sort}
|
||||||
|
checked={teaSort === sort}
|
||||||
|
onChange={() => setTeaSort(sort)}
|
||||||
|
/>
|
||||||
|
{sort}
|
||||||
|
</label>
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
export default Sidebar
|
export default Sidebar;
|
||||||
|
|||||||
@@ -1,101 +0,0 @@
|
|||||||
import React, { useContext, createContext } from 'react';
|
|
||||||
|
|
||||||
import { useAddress, useContract, useMetamask, useContractWrite } from '@thirdweb-dev/react';
|
|
||||||
import { ethers } from 'ethers';
|
|
||||||
import { EditionMetadataWithOwnerOutputSchema } from '@thirdweb-dev/sdk';
|
|
||||||
|
|
||||||
const StateContext = createContext();
|
|
||||||
|
|
||||||
export const StateContextProvider = ({ children }) => {
|
|
||||||
const { contract } = useContract('0xf59A1f8251864e1c5a6bD64020e3569be27e6AA9');
|
|
||||||
const { mutateAsync: createCampaign } = useContractWrite(contract, 'createCampaign');
|
|
||||||
|
|
||||||
const address = useAddress();
|
|
||||||
const connect = useMetamask();
|
|
||||||
|
|
||||||
const publishCampaign = async (form) => {
|
|
||||||
try {
|
|
||||||
const data = await createCampaign({
|
|
||||||
args: [
|
|
||||||
address, // owner
|
|
||||||
form.title, // title
|
|
||||||
form.description, // description
|
|
||||||
form.target,
|
|
||||||
new Date(form.deadline).getTime(), // deadline,
|
|
||||||
form.image,
|
|
||||||
],
|
|
||||||
});
|
|
||||||
|
|
||||||
console.log("contract call success", data)
|
|
||||||
} catch (error) {
|
|
||||||
console.log("contract call failure", error)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const getCampaigns = async () => {
|
|
||||||
const campaigns = await contract.call('getCampaigns');
|
|
||||||
|
|
||||||
const parsedCampaings = campaigns.map((campaign, i) => ({
|
|
||||||
owner: campaign.owner,
|
|
||||||
title: campaign.title,
|
|
||||||
description: campaign.description,
|
|
||||||
target: ethers.utils.formatEther(campaign.target.toString()),
|
|
||||||
deadline: campaign.deadline.toNumber(),
|
|
||||||
amountCollected: ethers.utils.formatEther(campaign.amountCollected.toString()),
|
|
||||||
image: campaign.image,
|
|
||||||
pId: i
|
|
||||||
}));
|
|
||||||
|
|
||||||
return parsedCampaings;
|
|
||||||
}
|
|
||||||
|
|
||||||
const getUserCampaigns = async () => {
|
|
||||||
const allCampaigns = await getCampaigns();
|
|
||||||
|
|
||||||
const filteredCampaigns = allCampaigns.filter((campaign) => campaign.owner === address);
|
|
||||||
|
|
||||||
return filteredCampaigns;
|
|
||||||
}
|
|
||||||
|
|
||||||
const donate = async (pId, amount) => {
|
|
||||||
const data = await contract.call('donateToCampaign', [pId], { value: ethers.utils.parseEther(amount)});
|
|
||||||
|
|
||||||
return data;
|
|
||||||
}
|
|
||||||
|
|
||||||
const getDonations = async (pId) => {
|
|
||||||
const donations = await contract.call('getDonators', [pId]);
|
|
||||||
const numberOfDonations = donations[0].length;
|
|
||||||
|
|
||||||
const parsedDonations = [];
|
|
||||||
|
|
||||||
for(let i = 0; i < numberOfDonations; i++) {
|
|
||||||
parsedDonations.push({
|
|
||||||
donator: donations[0][i],
|
|
||||||
donation: ethers.utils.formatEther(donations[1][i].toString())
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
return parsedDonations;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
|
||||||
<StateContext.Provider
|
|
||||||
value={{
|
|
||||||
address,
|
|
||||||
contract,
|
|
||||||
connect,
|
|
||||||
createCampaign: publishCampaign,
|
|
||||||
getCampaigns,
|
|
||||||
getUserCampaigns,
|
|
||||||
donate,
|
|
||||||
getDonations
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</StateContext.Provider>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export const useStateContext = () => useContext(StateContext);
|
|
||||||
@@ -1,20 +1,11 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import ReactDOM from 'react-dom/client';
|
import ReactDOM from 'react-dom';
|
||||||
import { BrowserRouter as Router } from 'react-router-dom';
|
|
||||||
import { ChainId, ThirdwebProvider } from '@thirdweb-dev/react';
|
|
||||||
|
|
||||||
import { StateContextProvider } from './context';
|
|
||||||
import App from './App';
|
import App from './App';
|
||||||
import './index.css';
|
import './index.css';
|
||||||
|
|
||||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
ReactDOM.render(
|
||||||
|
<React.StrictMode>
|
||||||
root.render(
|
<App />
|
||||||
<ThirdwebProvider desiredChainId={ChainId.Goerli}>
|
</React.StrictMode>,
|
||||||
<Router>
|
document.getElementById('root')
|
||||||
<StateContextProvider>
|
);
|
||||||
<App />
|
|
||||||
</StateContextProvider>
|
|
||||||
</Router>
|
|
||||||
</ThirdwebProvider>
|
|
||||||
)
|
|
||||||
|
|||||||
Reference in New Issue
Block a user