TerribleDev/minbin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tabs

Browse Source
This commit is contained in:
Tommy Parnell
2017-12-18 00:18:33 -05:00
parent 5617ae1dbf
commit 2621fff7a5
5 changed files with 61 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
dist/index.html vendored
View File

@@ -3,6 +3,8 @@
<head>
<meta charset="UTF-8" />
<title>MinBin!</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.9.0/themes/prism.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.9.0/plugins/line-numbers/prism-line-numbers.min.css"/>
</head>
<body>
<div id="example"></div>
@@ -10,6 +12,9 @@
<!-- Dependencies -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.production.min.js"></script>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.9.0/prism.min.js"></script>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.9.0/components/prism-csharp.min.js"></script>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.9.0/plugins/line-numbers/prism-line-numbers.min.js"></script>
<!-- Main -->
<script src="./bundle.js"></script>

8
index.html
View File

@@ -3,6 +3,8 @@
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.9.0/themes/prism.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.9.0/plugins/line-numbers/prism-line-numbers.min.css"/>
</head>
<body>
<div id="example"></div>
@@ -10,8 +12,12 @@
<!-- Dependencies -->
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.9.0/prism.min.js"></script>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.9.0/components/prism-csharp.min.js"></script>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.9.0/plugins/line-numbers/prism-line-numbers.min.js"></script>
<!-- Main -->
<script src="./dist/bundle.js"></script>
</body>
</html>

41
src/components/Tab1.tsx Normal file
View File

@@ -0,0 +1,41 @@
import * as React from "react";
import { Row, Col, Card, CardText } from "reactstrap";
let exampleText = `
void Main()
{
var next5Friday13 = DateTime.Today
.Recurse(a=>a.AddDays(1))
.Where(a=>a.Day == 13 && a.DayOfWeek == DayOfWeek.Friday).Take(5);
}
public static class Extension
{
public static IEnumerable<T> Recurse<T>(this T obj, Func<T,T> action)
{
var local = obj;
while(true)
{
local = action(local);
yield return local;
}
}
}
`
export class Tab1 extends React.Component<any, any>{
render(){
return(
<Row>
<Col sm="12">
<Card style={{ paddingTop: "10px" }}>
<pre className='line-numbers'>
<code className="language-csharp">
{exampleText}
</code>
</pre>
</Card>
</Col>
</Row>);
}
}

28
src/components/TabNav.tsx
View File

@@ -1,4 +1,5 @@
import * as React from "react";
import { Tab1 } from './Tab1';
import * as React from 'react';
import { TabContent, TabPane, Nav, NavItem, NavLink, Card, Button, CardTitle, CardText, Row, Col, NavbarBrand } from 'reactstrap';
export class TabNav extends React.Component<any, any> {
@@ -27,7 +28,7 @@ export class TabNav extends React.Component<any, any> {
className={this.state.activeTab === '1' ? 'active': ''}
onClick={() => { this.toggle('1'); }}
>
Tab1
View
</NavLink>
</NavItem>
<NavItem>
@@ -35,33 +36,18 @@ export class TabNav extends React.Component<any, any> {
className={this.state.activeTab === '2' ? 'active': ''}
onClick={() => { this.toggle('2'); }}
>
Moar Tabs
Edit
</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={this.state.activeTab}>
<TabPane tabId="1">
<Row>
<Col sm="12">
<h4>Tab 1 Contents</h4>
</Col>
</Row>
<Tab1 />
</TabPane>
<TabPane tabId="2">
<Row>
<Col sm="6">
<Card>
<CardTitle>Special Title Treatment</CardTitle>
<CardText>With supporting text below as a natural lead-in to additional content.</CardText>
<Button>Go somewhere</Button>
</Card>
</Col>
<Col sm="6">
<Card>
<CardTitle>Special Title Treatment</CardTitle>
<CardText>With supporting text below as a natural lead-in to additional content.</CardText>
<Button>Go somewhere</Button>
</Card>
<Col sm="12">
<h4> Comming Soon</h4>
</Col>
</Row>
</TabPane>

3
src/index.tsx
View File

@@ -9,7 +9,6 @@ import { LoginContainer } from './containers/Login'
import { createStore } from 'redux'
import {MainReducer} from './reducers/MainReducer'
import { Provider } from 'react-redux'
BoostrapFirebase();
let store = createStore(MainReducer)
const App = () => (
@@ -18,8 +17,8 @@ const App = () => (
<LoginContainer/>
</NavBar>
<TabNav />
<Hello compiler="yodawg" framework="React" />
</div>
);
ReactDOM.render(