Skip to content

Commit 1d5eae2

Browse files
adakerja-ranjbar-madakerja-ranjbar-m
committed
init repo
1 parent 357315f commit 1d5eae2

25 files changed

+97181
-109
lines changed

‎.eslintrc.json

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"extends": [
3+
"prettier",
4+
"prettier/standard",
5+
"prettier/react",
6+
"plugin:react/recommended"
7+
],
8+
"plugins": ["prettier"],
9+
"rules": {
10+
"prettier/prettier": "error"
11+
},
12+
"parser": "babel-eslint",
13+
"env": {
14+
"browser": true
15+
},
16+
"settings": {
17+
"react": {
18+
"pragma": "React",
19+
"version": "detect"
20+
}
21+
}
22+
}

‎.prettierrc

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"singleQuote": true,
3+
"trailingComma": "all"
4+
}

‎.vscode/extensions.json

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"recommendations": [
3+
"dbaeumer.vscode-eslint",
4+
"esbenp.prettier-vscode"
5+
]
6+
}

‎.vscode/settings.json

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"emmet.includeLanguages": {
3+
"javascript": "javascriptreact"
4+
},
5+
"editor.codeActionsOnSave": {
6+
"source.fixAll.eslint": true
7+
},
8+
"editor.formatOnSave": true,
9+
"[javascript]": {
10+
"editor.formatOnSave": false
11+
},
12+
"[javascriptreact]": {
13+
"editor.formatOnSave": false
14+
}
15+
}

‎README.md

Lines changed: 16 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,26 @@
1-
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
2-
3-
## Available Scripts
4-
5-
In the project directory, you can run:
6-
7-
### `yarn start`
8-
9-
Runs the app in the development mode.<br />
10-
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
11-
12-
The page will reload if you make edits.<br />
13-
You will also see any lint errors in the console.
14-
15-
### `yarn test`
16-
17-
Launches the test runner in the interactive watch mode.<br />
18-
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
19-
20-
### `yarn build`
21-
22-
Builds the app for production to the `build` folder.<br />
23-
It correctly bundles React in production mode and optimizes the build for the best performance.
24-
25-
The build is minified and the filenames include the hashes.<br />
26-
Your app is ready to be deployed!
27-
28-
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
1+
![demo](https://imgur.com/pTpQrDI.png)
292

30-
### `yarn eject`
31-
32-
**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
33-
34-
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.
35-
36-
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.
37-
38-
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.
39-
40-
## Learn More
41-
42-
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
43-
44-
To learn React, check out the [React documentation](https://reactjs.org/).
45-
46-
### Code Splitting
47-
48-
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
49-
50-
### Analyzing the Bundle Size
3+
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
514

52-
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
535

54-
### Making a Progressive Web App
6+
### Motivation
7+
Just wanted to checkout tailwind css and build something with it. what a enjoyable experience.
558

56-
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
9+
I used a design, from [Marjan Entezari](https://www.linkedin.com/in/marjan-entezari-9050b4137/)
5710

58-
### Advanced Configuration
11+
### Demo
12+
[Task Do]()
5913

60-
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
14+
### How To Run
6115

62-
### Deployment
16+
1- use below command to install dependencies:
6317

64-
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
18+
```javascript
19+
yarn
20+
```
6521

66-
### `yarn build` fails to minify
22+
2- use below command to start react:
6723

68-
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
24+
```
25+
yarn start
26+
```

‎package.json

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,24 @@
66
"@testing-library/jest-dom": "^4.2.4",
77
"@testing-library/react": "^9.3.2",
88
"@testing-library/user-event": "^7.1.2",
9+
"classnames": "^2.2.6",
10+
"moment": "^2.29.0",
11+
"prop-types": "^15.7.2",
912
"react": "^16.13.1",
1013
"react-dom": "^16.13.1",
14+
"react-icons": "^3.11.0",
1115
"react-scripts": "3.4.3"
1216
},
1317
"scripts": {
14-
"start": "react-scripts start",
18+
"prebuild": "npm run build:css",
19+
"start:cra": "sleep 4 && react-scripts start",
20+
"start": "concurrently \"npm run dev:css\" \"npm run start:cra\"",
1521
"build": "react-scripts build",
1622
"test": "react-scripts test",
17-
"eject": "react-scripts eject"
23+
"eject": "react-scripts eject",
24+
"dev:css": "postcss src/styles/tailwind.css -o src/styles/main.css -w",
25+
"build:css": "postcss src/styles/tailwind.css -o src/styles/main.css",
26+
"pretty": "prettier --write ./src/**/*.{js,jsx,json}"
1827
},
1928
"eslintConfig": {
2029
"extends": "react-app"
@@ -30,5 +39,20 @@
3039
"last 1 firefox version",
3140
"last 1 safari version"
3241
]
42+
},
43+
"devDependencies": {
44+
"autoprefixer": "^9.8.6",
45+
"babel-eslint": "^10.0.3",
46+
"concurrently": "^5.3.0",
47+
"eslint": "^6.8.0",
48+
"eslint-config-babel": "^9.0.0",
49+
"eslint-config-prettier": "^6.10.0",
50+
"eslint-plugin-import": "^2.20.0",
51+
"eslint-plugin-prettier": "^3.1.2",
52+
"eslint-plugin-react": "^7.18.0",
53+
"eslint-plugin-standard": "^4.0.1",
54+
"postcss-cli": "^7.1.2",
55+
"prettier": "^1.19.1",
56+
"tailwindcss": "^1.8.7"
3357
}
3458
}

‎postcss.config.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
const tailwindcss = require("tailwindcss");
2+
module.exports = {
3+
plugins: [
4+
tailwindcss("./tailwind.config.js"),
5+
require("autoprefixer")
6+
]
7+
};

‎src/App.js

Lines changed: 7 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,13 @@
1-
import React from 'react';
2-
import logo from './logo.svg';
3-
import './App.css';
1+
import React from "react";
2+
3+
import Main from "./components/Main";
4+
import Sidebar from "./components/Sidebar";
45

56
function App() {
67
return (
7-
<div className="App">
8-
<header className="App-header">
9-
<img src={logo} className="App-logo" alt="logo" />
10-
<p>
11-
Edit <code>src/App.js</code> and save to reload.
12-
</p>
13-
<a
14-
className="App-link"
15-
href="https://reactjs.org"
16-
target="_blank"
17-
rel="noopener noreferrer"
18-
>
19-
Learn React
20-
</a>
21-
</header>
8+
<div className="flex antialiased min-h-screen bg-taskDo-gray h-screen">
9+
<Sidebar />
10+
<Main />
2211
</div>
2312
);
2413
}

‎src/components/Header.js

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import React from 'react';
2+
import { CgMathPlus } from 'react-icons/cg';
3+
const Header = () => {
4+
return (
5+
<div className="flex">
6+
<div className="flex flex-col flex-1 mt-5 mb-2">
7+
<div className="flex flex-col">
8+
<h2 className="w-full text-taskDo-backGray text-5xl font-semiBold leading-normal">
9+
hello Marjan
10+
</h2>
11+
<h6 className="w-full text-gray-500 text-2xl">
12+
Welcome to your task management desktop
13+
</h6>
14+
</div>
15+
<div className="flex mt-6 justify-between">
16+
<div className="flex">
17+
<div className="flex overflow-hidden">
18+
<img
19+
className="inline-block h-10 w-10 rounded-full text-white shadow-solid"
20+
src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
21+
alt="profile"
22+
/>
23+
<img
24+
className="-ml-3 inline-block h-10 w-10 rounded-full text-white shadow-solid"
25+
src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
26+
alt="profile"
27+
/>
28+
<img
29+
className="-ml-3 inline-block h-10 w-10 rounded-full text-white shadow-solid"
30+
src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80"
31+
alt="profile"
32+
/>
33+
<img
34+
className="-ml-3 inline-block h-10 w-10 rounded-full text-white shadow-solid"
35+
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
36+
alt="profile"
37+
/>
38+
<div className="-ml-3 flex items-center justify-center content-center inline-block h-10 w-10 rounded-full text-center text-white shadow-solid bg-indigo-500">
39+
<span>Me</span>
40+
</div>
41+
</div>
42+
43+
<button
44+
href="#"
45+
className="flex ml-10 mr-1 items-center justify-between p-1 bg-indigo-200 rounded-large"
46+
>
47+
<span className="text-gray-800 text-base mx-3">
48+
Invite people
49+
</span>
50+
<CgMathPlus className="w-8 h-8 text-indigo-500 mx-1" />
51+
</button>
52+
</div>
53+
54+
<div className="flex items-center space-x-6 mr-10">
55+
<div className="flex items-center">
56+
<span className="rounded-full w-2 h-2 bg-indigo-500"></span>
57+
<span className="ml-2 text-sm">High</span>
58+
</div>
59+
<div className="flex items-center">
60+
<span className="rounded-full w-2 h-2 bg-yellow-500"></span>
61+
<span className="ml-2 text-sm">Medium</span>
62+
</div>
63+
<div className="flex items-center">
64+
<span className="rounded-full w-2 h-2 bg-teal-400"></span>
65+
<span className="ml-2 text-sm">Less</span>
66+
</div>
67+
<div className="flex items-center">
68+
<span className="rounded-full w-2 h-2 bg-pink-400"></span>
69+
<span className="ml-2 text-sm">Default</span>
70+
</div>
71+
</div>
72+
</div>
73+
</div>
74+
</div>
75+
);
76+
};
77+
78+
export default Header;

‎src/components/ImageProfile.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from 'react';
2+
3+
const imageProfile = ({ users }) => {
4+
return users.map((image, i) => (
5+
<img
6+
key={i}
7+
className="-ml-3 inline-block h-8 w-8 rounded-full text-white shadow-solid"
8+
src={image}
9+
alt="profile"
10+
/>
11+
));
12+
};
13+
14+
export default imageProfile;

0 commit comments

Comments
 (0)