add UI for uploading images

Author: AnthonyMarin

src/components/settings/RelayInfoSettings.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState} from 'react';
 import { Form, Input, Select, Tooltip } from 'antd';
 import { QuestionCircleOutlined, InfoCircleOutlined, UserOutlined, KeyOutlined, UploadOutlined } from '@ant-design/icons';
 import useGenericSettings from '@app/hooks/useGenericSettings';
@@ -10,7 +10,7 @@ const { TextArea } = Input;
 
 const RelayInfoSettings: React.FC = () => {
   const { settings, loading, error, fetchSettings, updateSettings, saveSettings } = useGenericSettings('relay_info');
-
+  const [image, setImage] = useState<string  | null>(null); 
   const [form] = Form.useForm();
 
   // Update form values when settings change
@@ -25,6 +25,10 @@ const RelayInfoSettings: React.FC = () => {
     updateSettings(changedValues);
   };
 
+  const onUploadIcon = (url: string) => { // use as onUploadIcon prop in Upload Component
+    setImage(url);
+  };
+
   // Common NIPs that relays might support
   const nipOptions = [
     { value: 1, label: 'NIP-01: Basic protocol flow' },
@@ -86,6 +90,9 @@ const RelayInfoSettings: React.FC = () => {
           <S.InputFieldWithPrefix
             suffix={<S.UploadButton size='small' aria-label='Upload Relay Icon' icon={<UploadOutlined />}  > Upload Relay Icon</S.UploadButton>}
           />
+          {image && (
+            <S.UploadedImageWrapper><img src={image} alt="" /></S.UploadedImageWrapper>
+          )}
         </Form.Item>
         <Form.Item
           name="relaydescription"

src/components/settings/Settings.styles.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { Input, InputNumber, Select, Button} from 'antd';
+import { Input, InputNumber, Select, Button } from 'antd';
 
 export const InputField = styled(Input)`
   border-radius: 7px !important;
@@ -56,16 +56,33 @@ export const InputNumberField = styled(InputNumber)`
     border-color: var(--ant-primary-5) !important;
     box-shadow: 0 0 0 2px var(--ant-primary-color-outline) !important;
   }
-  .anticon-up.ant-input-number-handler-up-inner, .anticon-down.ant-input-number-handler-down-inner {
+  .anticon-up.ant-input-number-handler-up-inner,
+  .anticon-down.ant-input-number-handler-down-inner {
     color: var(--text-main-color) !important;
-  opacity: 0.7 !important;}
+    opacity: 0.7 !important;
+  }
 `;
 
 export const SelectField = styled(Select)`
-  .ant-select-arrow, .ant-select-clear{
+  .ant-select-arrow,
+  .ant-select-clear {
     color: var(--text-main-color) !important;
   }
-`
+`;
 export const UploadButton = styled(Button)`
-  margin-right:.5rem;
-`;
+  margin-right: 0.5rem;
+`;
+export const UploadedImageWrapper = styled.div`
+  border-radius: 100%;
+  margin 1rem  0 0 0;
+  width: 12rem;
+  height: 12rem;
+  overflow: hidden;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+`;