Skip to content

Instantly share code, notes, and snippets.

View wongni's full-sized avatar

Wonkun Kim wongni

  • Schneider Electric
  • Raleigh, NC, USA
View GitHub Profile
import React from 'react'
import styles from './ViewerTemplate.scss'
import classNames from 'classnames/bind'
const cx = classNames.bind(styles)
const ViewerTemplate = ({ viewer, spaceNavigator }) => {
return (
<div className={cx('viewer-template')}>
<header>
@import 'utils';
.viewer-template {
header {
background: $oc-gray-9;
height: 5rem;
color: white;
padding: 1rem;
display: flex;
import React, { Component } from 'react'
import ViewerTemplate from './components/ViewerTemplate'
class App extends Component {
render() {
return (
<div>
<ViewerTemplate />
</div>
)
.space-navigator {
.end {
position: absolute;
top: 0;
height: 100%;
display: flex;
align-items: center;
color: white;
&.left {
padding: 1rem;
import React from 'react'
import styles from './SpaceNavigator.scss'
import classNames from 'classnames/bind'
import LeftIcon from 'react-icons/lib/md/chevron-left'
import RightIcon from 'react-icons/lib/md/chevron-right'
const cx = classNames.bind(styles)
const SpaceNavigator = ({ onPrev, onNext }) => {
return (
import React, { Component } from 'react'
import ViewerTemplate from './components/ViewerTemplate'
import SpaceNavigator from './components/SpaceNavigator'
class App extends Component {
render() {
return (
<div>
<ViewerTemplate spaceNavigator={<SpaceNavigator />}/>
</div>
@wongni
wongni / App-4.js
Last active January 12, 2018 06:17
import React, { Component } from 'react'
import ViewerTemplate from './components/ViewerTemplate'
import SpaceNavigator from './components/SpaceNavigator'
import Viewer from './components/Viewer'
class App extends Component {
render() {
return (
<div>
<ViewerTemplate
@import 'utils';
.viewer {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
img {
display: block;
import React from 'react'
import styles from './Viewer.scss'
import classNames from 'classnames/bind'
const cx = classNames.bind(styles)
const Viewer = ({ mediaType, url, loading }) => {
return (
<div className={cx('viewer')}>
{(
import React from 'react'
import styles from './Viewer.scss'
import classNames from 'classnames/bind'
const cx = classNames.bind(styles)
const Viewer = ({ mediaType, url, loading }) => {
return (
<div className={cx('viewer')}>
{(