Add fileinput, popover

src/renderer/components/input/index.tsx

@@ -5,6 +5,8 @@ import {
   TextInputProps as MantineTextInputProps,
   PasswordInput as MantinePasswordInput,
   PasswordInputProps as MantinePasswordInputProps,
+  FileInput as MantineFileInput,
+  FileInputProps as MantineFileInputProps,
 } from '@mantine/core';
 
 interface TextInputProps extends MantineTextInputProps {
@@ -15,6 +17,10 @@ interface PasswordInputProps extends MantinePasswordInputProps {
   children?: React.ReactNode;
 }
 
+interface FileInputProps extends MantineFileInputProps {
+  children?: React.ReactNode;
+}
+
 const StyledTextInput = styled(MantineTextInput)<TextInputProps>`
   &:focus,
   &:focus-within {
@@ -69,6 +75,23 @@ const StyledPasswordInput = styled(MantinePasswordInput)<PasswordInputProps>`
   }
 `;
 
+const StyledFileInput = styled(MantineFileInput)<FileInputProps>`
+  & .mantine-FileInput-input {
+    &:focus,
+    &:focus-within {
+      border-color: var(--primary-color);
+    }
+  }
+
+  & .mantine-FileInput-required {
+    color: var(--secondary-color);
+  }
+
+  & .mantine-FileInput-label {
+    font-family: var(--label-font-faimly);
+  }
+`;
+
 export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
   ({ children, ...props }: TextInputProps, ref) => {
     return (
@@ -89,6 +112,16 @@ export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
   }
 );
 
+export const FileInput = forwardRef<HTMLButtonElement, FileInputProps>(
+  ({ children, ...props }: FileInputProps, ref) => {
+    return (
+      <StyledFileInput ref={ref} spellCheck={false} {...props}>
+        {children}
+      </StyledFileInput>
+    );
+  }
+);
+
 TextInput.defaultProps = {
   children: null,
 };
@@ -96,3 +129,7 @@ TextInput.defaultProps = {
 PasswordInput.defaultProps = {
   children: null,
 };
+
+FileInput.defaultProps = {
+  children: null,
+};