This repository has been archived by the owner on Oct 19, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
/
Website.jsx
58 lines (55 loc) · 1.93 KB
/
Website.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
/* @flow */
import React, { Component } from "react";
import { Flipper, Front, Back } from "../components/";
require ("./Website.less");
export default class Website extends Component {
state = {
isFlipped: false
};
flip = () => {
this.setState ({ isFlipped: !this.state.isFlipped });
};
fork = () => {
window.location = "https://github.com/VisionistInc/react-flipper";
};
render () {
return (
<div className="content">
<div className="title">
React-Flipper
</div>
<div className="description">
React "flipper" component that just gets it
</div>
<div className="example">
<div className="flipper-containers">
<Flipper isFlipped={this.state.isFlipped} orientation="horizontal">
<Front style={{ minHeight: 250, background: "#19489E" }}>
I flip horizontally . . .
</Front>
<Back style={{ background: "#9E1919", minHeight: 400 }} />
</Flipper>
<Flipper isFlipped={this.state.isFlipped} orientation="vertical">
<Front style={{ minHeight: 250, background: "#19489E" }}>
. . . and I flip vertically
</Front>
<Back style={{ background: "#9E1919", minHeight: 325 }} />
</Flipper>
</div>
<div className="flipper-toggle">
<button onClick={this.flip}>Click me to flip!</button>
</div>
</div>
<div className="links">
{/* eslint-disable jsx-a11y/no-static-element-interactions */}
<i className="fa fa-github" onClick={this.fork} />
{/* eslint-enable jsx-a11y/no-static-element-interactions */}
</div>
<div className="footer">
<i className="fa fa-code" /> with <i className="fa fa-heart" /> by
<a href="http://www.visionistinc.com">Visionist, Inc.</a>
</div>
</div>
);
}
}