Enahnce the numeric input to support append element

Author: dantovska

redisinsight/ui/src/components/base/inputs/NumericInput.tsx

@@ -1,9 +1,23 @@
 import React, { ComponentProps } from 'react'
-
 import { NumericInput as RedisNumericInput } from '@redis-ui/components'
+import { InputAppend } from './numeric-input.styles'
 
-export type RedisNumericInputProps = ComponentProps<typeof RedisNumericInput>
+export type RedisNumericInputProps = ComponentProps<
+  typeof RedisNumericInput
+> & {
+  append?: React.ReactNode
+}
 
-export default function NumericInput(props: RedisNumericInputProps) {
-  return <RedisNumericInput {...props} />
+export default function NumericInput({
+  append,
+  ...props
+}: RedisNumericInputProps) {
+  return append ? (
+    <InputAppend>
+      <RedisNumericInput {...props} />
+      {append}
+    </InputAppend>
+  ) : (
+    <RedisNumericInput {...props} />
+  )
 }

redisinsight/ui/src/components/base/inputs/numeric-input.styles.ts

@@ -0,0 +1,11 @@
+// styles.scss.ts
+import styled from 'styled-components'
+
+export const InputAppend = styled.div`
+  display: flex;
+  align-items: center;
+  align-content: center;
+  gap: 130px;
+  padding-left: 10px;
+  padding-bottom: 3px;
+`