fix keys

joshfeinsilber · May 13, 2024 · d6d7485 · d6d7485
1 parent f6b3de3
commit d6d7485
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 19 deletions.
diff --git a/src/components/keyboard/Key.tsx b/src/components/keyboard/Key.tsx
@@ -4,6 +4,7 @@ import styled from 'styled-components'
 
 type Props = React.PropsWithChildren<{
   size: number
+  submit?: boolean
   color?: {
     bg?: string
     activeBg?: string
@@ -16,14 +17,15 @@ export const Key = (props: Props) => {
   return (
     <Container
       className={classNames(
-        `transition-75 flex h-14 cursor-pointer items-center justify-center rounded  font-semibold uppercase  transition-all `,
+        `transition-75 flex h-14 cursor-pointer items-center justify-center rounded font-semibold uppercase transition-all`,
         {
-          [`bg-${props.color?.bg}`]: props.color?.bg,
-          [`active:bg-${props.color?.activeBg}`]: props.color?.activeBg,
-          [`text-${props.color?.text}`]: props.color?.text,
-          [`text-black`]: !props.color?.text,
-          [`bg-slate-300`]: !props.color?.bg,
-          [`active:bg-slate-400`]: !props.color?.activeBg
+          'text-black': !props.submit,
+          'bg-slate-300': !props.submit,
+          'active:bg-slate-400': !props.submit,
+
+          'text-white': props.submit,
+          'bg-green-600': props.submit,
+          'active:bg-green-700': props.submit
         }
       )}
       style={{ flex: props.size }}

diff --git a/src/components/keyboard/Keyboard.tsx b/src/components/keyboard/Keyboard.tsx
@@ -44,7 +44,7 @@ export const Keyboard = (props: Props) => {
               <Key
                 key={'key-' + (key.action.value ?? key.action.type)}
                 size={key.action.type !== IKeyActionType.letter ? 1.5 : 1}
-                color={key.color}
+                submit={key.action.type === IKeyActionType.submit}
                 onClick={() => {
                   props.onKeyPress?.(key.action)
                   // @ts-ignore

diff --git a/src/components/keyboard/Keys.tsx b/src/components/keyboard/Keys.tsx
@@ -12,11 +12,6 @@ export interface IKeyAction {
 export interface IKey {
   content: string | React.ReactNode
   action: IKeyAction
-  color?: {
-    bg?: string
-    activeBg?: string
-    text?: string
-  }
 }
 
 const FIRST_ROW: IKey[] = ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'].map((letter) => ({
@@ -30,12 +25,7 @@ const SECOND_ROW: IKey[] = ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l'].map((le
 const THIRD_ROW: IKey[] = [
   {
     content: <span className="text-[0.75em] font-bold">ENTER</span>,
-    action: { type: IKeyActionType.submit },
-    color: {
-      bg: 'green-600',
-      activeBg: 'green-700',
-      text: 'white'
-    }
+    action: { type: IKeyActionType.submit }
   },
   ...['z', 'x', 'c', 'v', 'b', 'n', 'm'].map((letter) => ({
     content: letter,