Added ElementToggle component

A segmented control for selecting an element

components/ElementToggle/index.scss

@@ -0,0 +1,59 @@
+.ToggleGroup {
+    $height: 36px;
+
+    border: 1px solid rgba(0, 0, 0, 0.14);
+    border-radius: $height;
+    display: flex;
+    height: $height;
+    gap: $unit / 4;
+    padding: $unit / 2;
+
+    .ToggleItem {
+        background: white;
+        border: none;
+        border-radius: 18px;
+        color: $grey-40;
+        flex-grow: 1;
+        font-size: $font-regular;
+        padding: ($unit) $unit * 2;
+
+        &:hover {
+            cursor: pointer;
+        }
+
+        &:hover, &[data-state="on"] {
+            background:$grey-80;
+            color: $grey-00;
+
+            &.fire {
+                background: $fire-bg-light;
+                color: $fire-text-dark;
+            }
+
+            &.water {
+                background: $water-bg-light;
+                color: $water-text-dark;
+            }
+
+            &.earth {
+                background: $earth-bg-light;
+                color: $earth-text-dark;
+            }
+
+            &.wind {
+                background: $wind-bg-light;
+                color: $wind-text-dark;
+            }
+
+            &.dark {
+                background: $dark-bg-light;
+                color: $dark-text-dark;
+            }
+
+            &.light {
+                background: $light-bg-light;
+                color: $light-text-dark;
+            }
+        }
+    }
+}

components/ElementToggle/index.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import * as ToggleGroup from '@radix-ui/react-toggle-group'
+
+import './index.scss'
+
+interface Props {
+    currentElement: number
+}
+
+const ElementToggle = (props: Props) => {
+    return (
+        <ToggleGroup.Root className="ToggleGroup" type="single" defaultValue={`${props.currentElement}`} aria-label="Element">
+            <ToggleGroup.Item className="ToggleItem" value="0" aria-label="null">
+                Null
+            </ToggleGroup.Item>
+            <ToggleGroup.Item className="ToggleItem wind" value="1" aria-label="wind">
+                Wind
+            </ToggleGroup.Item>
+            <ToggleGroup.Item className="ToggleItem fire" value="2" aria-label="fire">
+                Fire
+            </ToggleGroup.Item>
+            <ToggleGroup.Item className="ToggleItem water" value="3" aria-label="water">
+                Water
+            </ToggleGroup.Item>
+            <ToggleGroup.Item className="ToggleItem earth" value="4" aria-label="earth">
+                Earth
+            </ToggleGroup.Item>
+            <ToggleGroup.Item className="ToggleItem dark" value="5" aria-label="dark">
+                Dark
+            </ToggleGroup.Item>
+            <ToggleGroup.Item className="ToggleItem light" value="6" aria-label="light">
+                Light
+            </ToggleGroup.Item>
+        </ToggleGroup.Root>
+    )
+}
+
+export default ElementToggle