Oluşturuldu
This commit is contained in:
Batuhan
commit
46e8ec8188
23
.gitignore
vendored
Normal file
23
.gitignore
vendored
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||||
|
|
||||||
|
# dependencies
|
||||||
|
/node_modules
|
||||||
|
/.pnp
|
||||||
|
.pnp.js
|
||||||
|
|
||||||
|
# testing
|
||||||
|
/coverage
|
||||||
|
|
||||||
|
# production
|
||||||
|
/build
|
||||||
|
|
||||||
|
# misc
|
||||||
|
.DS_Store
|
||||||
|
.env.local
|
||||||
|
.env.development.local
|
||||||
|
.env.test.local
|
||||||
|
.env.production.local
|
||||||
|
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
154
README.md
Normal file
154
README.md
Normal file
@ -0,0 +1,154 @@
|
|||||||
|
# Getting Started with Create React App
|
||||||
|
|
||||||
|
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
|
||||||
|
|
||||||
|
## Available Scripts
|
||||||
|
|
||||||
|
In the project directory, you can run:
|
||||||
|
|
||||||
|
### `npm start`
|
||||||
|
|
||||||
|
Runs the app in the development mode.\
|
||||||
|
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
|
||||||
|
|
||||||
|
The page will reload when you make changes.\
|
||||||
|
You may also see any lint errors in the console.
|
||||||
|
|
||||||
|
### `npm test`
|
||||||
|
|
||||||
|
Launches the test runner in the interactive watch mode.\
|
||||||
|
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
|
||||||
|
|
||||||
|
### `npm run build`
|
||||||
|
|
||||||
|
Builds the app for production to the `build` folder.\
|
||||||
|
It correctly bundles React in production mode and optimizes the build for the best performance.
|
||||||
|
|
||||||
|
The build is minified and the filenames include the hashes.\
|
||||||
|
Your app is ready to be deployed!
|
||||||
|
|
||||||
|
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
|
||||||
|
|
||||||
|
### `npm run eject`
|
||||||
|
|
||||||
|
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
|
||||||
|
|
||||||
|
If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
|
||||||
|
|
||||||
|
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
|
||||||
|
|
||||||
|
You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
|
||||||
|
|
||||||
|
## Learn More
|
||||||
|
|
||||||
|
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
|
||||||
|
|
||||||
|
To learn React, check out the [React documentation](https://reactjs.org/).
|
||||||
|
|
||||||
|
### Code Splitting
|
||||||
|
|
||||||
|
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
|
||||||
|
|
||||||
|
### Analyzing the Bundle Size
|
||||||
|
|
||||||
|
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
|
||||||
|
|
||||||
|
### Making a Progressive Web App
|
||||||
|
|
||||||
|
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
|
||||||
|
|
||||||
|
### Advanced Configuration
|
||||||
|
|
||||||
|
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
|
||||||
|
|
||||||
|
### Deployment
|
||||||
|
|
||||||
|
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
|
||||||
|
|
||||||
|
### `npm run build` fails to minify
|
||||||
|
|
||||||
|
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
import React, { Component } from 'react'
|
||||||
|
import Header from './components/Header';
|
||||||
|
// import NavRight from './components/NavRight';
|
||||||
|
import NavLeft from './components/NavLeft';
|
||||||
|
import Pages from './components/Pages';
|
||||||
|
import ProfileMenuBox from './components/ProfileMenuBox';
|
||||||
|
import MusikBox from './components/MusikBox';
|
||||||
|
|
||||||
|
export default class App extends Component {
|
||||||
|
state = {
|
||||||
|
profile: {
|
||||||
|
info: {
|
||||||
|
id: 1,
|
||||||
|
first_name: "Batuhan",
|
||||||
|
second_name: "Coşkun",
|
||||||
|
username: "bc1428"
|
||||||
|
},
|
||||||
|
selectedCategory: '',
|
||||||
|
functions: {
|
||||||
|
changeCategory: (id) => {
|
||||||
|
this.setState({selectedCategory: id});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
selectedMenu: '',
|
||||||
|
isTurn: false,
|
||||||
|
menus: [{
|
||||||
|
id: 1,
|
||||||
|
title: "Anasayfa",
|
||||||
|
path: ""
|
||||||
|
},{
|
||||||
|
id: 2,
|
||||||
|
title: "Bloglar",
|
||||||
|
path: "blogs"
|
||||||
|
}],
|
||||||
|
functions: {
|
||||||
|
changeMenu: (menu)=>{
|
||||||
|
this.setState({selectedMenu: menu.id})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
musiks = [{
|
||||||
|
id: 1,
|
||||||
|
title: "Müzik 1"
|
||||||
|
}]
|
||||||
|
|
||||||
|
selectedMenu = (data, id)=>{
|
||||||
|
this.setState({selectedMenu: id})
|
||||||
|
data.isTurn = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div className='flex flex-col h-screen'>
|
||||||
|
<Header/>
|
||||||
|
<div className='grid grid-cols-5 p-2 gap-4 h-screen overflow-hidden'>
|
||||||
|
<div id='content-left' className='flex flex-col gap-4 h-full justify-between'>
|
||||||
|
<div className='flex flex-col items-start h-full bg-white shadow-md rounded-2xl overflow-hidden'>
|
||||||
|
<NavLeft data={this.state} changeMenu={this.state.functions.changeMenu}/>
|
||||||
|
</div>
|
||||||
|
<div className='flex items-center justify-center bg-white shadow-md rounded-2xl overflow-hidden'>
|
||||||
|
<ProfileMenuBox data={this.state} changeMenu={this.state.functions.changeMenu}/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='flex flex-col col-span-4 overflow-y-scroll'>
|
||||||
|
<div id='content-center' className='flex flex-col items-center w-full col-span-4 p-4 shadow-md rounded-2xl bg-white overflow-y-scroll'>
|
||||||
|
<Pages data={this.state} selectedMenu={this.selectedMenu}/>
|
||||||
|
</div>
|
||||||
|
<div className='flex'>
|
||||||
|
<MusikBox/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* <div id='content-right' className='flex flex-col items-end col-start-5 bg-white shadow-md rounded-l-2xl'>
|
||||||
|
<NavRight/>
|
||||||
|
</div> */}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
};
|
||||||
|
};
|
||||||
16699
package-lock.json
generated
Normal file
16699
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
43
package.json
Normal file
43
package.json
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
{
|
||||||
|
"name": "wondanes-react",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"dependencies": {
|
||||||
|
"axios": "^1.7.9",
|
||||||
|
"cra-template": "1.2.0",
|
||||||
|
"react": "^19.0.0",
|
||||||
|
"react-dom": "^19.0.0",
|
||||||
|
"react-router-dom": "^7.1.3",
|
||||||
|
"react-scripts": "5.0.1",
|
||||||
|
"web-vitals": "^4.2.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"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"autoprefixer": "^10.4.20",
|
||||||
|
"postcss": "^8.5.1",
|
||||||
|
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17"
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
47
public/icons/musicplayer-play-button.svg
Normal file
47
public/icons/musicplayer-play-button.svg
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
width="64"
|
||||||
|
height="64"
|
||||||
|
viewBox="0 0 16.933333 16.933333"
|
||||||
|
version="1.1"
|
||||||
|
id="svg5"
|
||||||
|
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
|
||||||
|
sodipodi:docname="musicplayer-play-button.svg"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="namedview7"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#000000"
|
||||||
|
borderopacity="0.25"
|
||||||
|
inkscape:showpageshadow="2"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pagecheckerboard="0"
|
||||||
|
inkscape:deskcolor="#d1d1d1"
|
||||||
|
inkscape:document-units="mm"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:zoom="9.9875375"
|
||||||
|
inkscape:cx="41.25141"
|
||||||
|
inkscape:cy="34.092488"
|
||||||
|
inkscape:window-width="1920"
|
||||||
|
inkscape:window-height="1017"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="0"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="layer1" />
|
||||||
|
<defs
|
||||||
|
id="defs2" />
|
||||||
|
<g
|
||||||
|
inkscape:label="Katman 1"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer1">
|
||||||
|
<path
|
||||||
|
id="path4033"
|
||||||
|
style="fill:none;stroke:#000000;stroke-width:1.6973;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none"
|
||||||
|
d="M 0.84865074,0.90625991 V 8.4670345 16.027073 L 16.084789,8.4670345 Z" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
43
public/index.html
Normal file
43
public/index.html
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<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="Web site created using create-react-app"
|
||||||
|
/>
|
||||||
|
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||||
|
<!--
|
||||||
|
manifest.json provides metadata used when your web app is installed on a
|
||||||
|
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||||
|
-->
|
||||||
|
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||||
|
<!--
|
||||||
|
Notice the use of %PUBLIC_URL% in the tags above.
|
||||||
|
It will be replaced with the URL of the `public` folder during the build.
|
||||||
|
Only files inside the `public` folder can be referenced from the HTML.
|
||||||
|
|
||||||
|
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||||
|
work correctly both with client-side routing and a non-root public URL.
|
||||||
|
Learn how to configure a non-root public URL by running `npm run build`.
|
||||||
|
-->
|
||||||
|
<title>React App</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||||
|
<div id="root"></div>
|
||||||
|
<!--
|
||||||
|
This HTML file is a template.
|
||||||
|
If you open it directly in the browser, you will see an empty page.
|
||||||
|
|
||||||
|
You can add webfonts, meta tags, or analytics to this file.
|
||||||
|
The build step will place the bundled scripts into the <body> tag.
|
||||||
|
|
||||||
|
To begin the development, run `npm start` or `yarn start`.
|
||||||
|
To create a production bundle, use `npm run build` or `yarn build`.
|
||||||
|
-->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
25
public/manifest.json
Normal file
25
public/manifest.json
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
{
|
||||||
|
"short_name": "React App",
|
||||||
|
"name": "Create React App Sample",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "favicon.ico",
|
||||||
|
"sizes": "64x64 32x32 24x24 16x16",
|
||||||
|
"type": "image/x-icon"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "logo192.png",
|
||||||
|
"type": "image/png",
|
||||||
|
"sizes": "192x192"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "logo512.png",
|
||||||
|
"type": "image/png",
|
||||||
|
"sizes": "512x512"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"start_url": ".",
|
||||||
|
"display": "standalone",
|
||||||
|
"theme_color": "#000000",
|
||||||
|
"background_color": "#ffffff"
|
||||||
|
}
|
||||||
3
public/robots.txt
Normal file
3
public/robots.txt
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
# https://www.robotstxt.org/robotstxt.html
|
||||||
|
User-agent: *
|
||||||
|
Disallow:
|
||||||
136
src/App.js
Normal file
136
src/App.js
Normal file
@ -0,0 +1,136 @@
|
|||||||
|
import React, { Component, useEffect } from 'react'
|
||||||
|
import Header from './components/Header';
|
||||||
|
// import NavRight from './components/NavRight';
|
||||||
|
import NavLeft from './components/NavLeft';
|
||||||
|
import Pages from './components/Pages';
|
||||||
|
import ProfileMenuBox from './components/ProfileMenuBox';
|
||||||
|
import MusikBox from './components/MusikBox';
|
||||||
|
import Ads from './components/ads';
|
||||||
|
import axios from 'axios';
|
||||||
|
import BottomBox from './components/BottomBox';
|
||||||
|
import Auth from './middlewares/Auth';
|
||||||
|
|
||||||
|
export default class App extends Component {
|
||||||
|
|
||||||
|
state = {
|
||||||
|
profile: {
|
||||||
|
id: 1,
|
||||||
|
first_name: 'Batuhan',
|
||||||
|
second_name: 'Coşkun',
|
||||||
|
username: 'batuhancoskun',
|
||||||
|
menus: {
|
||||||
|
selected: '',
|
||||||
|
list: [{
|
||||||
|
id: 0,
|
||||||
|
title: 'Özet',
|
||||||
|
path: ''
|
||||||
|
},{
|
||||||
|
id: 1,
|
||||||
|
title: 'Gönderiler',
|
||||||
|
path: 'posts'
|
||||||
|
},{
|
||||||
|
id: 2,
|
||||||
|
title: 'Hakkında',
|
||||||
|
path: 'about'
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
menus: {
|
||||||
|
selected: '',
|
||||||
|
list: [{
|
||||||
|
id: 0,
|
||||||
|
title: 'Anasayfa',
|
||||||
|
path: ''
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
serverOptions: {
|
||||||
|
endBack: {
|
||||||
|
url: "http://192.168.1.15:3001"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
auth: true
|
||||||
|
};
|
||||||
|
|
||||||
|
functions = {
|
||||||
|
profile: {
|
||||||
|
menus: {
|
||||||
|
changeMenu: (menuId) => {
|
||||||
|
this.setState({
|
||||||
|
profile: {
|
||||||
|
...this.state.profile,
|
||||||
|
menus: {
|
||||||
|
...this.state.profile.menus,
|
||||||
|
selected: menuId
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
menuControl: (menuId) => {
|
||||||
|
const control = this.state.profile.menus.selected === menuId;
|
||||||
|
if(!control){
|
||||||
|
this.functions.profile.menus.changeMenu(menuId);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
menus: {
|
||||||
|
changeMenu: (menuId) => {
|
||||||
|
this.setState({
|
||||||
|
menus: {
|
||||||
|
...this.state.menus,
|
||||||
|
selected: menuId
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
menuControl: (menuId) => {
|
||||||
|
const control = this.state.menus.selected === menuId;
|
||||||
|
if(!control){
|
||||||
|
this.functions.menus.changeMenu(menuId);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div className='flex flex-col h-screen overflow-hidden'>
|
||||||
|
<Header/>
|
||||||
|
<div className='flex flex-col h-screen overflow-hidden p-4'>
|
||||||
|
{
|
||||||
|
this.state.auth ?
|
||||||
|
<div className='flex flex-col h-screen overflow-hidden gap-4'>
|
||||||
|
<div className='grid grid-cols-5 h-full overflow-hidden gap-4'>
|
||||||
|
<div className='flex flex-col gap-4'>
|
||||||
|
<div className='flex bg-white h-full rounded-2xl overflow-hidden'>
|
||||||
|
<NavLeft state={this.state} functions={this.functions}/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{
|
||||||
|
Auth(this.state.serverOptions.endBack.url) ?
|
||||||
|
<div className='flex col-span-4 h-full overflow-y-scroll bg-white rounded-2xl p-4'>
|
||||||
|
<Pages state={this.state} functions={this.functions}/>
|
||||||
|
</div>
|
||||||
|
:
|
||||||
|
<div></div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
<div className='grid grid-cols-5 h-16 gap-4'>
|
||||||
|
<div className='flex bg-white rounded-2xl overflow-hidden'>
|
||||||
|
<ProfileMenuBox state={this.state} functions={this.functions}/>
|
||||||
|
</div>
|
||||||
|
<div className='flex col-span-4 bg-white rounded-2xl'>
|
||||||
|
<BottomBox/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
:
|
||||||
|
<div className='flex col-span-4 h-full overflow-y-scroll bg-white rounded-2xl p-4'>
|
||||||
|
<Pages state={this.state} functions={this.functions}/>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
};
|
||||||
|
};
|
||||||
8
src/App.test.js
Normal file
8
src/App.test.js
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
import { render, screen } from '@testing-library/react';
|
||||||
|
import App from './App';
|
||||||
|
|
||||||
|
test('renders learn react link', () => {
|
||||||
|
render(<App />);
|
||||||
|
const linkElement = screen.getByText(/learn react/i);
|
||||||
|
expect(linkElement).toBeInTheDocument();
|
||||||
|
});
|
||||||
73
src/components/About.jsx
Normal file
73
src/components/About.jsx
Normal file
@ -0,0 +1,73 @@
|
|||||||
|
import React, { Component } from 'react'
|
||||||
|
|
||||||
|
export default class About extends Component {
|
||||||
|
render() {
|
||||||
|
this.props.functions.profile.menus.menuControl(2);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='flex flex-col bg-gray-500 bg-opacity-10 rounded-2xl p-4'>
|
||||||
|
<div className='flex items-center justify-center p-2'>
|
||||||
|
<p className='font-bold'>Gönderi İstatistikleri</p>
|
||||||
|
</div>
|
||||||
|
<div className='grid grid-cols-4 grid-rows-3 grid-flow-row'>
|
||||||
|
<div className='grid grid-cols-2 gap-4'>
|
||||||
|
<div className='flex justify-end'>
|
||||||
|
<p className='font-bold'>Gönderi Sayısı</p>
|
||||||
|
</div>
|
||||||
|
<div className='flex'>
|
||||||
|
<p>25</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='grid grid-cols-2 gap-4'>
|
||||||
|
<div className='flex justify-end'>
|
||||||
|
<p className='font-bold'>Kaydetme Sayısı</p>
|
||||||
|
</div>
|
||||||
|
<div className='flex'>
|
||||||
|
<p>75</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='grid grid-cols-2 gap-4'>
|
||||||
|
<div className='flex justify-end'>
|
||||||
|
<p className='font-bold'>Kaydedilme Sayısı</p>
|
||||||
|
</div>
|
||||||
|
<div className='flex'>
|
||||||
|
<p>120</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='grid grid-cols-2 gap-4'>
|
||||||
|
<div className='flex justify-end'>
|
||||||
|
<p className='font-bold'>Bencillik Yüzdesi</p>
|
||||||
|
</div>
|
||||||
|
<div className='flex'>
|
||||||
|
<p>%40</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='grid grid-cols-2 gap-4'>
|
||||||
|
<div className='flex justify-end'>
|
||||||
|
<p className='font-bold'>Gönderi Sayısı</p>
|
||||||
|
</div>
|
||||||
|
<div className='flex'>
|
||||||
|
<p>25</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='grid grid-cols-2 gap-4'>
|
||||||
|
<div className='flex justify-end'>
|
||||||
|
<p className='font-bold'>Gönderi Sayısı</p>
|
||||||
|
</div>
|
||||||
|
<div className='flex'>
|
||||||
|
<p>25</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='grid grid-cols-2 gap-4'>
|
||||||
|
<div className='flex justify-end'>
|
||||||
|
<p className='font-bold'>Gönderi Sayısı</p>
|
||||||
|
</div>
|
||||||
|
<div className='flex'>
|
||||||
|
<p>25</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
};
|
||||||
|
};
|
||||||
11
src/components/BottomBox.jsx
Normal file
11
src/components/BottomBox.jsx
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import React, { Component } from 'react'
|
||||||
|
|
||||||
|
export default class BottomBox extends Component {
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div className='flex p-2 gap-4 items-center w-full bg-pc rounded-2xl'>
|
||||||
|
<p>BOTTOM</p>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
};
|
||||||
18
src/components/Header.jsx
Normal file
18
src/components/Header.jsx
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
import React, { PureComponent } from 'react'
|
||||||
|
|
||||||
|
export class Header extends PureComponent {
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div className='flex bg-pc shadow-md justify-between p-navbar rounded-b-2xl mx-4'>
|
||||||
|
<div>
|
||||||
|
<a className='font-bold' href='/'>Wondanes - Ele Mele Ǩismeti</a>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a className='p-2 rounded-lg cursor-pointer hover:bg-white hover:bg-opacity-70' href='/logout'>Çıkış Yap</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Header
|
||||||
24
src/components/MusikBox.jsx
Normal file
24
src/components/MusikBox.jsx
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
import React, { Component } from 'react'
|
||||||
|
|
||||||
|
export default class MusikBox extends Component {
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div className='flex p-2 gap-4 items-center w-full bg-pc rounded-2xl'>
|
||||||
|
<img className='h-12 rounded-2xl' src='https://vivaturkiye.eu/wp-content/uploads/2020/02/Bar%C4%B1%C5%9F-Akarsu.jpg'></img>
|
||||||
|
<div className='flex flex-col flex-shrink-0 items-start justify-center'>
|
||||||
|
<p className='font-bold'>Rüzgâr</p>
|
||||||
|
<p>Barış Akarsu</p>
|
||||||
|
</div>
|
||||||
|
{/* <div className='flex w-full'>
|
||||||
|
<div className='flex w-full bg-white h-4 rounded-2xl overflow-hidden'>
|
||||||
|
<div className='flex w-1/2 bg-black rounded-r-2xl'>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div> */}
|
||||||
|
<div className='flex'>
|
||||||
|
<img className='h-8' src={process.env.PUBLIC_URL + '/icons/musicplayer-play-button.svg'}></img>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
};
|
||||||
16
src/components/NavLeft.jsx
Normal file
16
src/components/NavLeft.jsx
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
import React, { Component } from 'react'
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
|
export default class NavLeft extends Component {
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div className='flex flex-col aspect-ratio w-full'>
|
||||||
|
<div className='flex flex-col rounded-r-2xl'>
|
||||||
|
{this.props.state.menus.list.map(get => (
|
||||||
|
<Link to={get.path} onClick={() => this.props.functions.menus.menuControl(get.id)} className={'p-4 hover:bg-pc hover:bg-opacity-50 ' + (get.id === this.props.state.menus.selected ? 'bg-pc font-bold' : '')}>{get.title}</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
14
src/components/NavRight.jsx
Normal file
14
src/components/NavRight.jsx
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
function NavRight() {
|
||||||
|
return (
|
||||||
|
<div className='flex flex-col w-full'>
|
||||||
|
<div className='flex flex-col border-solid rounded-l-2xl'>
|
||||||
|
<a className='flex p-4 rounded-l-2xl hover:bg-pc' href='/'>Anasayfa</a>
|
||||||
|
<a className='flex p-4 rounded-l-2xl hover:bg-pc' href='/profile'>Profil</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default NavRight
|
||||||
62
src/components/Overview.jsx
Normal file
62
src/components/Overview.jsx
Normal file
@ -0,0 +1,62 @@
|
|||||||
|
import React, { Component } from 'react'
|
||||||
|
import Post from './Post';
|
||||||
|
|
||||||
|
export default class Overview extends Component {
|
||||||
|
render() {
|
||||||
|
this.props.functions.profile.menus.menuControl(0)
|
||||||
|
return (
|
||||||
|
<div className='grid grid-cols-4 gap-4'>
|
||||||
|
<div className='flex flex-col gap-2 border-solid border-4 border-pc bg-pc bg-opacity-50 items-center rounded-2xl overflow-hidden'>
|
||||||
|
<div className='flex w-full bg-pc items-center justify-center p-2'>
|
||||||
|
<p className='font-bold'>Toplam Gönderi</p>
|
||||||
|
</div>
|
||||||
|
<div className='flex items-center justify-center p-4'>
|
||||||
|
<p>85</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='flex flex-col gap-2 border-solid border-4 border-pc bg-pc bg-opacity-50 items-center rounded-2xl overflow-hidden'>
|
||||||
|
<div className='flex w-full bg-pc items-center justify-center p-2'>
|
||||||
|
<p className='font-bold'>Toplam Gönderi</p>
|
||||||
|
</div>
|
||||||
|
<div className='flex items-center justify-center p-4'>
|
||||||
|
<p>85</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='flex flex-col gap-2 border-solid border-4 border-pc bg-pc bg-opacity-50 items-center rounded-2xl overflow-hidden'>
|
||||||
|
<div className='flex w-full bg-pc items-center justify-center p-2'>
|
||||||
|
<p className='font-bold'>Toplam Gönderi</p>
|
||||||
|
</div>
|
||||||
|
<div className='flex items-center justify-center p-4'>
|
||||||
|
<p>85</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='flex flex-col gap-2 border-solid border-4 border-pc bg-pc bg-opacity-50 items-center rounded-2xl overflow-hidden'>
|
||||||
|
<div className='flex w-full bg-pc items-center justify-center p-2'>
|
||||||
|
<p className='font-bold'>Toplam Gönderi</p>
|
||||||
|
</div>
|
||||||
|
<div className='flex items-center justify-center p-4'>
|
||||||
|
<p>85</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='flex flex-col col-span-4 gap-2 border-solid border-4 border-pc bg-opacity-50 items-center rounded-2xl overflow-hidden'>
|
||||||
|
<div className='flex w-full bg-pc items-center justify-center p-2'>
|
||||||
|
<p className='font-bold'>Başa Sabitlenmiş Gönderi</p>
|
||||||
|
</div>
|
||||||
|
<div className='flex items-center justify-center p-4'>
|
||||||
|
{/* <Post data={this.postsData[1]}/> */}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='flex flex-col col-span-4 gap-2 border-solid border-4 border-pc bg-opacity-50 items-center rounded-2xl overflow-hidden'>
|
||||||
|
<div className='flex w-full bg-pc items-center justify-center p-2'>
|
||||||
|
<p className='font-bold'>Popüler Gönderi</p>
|
||||||
|
</div>
|
||||||
|
<div className='flex items-center justify-center p-4'>
|
||||||
|
<div className='flex items-center justify-center shadow-2xl overflow-hidden'>
|
||||||
|
{/* <Post data={this.postsData[2]}/> */}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
33
src/components/Pages.jsx
Normal file
33
src/components/Pages.jsx
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
import React, { Component } from 'react'
|
||||||
|
import {Routes, Route} from 'react-router-dom';
|
||||||
|
import axios from 'axios';
|
||||||
|
|
||||||
|
|
||||||
|
import NotPage from '../pages/NotPage';
|
||||||
|
import Profile from '../pages/Profile';
|
||||||
|
import Home from '../pages/Home';
|
||||||
|
|
||||||
|
|
||||||
|
import Overview from './Overview';
|
||||||
|
import Posts from './Posts';
|
||||||
|
import About from './About';
|
||||||
|
import Login from '../pages/Login';
|
||||||
|
|
||||||
|
export default class Pages extends Component {
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div className='w-full'>
|
||||||
|
<Routes>
|
||||||
|
<Route path='/' element={<Home state={this.props.state} functions={this.props.functions}/>}/>
|
||||||
|
<Route path='/profile/:username' element={<Profile state={this.props.state} functions={this.props.functions}/>}>
|
||||||
|
<Route path='' element={<Overview state={this.props.state} functions={this.props.functions} />}></Route>
|
||||||
|
<Route path='posts' element={<Posts state={this.props.state} functions={this.props.functions} />}></Route>
|
||||||
|
<Route path='about' element={<About state={this.props.state} functions={this.props.functions} />}></Route>
|
||||||
|
</Route>
|
||||||
|
<Route path='/login' element={<Login state={this.props.state} />} />
|
||||||
|
<Route path='*' element={<NotPage/>}/>
|
||||||
|
</Routes>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
49
src/components/Post.jsx
Normal file
49
src/components/Post.jsx
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import { Link } from 'react-router-dom'
|
||||||
|
|
||||||
|
function Post(props) {
|
||||||
|
return (
|
||||||
|
<div key={props.data.id} id="blog-<%-data.id%>" class="blog-post flex flex-col rounded-2xl bg-gray-200 overflow-hidden shadow-lg">
|
||||||
|
<div class="flex flex-col gap-2 p-4">
|
||||||
|
<div class="flex justify-between">
|
||||||
|
<div class="flex flex-col items-center gap-1">
|
||||||
|
<div class="flex flex-col gap-1">
|
||||||
|
<div id="profile-<%-data.profile.username%>" class="flex gap-2 items-center">
|
||||||
|
<Link to={"/profile/" + props.data.profile.username} class="flex break-words">{props.data.profile.first_name} {props.data.profile.second_name}</Link>
|
||||||
|
{/* <a class="profile-follow p-1 bg-pc cursor-pointer rounded-lg font-bold hover:bg-pc/70">Takip Et</a> */}
|
||||||
|
</div>
|
||||||
|
<h2 class="font-bold">{props.data.title}</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col gap-1">
|
||||||
|
<div class="flex gap-2 items-end justify-end">
|
||||||
|
{/* <a href="<%-data.blogsCate.href%>">data.blogsCate.title</a> */}
|
||||||
|
<p>Buraya Kategori eklenecek</p>
|
||||||
|
<p>-</p>
|
||||||
|
<p class="text-end">01.01.2024</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-center w-full">
|
||||||
|
{/* <a id="blog-report" class="p-1 bg-pc w-full rounded-lg cursor-pointer text-center font-bold hover:bg-pc/70">Bildir</a> */}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="post-content flex flex-col <%-(data.rebuild.textLen > 800) ? 'h-[20em]' : '' %>">
|
||||||
|
{props.data.content}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-1 items-center justify-center bg-gray-200 overflow-hidden">
|
||||||
|
|
||||||
|
{(false) ?
|
||||||
|
<div class="flex p-4 py-1">
|
||||||
|
{/* <a class="post-text-more font-bold cursor-pointer">Devamını Oku</a> */}
|
||||||
|
</div>
|
||||||
|
: ""
|
||||||
|
}
|
||||||
|
|
||||||
|
<p id="blog-save" class="items-center justify-center text-center font-bold cursor-pointer p-2 bg-pc hover:bg-pc/50">Kaydettin</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Post
|
||||||
50
src/components/Posts.jsx
Normal file
50
src/components/Posts.jsx
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
import React, { Component } from 'react'
|
||||||
|
import Post from './Post'
|
||||||
|
|
||||||
|
export default class Posts extends Component {
|
||||||
|
postsData = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
title: "Bolu'da Otel Yangını",
|
||||||
|
content: "Bolu'da meydana gelen otel yangınında 78 kişi hayatını kaybetti.",
|
||||||
|
profile: {
|
||||||
|
id: 1,
|
||||||
|
username: "bc1428",
|
||||||
|
first_name: "Batuhan",
|
||||||
|
second_name: "Coşkun"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
title: "Sultanbeyli'de Tekstil Atölyesinde Yangın",
|
||||||
|
content: "Adil Mahallesi'nde bulunan tekstil atölyesinin çatı katından dumanlar yükselti saatlerce süren operasyonda yangın kontrol altına alındı.",
|
||||||
|
profile: {
|
||||||
|
id: 1,
|
||||||
|
username: "bc1428",
|
||||||
|
first_name: "Batuhan",
|
||||||
|
second_name: "Coşkun"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
title: "Anadolu İstanbul Kulübü Feshedildi",
|
||||||
|
content: "Uzun vakittir pasif vaziyette olan Anadolu İstanbul Kulübü bugün başkan Batuhan Coşkun tarafından feshedildi.",
|
||||||
|
profile: {
|
||||||
|
id: 1,
|
||||||
|
username: "bc1428",
|
||||||
|
first_name: "Batuhan",
|
||||||
|
second_name: "Coşkun"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
render() {
|
||||||
|
this.props.functions.profile.menus.menuControl(1);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='flex flex-col gap-4'>
|
||||||
|
{this.postsData.map(get => <Post key={get.id} data={get}/>)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
};
|
||||||
47
src/components/ProfileDetail.jsx
Normal file
47
src/components/ProfileDetail.jsx
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
import React, { Component } from 'react'
|
||||||
|
import {Link, Outlet} from 'react-router-dom';
|
||||||
|
|
||||||
|
export default class ProfileDetail extends Component {
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div className='flex flex-col gap-4'>
|
||||||
|
<div className='flex flex-col gap-4'>
|
||||||
|
<div className='grid grid-cols-5 gap-4 bg-pc p-4 rounded-2xl shadow-lg'>
|
||||||
|
<div className='grid col-span-5 items-center p-4 gap-4 justify-center rounded-2xl'>
|
||||||
|
<h2 className='col-span-3 font-bold text-center text-3xl'>İsim Soyisim</h2>
|
||||||
|
</div>
|
||||||
|
<div className='grid grid-cols-5 col-span-5 gap-4'>
|
||||||
|
<div className='flex flex-col rounded-2xl bg-white bg-opacity-70 p-2 gap-2'>
|
||||||
|
<div className='flex items-center justify-center'>
|
||||||
|
<p className='font-bold'>Takipçi</p>
|
||||||
|
</div>
|
||||||
|
<div className='flex items-center justify-center'>
|
||||||
|
<p>50</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='col-span-3 bg-white p-2 bg-opacity-70 rounded-2xl'>
|
||||||
|
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque similique harum accusamus ratione eveniet atque eius maiores ad reprehenderit quod, vero officiis nesciunt blanditiis deserunt velit vitae veritatis provident repellendus.</p>
|
||||||
|
</div>
|
||||||
|
<div className='flex flex-col rounded-2xl bg-white bg-opacity-70 p-2 gap-2'>
|
||||||
|
<div className='flex items-center justify-center'>
|
||||||
|
<p className='font-bold'>Takip Edilen</p>
|
||||||
|
</div>
|
||||||
|
<div className='flex items-center justify-center'>
|
||||||
|
<p>50</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='flex bg-pc rounded-2xl shadow-lg overflow-hidden select-none'>
|
||||||
|
{this.props.state.profile.menus.list.map(get => (
|
||||||
|
<Link to={'/profile/' + this.props.state.profile.username + '/' + get.path} onClick={() => this.props.functions.profile.menus.changeMenu(get.id)} className={'p-4 hover:bg-white hover:bg-opacity-30 ' + (this.props.state.profile.menus.selected === get.id ? 'font-bold' : '')}>{get.title}</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className='bg-white p-4'>
|
||||||
|
<Outlet/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
10
src/components/ProfileMenuBox.jsx
Normal file
10
src/components/ProfileMenuBox.jsx
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
import React, { Component } from 'react'
|
||||||
|
import { Link } from 'react-router-dom'
|
||||||
|
|
||||||
|
export default class ProfileMenuBox extends Component {
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<Link to={'/profile/' + this.props.state.profile.username} className={'flex items-center justify-center h-full w-full hover:bg-pc hover:bg-opacity-50 ' + (this.props.state.menus.selected === this.props.state.profile.id ? 'bg-pc font-bold' : '')}>{this.props.state.profile.first_name} {this.props.state.profile.second_name}</Link>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
11
src/components/ads.jsx
Normal file
11
src/components/ads.jsx
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import React, { Component } from 'react'
|
||||||
|
|
||||||
|
export default class extends Component {
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div className='flex w-full aspect-ratio bg-green-500'>
|
||||||
|
<p>i</p>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
17
src/index.css
Normal file
17
src/index.css
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
/* ./src/index.css */
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
body{
|
||||||
|
background: var(--bg-pc);
|
||||||
|
}
|
||||||
|
|
||||||
|
.aspect-ratio{
|
||||||
|
aspect-ratio: 1/1;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root{
|
||||||
|
--navbar-p: 1rem;
|
||||||
|
--bg-pc:#cff9ff;
|
||||||
|
}
|
||||||
18
src/index.js
Normal file
18
src/index.js
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import ReactDOM from 'react-dom/client';
|
||||||
|
import './index.css';
|
||||||
|
import App from './App';
|
||||||
|
import reportWebVitals from './reportWebVitals';
|
||||||
|
import {BrowserRouter} from 'react-router-dom';
|
||||||
|
|
||||||
|
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||||
|
root.render(
|
||||||
|
<BrowserRouter>
|
||||||
|
<App />
|
||||||
|
</BrowserRouter>
|
||||||
|
);
|
||||||
|
|
||||||
|
// If you want to start measuring performance in your app, pass a function
|
||||||
|
// to log results (for example: reportWebVitals(console.log))
|
||||||
|
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
|
||||||
|
reportWebVitals();
|
||||||
26
src/middlewares/Auth.js
Normal file
26
src/middlewares/Auth.js
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import axios from 'axios';
|
||||||
|
|
||||||
|
export default function Auth(url) {
|
||||||
|
let [auth, setAuth] = "";
|
||||||
|
|
||||||
|
axios.defaults.withCredentials = true;
|
||||||
|
const result = axios.post(url + "/login/control", {
|
||||||
|
name: "Batuhan Coşkun"
|
||||||
|
})
|
||||||
|
.then(res => {
|
||||||
|
if(res.data.Status === "Success"){
|
||||||
|
setAuth = true;
|
||||||
|
if (window.location.pathname === "/login"){
|
||||||
|
window.location.href = "/";
|
||||||
|
};
|
||||||
|
}else{
|
||||||
|
setAuth = false;
|
||||||
|
if(window.location.pathname !== "/login"){
|
||||||
|
window.location.href = '/login';
|
||||||
|
};
|
||||||
|
};
|
||||||
|
return setAuth;
|
||||||
|
});
|
||||||
|
return result;
|
||||||
|
};
|
||||||
13
src/pages/Blogs.jsx
Normal file
13
src/pages/Blogs.jsx
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import React, { Component } from 'react'
|
||||||
|
|
||||||
|
export default class Blogs extends Component {
|
||||||
|
render() {
|
||||||
|
if(this.props.data.isTurn === false){
|
||||||
|
this.props.selectedMenu(this.props.data, 2);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>Blogs</div>
|
||||||
|
)
|
||||||
|
};
|
||||||
|
};
|
||||||
25
src/pages/Home.jsx
Normal file
25
src/pages/Home.jsx
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
// import axios from 'axios';
|
||||||
|
// import React, { useEffect, useState } from 'react'
|
||||||
|
|
||||||
|
export default function Home() {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>Home</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// import React, { Component } from 'react'
|
||||||
|
|
||||||
|
// export default class Home extends Component {
|
||||||
|
// render() {
|
||||||
|
// this.props.functions.menus.menuControl(0);
|
||||||
|
|
||||||
|
// return (
|
||||||
|
// <div>
|
||||||
|
// <p>{this.props.state.menus.selected}</p>
|
||||||
|
// </div>
|
||||||
|
// )
|
||||||
|
// }
|
||||||
|
// }
|
||||||
36
src/pages/Login.jsx
Normal file
36
src/pages/Login.jsx
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
import React, { Component } from 'react'
|
||||||
|
import axios from 'axios';
|
||||||
|
|
||||||
|
|
||||||
|
export default class Login extends Component {
|
||||||
|
render() {
|
||||||
|
|
||||||
|
const handleSubmit = (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
axios.defaults.withCredentials = true;
|
||||||
|
axios.post(this.props.state.serverOptions.endBack.url + "/login", {
|
||||||
|
email: event.target.email.value,
|
||||||
|
password: event.target.password.value
|
||||||
|
})
|
||||||
|
.then(get => {
|
||||||
|
if(get.data.login){
|
||||||
|
window.location.href = "/";
|
||||||
|
};
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='flex h-full items-center justify-center'>
|
||||||
|
<div className='flex item-center justify-center'>
|
||||||
|
<form className='flex flex-col items-center justify-center gap-4 p-4 rounded-2xl bg-pc bg-opacity-30' onSubmit={handleSubmit}>
|
||||||
|
<h3 className='font-bold text-2xl'>Giriş Yap</h3>
|
||||||
|
<input name='email' type='text' className='border-solid border-2 rounded-lg p-3'></input>
|
||||||
|
<input name='password' type='password' className='border-solid border-2 rounded-lg p-3'></input>
|
||||||
|
<button className='border-solid w-full rounded-lg bg-pc p-3 hover:bg-pc hover:bg-opacity-50'>Giriş Yap</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
9
src/pages/NotPage.jsx
Normal file
9
src/pages/NotPage.jsx
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import React, { Component } from 'react'
|
||||||
|
|
||||||
|
export default class NotPage extends Component {
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div>NotPage</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
15
src/pages/Profile.jsx
Normal file
15
src/pages/Profile.jsx
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
import React, { Component } from 'react'
|
||||||
|
import ProfileDetail from '../components/ProfileDetail'
|
||||||
|
|
||||||
|
export default class Profile extends Component {
|
||||||
|
render() {
|
||||||
|
|
||||||
|
this.props.functions.menus.menuControl(1);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='flex flex-col w-full'>
|
||||||
|
<ProfileDetail state={this.props.state} functions={this.props.functions}/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
13
src/reportWebVitals.js
Normal file
13
src/reportWebVitals.js
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
const reportWebVitals = onPerfEntry => {
|
||||||
|
if (onPerfEntry && onPerfEntry instanceof Function) {
|
||||||
|
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
|
||||||
|
getCLS(onPerfEntry);
|
||||||
|
getFID(onPerfEntry);
|
||||||
|
getFCP(onPerfEntry);
|
||||||
|
getLCP(onPerfEntry);
|
||||||
|
getTTFB(onPerfEntry);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export default reportWebVitals;
|
||||||
5
src/setupTests.js
Normal file
5
src/setupTests.js
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
// jest-dom adds custom jest matchers for asserting on DOM nodes.
|
||||||
|
// allows you to do things like:
|
||||||
|
// expect(element).toHaveTextContent(/react/i)
|
||||||
|
// learn more: https://github.com/testing-library/jest-dom
|
||||||
|
import '@testing-library/jest-dom';
|
||||||
6358
src/tailwind.css
Normal file
6358
src/tailwind.css
Normal file
File diff suppressed because it is too large
Load Diff
26
tailwind.config.js
Normal file
26
tailwind.config.js
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
module.exports = {
|
||||||
|
purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
|
||||||
|
darkMode: false, // or 'media' or 'class'
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
'pc': '#10cccc',
|
||||||
|
'pb': '#cff9ff'
|
||||||
|
},
|
||||||
|
height: {
|
||||||
|
'navbar-full': 'calc(100vh - var(--navbar-h) - var(--navbar-p))',
|
||||||
|
'navbar': 'var(--navbar-h)'
|
||||||
|
},
|
||||||
|
padding: {
|
||||||
|
'navbar': 'var(--navbar-p)'
|
||||||
|
},
|
||||||
|
border: {
|
||||||
|
'1r': '0.1rem'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
variants: {
|
||||||
|
extend: {},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user