How to use semantic-ui-react - 10 common examples

const playerHeight = 90;
  const containerHeight = `calc(100vh - ${topbarHeight}px - ${playerHeight}px)`;

  return (
    <div>
      
        
          
        
        
          
        
      

      
        

        
          {/*  */}</div>

const UploadExistingKeys = props => {
  const { handleSubmit, pristine, submitting } = props;
  return (
     
      <h2>Upload Existing Keys</h2>
      <form>
        
        
          <label>Concord ID</label>
            
        

        {/* 
            Styling File Inputs
            http://jsfiddle.net/Dr_Dev/2nu1ngk5/ 
        */}

        
          <label>Public Key: </label>
            </form>

const CreatePlainSecret = props => {
  const { handleSubmit, pristine, submitting } = props;
  return (
    
      <h2>Create Plain Secret</h2>
      <form>
        
          <label>Concord ID</label>
          
        
        
          <label>Secret Phrase</label>
          
        
        {/* <div>
          <label>Generate Password</label>
            </div></form>

const CreateNewKeyPair = props => {
    const { handleSubmit, pristine, submitting } = props;
    return (
        
            <h2>Create New Key Pair</h2>
            <form>

                
                    <label>Concord ID</label>
                    
                
                {/* <div>
                <label>Generate Password</label>
                
            </div> */}

                {/* <div>
                <label>Store password</label>
                </div></form>

box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
`
//
export const SidebarLogoContainer = styled.a`
  background-color: ${props => props.theme.primaryColorDark};
  padding: 25px;
  text-align: center;
  ${media.md`
    padding: 25px;
  `};
	${media.lg`
    padding: 20px;
  `};
`
// Color: ${props => props.theme.primaryColorText}!important;
export const SidebarItem = styled(Menu.Item)``
//
export const SidebarLogoutItem = SidebarItem.extend`
  cursor: pointer;
  border-top: 1px solid rgba(34, 36, 38, 0.15) !important;
`

<header>
            
            {SITE_NAME} in Action
          </header>
        
      
    

    
      {/* Desktop */}
      
        
      

      {/* Mobile */}

import styled, {css} from 'styled-components'
import {Dimmer, Sidebar} from 'semantic-ui-react'

export const SidebarSemanticPushable = Sidebar.Pushable
export const SidebarSemanticPusherStyled = styled(Sidebar.Pusher)`
	height: 100%;
	-webkit-overflow-scrolling: touch;
	${({isloggedin, ismobile}) => {
		// using `ismobile` attr instead of `media` util is much smoother
		return (
			isloggedin &&
			!ismobile &&
			css`
				max-width: calc(100% - 150px);
				`
		)
	}};
`

export const PageLayout = styled.div`

<header size="small">
            Start learning on {SITE_NAME} today!
          </header>
          
        
      
    

    {/* Mobile */}
    
      
        <img size="large" src="/img/challenge/r-correct-c.gif">
      
    
    
      
        
          <header size="large">
            
              "So, are you ready to learn?"
              
                <i>—{MASCOT_NAME_LONG}</i>
              
            
          </header>
          <header size="small">
            Start learning on {SITE_NAME} today!
          </header>

import React from 'react'

import { Grid, Image } from 'semantic-ui-react'

import ArrowRight from '../../images/icon-arrow-right.svg'
import ArrowBlkImage from '../../images/icon-arrow-blk.svg'

import styled from 'styled-components'
import Balance from '../common/Balance'

// TODO: Refactor common code with KeyListItem
const CustomGridRow = styled(Grid.Row)`
   &&& {
      margin-left: 20px;
      border-left: 4px solid #f8f8f8;
      cursor: pointer;

      &.wide {
         margin-left: 0px;
         border-left: 0px;
      }

      .main-row-title {
         font-weight: 600;
         width: auto;
         padding-right: 0px;
         flex: 1;
         word-break: break-all;

test('after login, navlink change', () => {
    let wrapperWithId = shallow()
    let index = 0
    wrapperWithId.find(Menu.Item).forEach(l => {
      expect(l.props().to).toMatch(authRoutes[index++])
    })
  })
})