From 19a608b934b38d23d0d583d62adcb8ec9fbba825 Mon Sep 17 00:00:00 2001 From: devil_1nc Date: Fri, 20 Sep 2024 09:56:32 +0400 Subject: [PATCH] 2 --- package-lock.json | 42 +++++++++++++++++++ package.json | 8 ++-- public/index.html | 8 ++++ src/App.css | 5 +++ src/App.tsx | 32 +++++++++----- src/components/cardComponents/AdCard.tsx | 2 +- .../AdBlock.tsx | 3 +- .../Footer.tsx | 0 .../Header.tsx | 7 ++-- src/components/layoutComponents/Layout.tsx | 20 +++++++++ .../MenuBlock.tsx | 4 +- src/components/menuComponents/SongsBlock.tsx | 4 +- src/index.css | 4 ++ src/index.tsx | 11 ++--- src/pages/Homepage.tsx | 10 +++++ src/pages/Loginpage.tsx | 37 ++++++++++++++++ src/pages/Profilepage.tsx | 7 ++++ src/pages/Registerpage.tsx | 7 ++++ 18 files changed, 181 insertions(+), 30 deletions(-) rename src/components/{mainComponents => layoutComponents}/AdBlock.tsx (91%) rename src/components/{mainComponents => layoutComponents}/Footer.tsx (100%) rename src/components/{mainComponents => layoutComponents}/Header.tsx (60%) create mode 100644 src/components/layoutComponents/Layout.tsx rename src/components/{mainComponents => layoutComponents}/MenuBlock.tsx (89%) create mode 100644 src/pages/Homepage.tsx create mode 100644 src/pages/Loginpage.tsx create mode 100644 src/pages/Profilepage.tsx create mode 100644 src/pages/Registerpage.tsx diff --git a/package-lock.json b/package-lock.json index 147fbee5..5874c70f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26,6 +26,7 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "react-dotenv": "^0.1.3", + "react-router-dom": "^6.26.2", "react-scripts": "5.0.1", "styled-components": "^6.1.12", "swiper": "^11.1.10", @@ -5397,6 +5398,15 @@ "react-dom": ">=16.9.0" } }, + "node_modules/@remix-run/router": { + "version": "1.19.2", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.2.tgz", + "integrity": "sha512-baiMx18+IMuD1yyvOGaHM9QrVUPGGG0jC+z+IPHnRJWUAUvaKuWKyE8gjDj2rzv3sz9zOGoRSPgeBVHRhZnBlA==", + "license": "MIT", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -24953,6 +24963,38 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.26.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.2.tgz", + "integrity": "sha512-tvN1iuT03kHgOFnLPfLJ8V95eijteveqdOSk+srqfePtQvqCExB8eHOYnlilbOcyJyKnYkr1vJvf7YqotAJu1A==", + "license": "MIT", + "dependencies": { + "@remix-run/router": "1.19.2" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.26.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.26.2.tgz", + "integrity": "sha512-z7YkaEW0Dy35T3/QKPYB1LjMK2R1fxnHO8kWpUMTBdfVzZrWOiY9a7CtN8HqdWtDUWd5FY6Dl8HFsqVwH4uOtQ==", + "license": "MIT", + "dependencies": { + "@remix-run/router": "1.19.2", + "react-router": "6.26.2" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", diff --git a/package.json b/package.json index 4ddf1ba1..a8f01c48 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "react-dotenv": "^0.1.3", + "react-router-dom": "^6.26.2", "react-scripts": "5.0.1", "styled-components": "^6.1.12", "swiper": "^11.1.10", @@ -44,7 +45,6 @@ "plugin:storybook/recommended" ] }, - "browserslist": { "production": [ ">0.2%", @@ -57,11 +57,11 @@ "last 1 safari version" ] }, - "react-dotenv": { - "whitelist": ["API_URL"] + "whitelist": [ + "API_URL" + ] }, - "devDependencies": { "@chromatic-com/storybook": "^1.8.0", "@storybook/addon-essentials": "^8.2.9", diff --git a/public/index.html b/public/index.html index bddae062..3463473d 100644 --- a/public/index.html +++ b/public/index.html @@ -13,6 +13,14 @@ + + + + + React App diff --git a/src/App.css b/src/App.css index f3c57029..607653b7 100644 --- a/src/App.css +++ b/src/App.css @@ -153,4 +153,9 @@ font-size: 24px !important; padding-left: 10px; padding-right: 10px; +} + +.menu-block { + font-weight: 400; + font-size: 42px; } \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index 3650c30c..3ee4a537 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,20 +1,27 @@ import React, { useEffect } from 'react'; +import { Routes, Route} from 'react-router-dom'; + import logo from './logo.svg'; import './App.css'; import { Button } from 'antd'; import {Track} from './components/songComponents/Track'; -import {Header} from './components/mainComponents/Header'; +import {Header} from './components/layoutComponents/Header'; import {Playlist} from './components/cardComponents//Playlist'; -import {Footer} from './components/mainComponents/Footer'; +import {Footer} from './components/layoutComponents/Footer'; import {CurrentTrack} from './components/songComponents/CurrentTrack'; import {SongsBlock} from './components/menuComponents/SongsBlock'; import { ISong, IAlbum, IGenre, IBand, IPlaylist, IAdvertisement } from './models/IModels'; import axios from 'axios'; import { PlaylistsBlock } from './components/menuComponents/PlaylistsBlock'; -import { MenuBlock } from './components/mainComponents/MenuBlock'; +import { MenuBlock } from './components/layoutComponents/MenuBlock'; import { getAds, getGenres, getPlaylists, getSongs } from './API/api'; -import { AdBlock } from './components/mainComponents/AdBlock'; +import { AdBlock } from './components/layoutComponents/AdBlock'; +import { Homepage } from './pages/Homepage'; +import { Loginpage } from './pages/Loginpage'; +import { Registerpage } from './pages/Registerpage'; +import { Profilepage } from './pages/Profilepage'; +import { Layout } from './components/layoutComponents/Layout'; function App() { const [songs, setSongs] = React.useState([]); @@ -54,17 +61,20 @@ function App() {
-
-
- - - -
+ + }> + } /> + } /> + } /> + } /> + -
+
+
+ ); } diff --git a/src/components/cardComponents/AdCard.tsx b/src/components/cardComponents/AdCard.tsx index bf8f9a4d..04c0c03d 100644 --- a/src/components/cardComponents/AdCard.tsx +++ b/src/components/cardComponents/AdCard.tsx @@ -2,7 +2,7 @@ import { IAdvertisement } from "../../models/IModels"; export function AdCard({ad}: {ad: IAdvertisement}) { return ( -
+
{ad.name}
diff --git a/src/components/mainComponents/AdBlock.tsx b/src/components/layoutComponents/AdBlock.tsx similarity index 91% rename from src/components/mainComponents/AdBlock.tsx rename to src/components/layoutComponents/AdBlock.tsx index c7bb3a2b..f3baa4cf 100644 --- a/src/components/mainComponents/AdBlock.tsx +++ b/src/components/layoutComponents/AdBlock.tsx @@ -4,8 +4,7 @@ import { AdCard } from "../cardComponents/AdCard"; export function AdBlock({ads}: {ads: any[]}) { return (
-

Реклама

{ads.map(ad => )}
); -} +} \ No newline at end of file diff --git a/src/components/mainComponents/Footer.tsx b/src/components/layoutComponents/Footer.tsx similarity index 100% rename from src/components/mainComponents/Footer.tsx rename to src/components/layoutComponents/Footer.tsx diff --git a/src/components/mainComponents/Header.tsx b/src/components/layoutComponents/Header.tsx similarity index 60% rename from src/components/mainComponents/Header.tsx rename to src/components/layoutComponents/Header.tsx index eeae08c3..b0bfbd46 100644 --- a/src/components/mainComponents/Header.tsx +++ b/src/components/layoutComponents/Header.tsx @@ -1,14 +1,15 @@ import React from 'react'; import { Button } from 'antd'; import { UserOutlined } from '@ant-design/icons'; +import { Link } from 'react-router-dom'; export function Header() { return (
-

😈 DEVIL music

- +
); } \ No newline at end of file diff --git a/src/components/layoutComponents/Layout.tsx b/src/components/layoutComponents/Layout.tsx new file mode 100644 index 00000000..4f78d97d --- /dev/null +++ b/src/components/layoutComponents/Layout.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import { Button } from 'antd'; +import { UserOutlined } from '@ant-design/icons'; +import { Link, Outlet } from 'react-router-dom'; +import { IPlaylist, ISong, IAlbum, IGenre, IAdvertisement } from '../../models/IModels'; +import { CurrentTrack } from '../songComponents/CurrentTrack'; +import { AdBlock } from './AdBlock'; +import { Footer } from './Footer'; +import { Header } from './Header'; +import { MenuBlock } from './MenuBlock'; + +export function Layout() { + return ( + <>
+
+ +
+