/
Intro.js
99 lines (91 loc) 路 2.39 KB
/
Intro.js
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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
import React, { Suspense } from 'react'
import styled from 'styled-components'
import { Link, Route, Switch, useRouteMatch } from 'react-router-dom'
import Label from './components/Label'
import * as demos from '../demos'
import { Page as PageImpl } from '../styles'
const Page = styled(PageImpl)`
padding: 20px;
& > h1 {
position: absolute;
top: 70px;
left: 60px;
}
& > a {
position: absolute;
bottom: 60px;
right: 60px;
font-size: 1.2em;
}
`
const defaultComponent = 'Refraction'
const visibleComponents = Object.entries(demos)
//.filter(([name, item]) => !item.dev)
.reduce((acc, [name, item]) => ({ ...acc, [name]: item }), {})
export default function Intro() {
let match = useRouteMatch('/demo/:name')
let { bright } = visibleComponents[match ? match.params.name : defaultComponent]
return (
<Page>
<Suspense fallback={null}>
<Switch>
<Route exact path="/" component={visibleComponents.Refraction.Component} />
<Route
exact
path="/demo/:name"
render={({ match }) => {
const Component = visibleComponents[match.params.name].Component
return <Component />
}}
/>
</Switch>
</Suspense>
<Demos />
<h1 style={{ color: bright ? '#2c2d31' : 'white' }}>
three
<br />
zero
<br />
seven.
</h1>
<a href="https://github.com/drcmda/react-three-fiber" style={{ color: bright ? '#2c2d31' : 'white' }}>
Github
</a>
</Page>
)
}
function Demos() {
let match = useRouteMatch('/demo/:name')
let { bright } = visibleComponents[match ? match.params.name : defaultComponent]
return (
<DemoPanel>
{Object.entries(visibleComponents).map(([name, item]) => (
<Link key={name} to={`/demo/${name}`}>
<Spot
style={{
background:
(!match && name === defaultComponent) || (match && match.params.name === name)
? 'salmon'
: bright
? '#2c2d31'
: 'white',
}}
/>
</Link>
))}
</DemoPanel>
)
}
const DemoPanel = styled.div`
position: absolute;
bottom: 50px;
left: 50px;
max-width: 250px;
`
const Spot = styled.div`
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
margin: 8px;
`