Added SegmentedControl to New page

src/components/PartySegmentedControl/index.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import SegmentedControl from '~components/SegmentedControl'
+import Segment from '~components/Segment'
+
+interface Props {
+    selectedTab: string
+    onClick: (event: React.ChangeEvent<HTMLInputElement>) => void
+}
+
+const PartySegmentedControl = (props: Props) => {
+    return (
+        <div>
+            <SegmentedControl>
+                <Segment
+                    groupName="grid"
+                    name="class"
+                    selected={props.selectedTab === 'class'}
+                    onClick={props.onClick}
+                >Class</Segment>
+                <Segment 
+                    groupName="grid"
+                    name="characters"
+                    selected={props.selectedTab === 'characters'}
+                    onClick={props.onClick}
+                >Characters</Segment>
+
+                <Segment 
+                    groupName="grid"
+                    name="weapons"
+                    selected={props.selectedTab === 'weapons'}
+                    onClick={props.onClick}
+                >Weapons</Segment>
+
+                <Segment 
+                    groupName="grid"
+                    name="summons"
+                    selected={props.selectedTab === 'summons'}
+                    onClick={props.onClick}
+                >Summons</Segment>
+            </SegmentedControl>
+        </div>
+    )
+}
+
+export default PartySegmentedControl

src/components/Segment/index.css

@@ -0,0 +1,101 @@
+.Segment {
+    border-radius: 4px;
+    color: #888;
+    cursor: pointer;
+    font-size: 16px;
+    font-weight: 500;
+    min-width: 100px;
+}
+
+.Segment > input {
+    display: none;
+}
+
+.Segment > input + label {
+
+}
+
+.Segment > input:checked + label {
+    background: #61B3FF;
+    color: white;
+}
+
+.Segment > label {
+    display: block;
+    text-align: center;
+    white-space: nowrap;
+    overflow: hidden;
+    padding: 8px 12px;
+    text-overflow: ellipsis;
+    cursor: pointer;
+}
+
+.Segment > label:before {
+    background: #fff;
+}
+
+/* 
+.flight-types
+  +segmented-controls(3, 112px, 0px, #3395DE)
+  margin: 0 auto
+  font-size: 12px
+  border: 1px solid #fff
+  border-radius: 3px
+  color: #fff
+  label
+    padding: 6px 3px
+    transition: color 250ms cubic-bezier(0,.95,.38,.98)
+    &:before
+      background: #fff
+      transition: all 250ms cubic-bezier(0,.95,.38,.98)
+    &:not(:last-child)
+      border-right: 1px solid #fff */
+/* 
+ 
+  z-index: 1
+  > input
+    display: none
+    &:checked + label
+      color: $active
+    @for $i from 1 through $amount
+      $index: $i - 1
+      &:nth-of-type(#{$i}):checked
+        ~ label:last-of-type:before
+          transform: translateX(calc(#{100 * $index}% + #{$_margin * $index}))
+  label
+    flex: 1
+    text-align: center
+    white-space: nowrap
+    overflow: hidden
+    text-overflow: ellipsis
+    cursor: pointer
+    // we use the last label's pseudo element as the active state
+    // to eliminate the need for an arbitrary element
+    &:last-of-type:before
+      content: ""
+      display: block
+      max-width: calc(#{$_width} - #{$_margin})
+      margin: $margin
+      position: absolute
+      top: 0
+      right: 0
+      bottom: 0
+      left: 0
+      z-index: -1
+      transform: translateX(0)
+
+.flight-types
+  +segmented-controls(3, 112px, 0px, #3395DE)
+  margin: 0 auto
+  font-size: 12px
+  border: 1px solid #fff
+  border-radius: 3px
+  color: #fff
+  label
+    padding: 6px 3px
+    transition: color 250ms cubic-bezier(0,.95,.38,.98)
+    &:before
+      background: #fff
+      transition: all 250ms cubic-bezier(0,.95,.38,.98)
+    &:not(:last-child)
+      border-right: 1px solid #fff */

src/components/Segment/index.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+
+import './index.css'
+
+interface Props {
+    groupName: string
+    name: string
+    selected: boolean
+    children: string
+    onClick: (event: React.ChangeEvent<HTMLInputElement>) => void
+}
+
+const Segment: React.FC<Props> = (props: Props) => {
+    
+
+    return (
+        <div className="Segment">
+            <input
+                name={props.groupName}
+                id={props.name}
+                value={props.name}
+                type="radio"
+                checked={props.selected}
+                onChange={props.onClick}
+            />
+            <label htmlFor={props.name}>
+                {props.children}
+            </label>
+        </div>
+    )
+}
+
+export default Segment

src/components/SegmentedControl/index.css

@@ -0,0 +1,15 @@
+.SegmentedControlWrapper {
+    display: flex;
+    justify-content: center;
+}
+
+.SegmentedControl {
+    background: white;
+    border-radius: 8px;
+    display: inline-flex;
+    position: relative;
+    user-select: none;
+    overflow: hidden;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    z-index: 1;
+}

src/components/SegmentedControl/index.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+import './index.css'
+
+interface Props {}
+
+const SegmentedControl: React.FC<Props> = ({ children }) => {
+    return (
+        <div className="SegmentedControlWrapper">
+            <div className="SegmentedControl">
+                {children}
+            </div>
+        </div>
+    )
+}
+
+export default SegmentedControl

src/routes/New/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { RouteComponentProps } from 'react-router-dom'
 import { useCookies } from 'react-cookie'
 import WeaponGrid from '~components/WeaponGrid'
@@ -8,13 +8,8 @@ interface NewProps extends RouteComponentProps<Props> {}
 
 const New: React.FC<NewProps> = (props: NewProps) => {
     const [cookies, setCookie] = useCookies(['user'])
-
+    const [selectedTab, setSelectedTab] = useState('weapons')
-    function callback(path: string) {
+    const [grid, setGrid] = useState<JSX.Element>(
-        // This is scuffed, how do we do this natively?
-        window.history.replaceState(null, `Grid Tool`, `${path}`)
-    }
-
-    return (
         <WeaponGrid 
             userId={cookies.user ? cookies.user.user_id : ''} 
             editable={true} 
@@ -22,6 +17,25 @@ const New: React.FC<NewProps> = (props: NewProps) => {
             pushHistory={callback} 
         />
     )
+
+    function callback(path: string) {
+        // This is scuffed, how do we do this natively?
+        window.history.replaceState(null, `Grid Tool`, `${path}`)
+    }
+
+    function segmentClicked(event: React.ChangeEvent<HTMLInputElement>) {
+    }
+
+    return (
+        <div id="Content">
+            <PartySegmentedControl
+                selectedTab={selectedTab}
+                onClick={segmentClicked}
+            />
+            
+            {grid}
+        </div>
+    )
 }
 
 export default New