From 1c09a5cc9c6ef587f41aa93abfcb243e772c709e Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sun, 16 Apr 2023 03:49:21 -0700
Subject: [PATCH] Added RepSegment

This is a Character, Weapon or Summon rep wrapped with an input and label for use in a SegmentedControl
---
 components/reps/RepSegment/index.scss | 62 +++++++++++++++++++++++++++
 components/reps/RepSegment/index.tsx  | 34 +++++++++++++++
 2 files changed, 96 insertions(+)
 create mode 100644 components/reps/RepSegment/index.scss
 create mode 100644 components/reps/RepSegment/index.tsx

diff --git a/components/reps/RepSegment/index.scss b/components/reps/RepSegment/index.scss
new file mode 100644
index 00000000..5af14e21
--- /dev/null
+++ b/components/reps/RepSegment/index.scss
@@ -0,0 +1,62 @@
+.RepSegment {
+  border-radius: $card-corner;
+  color: $grey-55;
+  cursor: pointer;
+  font-size: 1.4rem;
+  font-weight: $normal;
+  min-width: 100px;
+
+  &:hover label {
+    background: var(--button-bg);
+    color: var(--text-primary);
+
+    .Wrapper .Rep {
+      opacity: 1;
+    }
+  }
+
+  & input {
+    display: none;
+
+    &:checked + label {
+      background: var(--button-bg);
+      color: var(--text-primary);
+
+      .Rep {
+        opacity: 1;
+      }
+    }
+  }
+
+  & label {
+    border-radius: $card-corner;
+    display: block;
+    text-align: center;
+    white-space: nowrap;
+    overflow: hidden;
+    padding: $unit;
+    padding-bottom: $unit * 1.5;
+    text-overflow: ellipsis;
+    cursor: pointer;
+
+    &:before {
+      background: #fff;
+    }
+
+    .Wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: $unit;
+
+      .Rep {
+        transition: $duration-opacity-fade opacity ease-in;
+        opacity: 0.5;
+      }
+    }
+  }
+
+  @include breakpoint(phone) {
+    min-width: initial;
+    width: 100%;
+  }
+}
diff --git a/components/reps/RepSegment/index.tsx b/components/reps/RepSegment/index.tsx
new file mode 100644
index 00000000..dbe473f4
--- /dev/null
+++ b/components/reps/RepSegment/index.tsx
@@ -0,0 +1,34 @@
+import React, { PropsWithChildren } from 'react'
+
+import './index.scss'
+
+interface Props {
+  controlGroup: string
+  inputName: string
+  name: string
+  selected: boolean
+  onClick: (event: React.ChangeEvent<HTMLInputElement>) => void
+}
+
+const RepSegment = ({ children, ...props }: PropsWithChildren<Props>) => {
+  return (
+    <div className="RepSegment">
+      <input
+        name={props.controlGroup}
+        id={props.inputName}
+        value={props.inputName}
+        type="radio"
+        checked={props.selected}
+        onChange={props.onClick}
+      />
+      <label htmlFor={props.inputName}>
+        <div className="Wrapper">
+          {children}
+          <div className="Title">{props.name}</div>
+        </div>
+      </label>
+    </div>
+  )
+}
+
+export default RepSegment