Skip to content

Commit b677657

Browse files
na6imna6im
committed
init
1 parent b82b58e commit b677657

14 files changed

+752
-106
lines changed

‎README.md

Lines changed: 129 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,129 @@
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.
29-
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
51-
52-
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
53-
54-
### Making a Progressive Web App
55-
56-
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
57-
58-
### Advanced Configuration
59-
60-
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
61-
62-
### Deployment
63-
64-
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
65-
66-
### `yarn build` fails to minify
67-
68-
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
1+
<h1 align="center">React Awesome Floating Button</h1>
2+
3+
<p align="center">
4+
<a href="https://wuud.net">
5+
<img width="160" height="169" src="https://github.com/WuuD-Team/WuuD-Website/blob/master/favicon.ico?raw=true" alt="wuud">
6+
<img width="300" height="200" src="https://media1.giphy.com/media/iFmw13LV1hHhViPPWz/source.gif" alt="react">
7+
</a>
8+
</p>
9+
<p align="center">
10+
<a href="https://wuud.net">
11+
<img alt="GitHub Workflow Status" src="https://img.shields.io/github/workflow/status/na6im/awsome-floating-button/MasterDeployCI?label=Build">
12+
</a>
13+
<a href="https://wuud.net">
14+
<img alt="NPM" src="https://img.shields.io/npm/l/react?color=black">
15+
<img alt="GitHub package.json version" src="https://img.shields.io/github/package-json/v/na6im/awsome-floating-button?color=red&label=Version">
16+
<img alt="GitHub package.json dependency version" src="https://img.shields.io/github/package-json/dependency-version/na6im/awsome-floating-button/react">
17+
<img alt="GitHub last commit" src="https://img.shields.io/github/last-commit/na6im/awsome-floating-button?color=purple">
18+
<img alt="Website" src="https://img.shields.io/website?down_color=Red&label=Website&style=flat-square&up_color=Yellow&up_message=Active&url=https%3A%2F%2Fna6im.github.io%2Fawsome-floating-button%2F">
19+
</a>
20+
</p>
21+
22+
<br>
23+
<br>
24+
25+
### <h1 align="center">An Awesome & Unique Customizable Floating Button</h1>
26+
27+
<p align="center">
28+
Powered by The WuuD Team
29+
</p>
30+
31+
<p align="center" style="justify-content: space-between">
32+
<img width="300" height="150" src="https://user-images.githubusercontent.com/7850794/37059519-9a190c14-2185-11e8-894f-e82a99f45171.png" alt="pose">
33+
</p>
34+
35+
## Build & Run
36+
37+
#### Prerequisite
38+
39+
```bsh
40+
$ yarn i -g nodemon
41+
$ yarn i
42+
```
43+
44+
45+
#### Development Mode
46+
47+
```bsh
48+
$ yarn start
49+
$ yarn test
50+
```
51+
52+
#### Production Mode
53+
54+
```bsh
55+
$ yarn build
56+
$ yarn eject
57+
```
58+
59+
## Dev Team
60+
61+
<table align="center">
62+
<tbody>
63+
<tr>
64+
<td align="center" valign="top" width="11%">
65+
<a href="https://github.com/badjio">
66+
<img
67+
alt="Backend Developer"
68+
src="https://avatars2.githubusercontent.com/u/15873766?s=400&v=4"
69+
style="border-radius: 50px"
70+
width="100"
71+
height="100"
72+
/>
73+
<br />
74+
<br />
75+
<i>Moh Badjah</i>
76+
<br />
77+
</a>
78+
<i>Backend Developer</i>
79+
</td>
80+
<td align="center" valign="top" width="11%">
81+
<a href="https://github.com/na6im">
82+
<img
83+
alt="Web Developer"
84+
src="https://avatars1.githubusercontent.com/u/38627023?s=400&v=4"
85+
style="border-radius: 50px"
86+
width="100"
87+
height="100"
88+
/>
89+
<br />
90+
<br />
91+
<i>Nassim Amokrane</i>
92+
<br />
93+
</a>
94+
<i>Web Developer</i>
95+
</td>
96+
<td align="center" valign="top" width="11%">
97+
<a href="https://github.com/MedRedha">
98+
<img
99+
alt="Mobile Developer"
100+
src="https://github.com/medredha.png?s=75"
101+
style="border-radius: 50px"
102+
width="100"
103+
height="100"
104+
/>
105+
<br />
106+
<br />
107+
<i>Med Redha</i>
108+
<br />
109+
</a>
110+
<i>Mobile Developer</i>
111+
</td>
112+
</tr>
113+
</tbody>
114+
</table>
115+
116+
## Attribution
117+
118+
- React Pose powered by [Popmotion](https://popmotion.io/pose/)
119+
- Built & Developed from [React JS](https://reactjs.org/)
120+
121+
## Contributing to The Project
122+
123+
Contributing to the project is a piece of :cake:, read the [contributing guidelines](https://github.com/na6im/awsome-floating-button/blob/master/.github/CONTRIBUTING.md). You can discuss the project using the [issues section](https://github.com/na6im/awsome-floating-button/issues/new). To add a line create an issue and send a pull request, see [how to send a pull request](https://github.com/na6im/awsome-floating-button/blob/master/.github/CONTRIBUTING.md).
124+
125+
## License
126+
127+
The code is available under the [MIT](https://github.com/na6im/awsome-floating-button/blob/master/LICENSE) license.
128+
129+
###### [WuuD®](http://wuud.net/) - In code we trust -

‎package.json

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,27 @@
11
{
2+
"homepage": "https://na6im.github.io/react-floating-button-demo",
23
"name": "react-floating-button-demo",
34
"version": "0.1.0",
45
"private": true,
56
"dependencies": {
67
"@testing-library/jest-dom": "^4.2.4",
78
"@testing-library/react": "^9.3.2",
89
"@testing-library/user-event": "^7.1.2",
10+
"prettier": "^2.0.5",
911
"react": "^16.13.1",
1012
"react-dom": "^16.13.1",
11-
"react-scripts": "3.4.1"
13+
"react-floating-button": "^1.0.4",
14+
"react-pose": "^4.0.10",
15+
"react-scripts": "3.4.1",
16+
"styled-components": "^5.1.0"
1217
},
1318
"scripts": {
1419
"start": "react-scripts start",
1520
"build": "react-scripts build",
1621
"test": "react-scripts test",
17-
"eject": "react-scripts eject"
22+
"eject": "react-scripts eject",
23+
"predeploy": "npm run build",
24+
"deploy": "gh-pages -d build"
1825
},
1926
"eslintConfig": {
2027
"extends": "react-app"
@@ -30,5 +37,9 @@
3037
"last 1 firefox version",
3138
"last 1 safari version"
3239
]
40+
},
41+
"devDependencies": {
42+
"gh-pages": "^2.2.0",
43+
"prop-types": "^15.7.2"
3344
}
3445
}

‎src/App.js

Lines changed: 129 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,136 @@
1-
import React from 'react';
2-
import logo from './logo.svg';
3-
import './App.css';
1+
import React from "react";
2+
import "./App.css";
3+
import FloatingButton from "react-floating-button";
4+
import Item from "react-floating-button";
5+
import logo from "./assets/DOWNLOAD.svg";
6+
import logo2 from "./assets/FORWARD 2.svg";
7+
import logo3 from "./assets/GRID.svg";
8+
import logo4 from "./assets/GIFT.svg";
9+
import logo5 from "./assets/HOME.svg";
10+
import logo6 from "./assets/MAP.svg";
11+
import logo7 from "./assets/MAP PIN.svg";
12+
import logo8 from "./assets/MUSIC.svg";
413

514
function App() {
615
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"
16+
<div className="App-header">
17+
<FloatingButton
18+
right={true}
19+
top={true}
20+
height={80}
21+
backgroundColor={"blue"}
22+
color={"black"}
1823
>
19-
Learn React
20-
</a>
21-
</header>
22-
</div>
24+
<Item
25+
imgSrc={logo}
26+
onClick={() => {
27+
console.log("logo");
28+
}}
29+
/>
30+
<Item
31+
imgSrc={logo2}
32+
onClick={() => {
33+
console.log("logo2");
34+
}}
35+
/>
36+
<Item
37+
imgSrc={logo3}
38+
onClick={() => {
39+
console.log("logo3");
40+
}}
41+
/>
42+
<Item
43+
imgSrc={logo4}
44+
onClick={() => {
45+
console.log("logo4");
46+
}}
47+
/>
48+
<Item
49+
imgSrc={logo5}
50+
onClick={() => {
51+
console.log("logo5");
52+
}}
53+
/>
54+
<Item
55+
imgSrc={logo6}
56+
onClick={() => {
57+
console.log("logo6");
58+
}}
59+
/>
60+
<Item
61+
imgSrc={logo7}
62+
onClick={() => {
63+
console.log("logo7");
64+
}}
65+
/>
66+
<Item
67+
imgSrc={logo8}
68+
onClick={() => {
69+
console.log("logo8");
70+
}}
71+
/>
72+
</FloatingButton>
73+
<FloatingButton right={false} top={true} height={30}>
74+
<Item
75+
imgSrc={logo}
76+
onClick={() => {
77+
console.log("logo");
78+
}}
79+
/>
80+
<Item
81+
imgSrc={logo2}
82+
onClick={() => {
83+
console.log("logo2");
84+
}}
85+
/>
86+
<Item
87+
imgSrc={logo3}
88+
onClick={() => {
89+
console.log("logo3");
90+
}}
91+
/>
92+
</FloatingButton>
93+
<FloatingButton right={false} top={false} height={200}>
94+
<Item
95+
imgSrc={logo}
96+
onClick={() => {
97+
console.log("logo");
98+
}}
99+
/>
100+
<Item
101+
imgSrc={logo2}
102+
onClick={() => {
103+
console.log("logo2");
104+
}}
105+
/>
106+
<Item
107+
imgSrc={logo3}
108+
onClick={() => {
109+
console.log("logo3");
110+
}}
111+
/>
112+
<Item
113+
imgSrc={logo4}
114+
onClick={() => {
115+
console.log("logo4");
116+
}}
117+
/>
118+
<Item
119+
imgSrc={logo5}
120+
onClick={() => {
121+
console.log("logo5");
122+
}}
123+
/>
124+
</FloatingButton>
125+
<FloatingButton right={true} top={false} height={100}>
126+
<Item
127+
imgSrc={logo}
128+
onClick={() => {
129+
console.log("logo");
130+
}}
131+
/>
132+
</FloatingButton>
133+
</div>
23134
);
24135
}
25136

0 commit comments

Comments
 (0)