client: base for img upload

0l1v3rr · 0l1v3rr · commit ba7873022c81 · 2023-04-30T11:03:29.000+02:00
diff --git a/client/src/components/lines/NewBadge.tsx b/client/src/components/lines/NewBadge.tsx
@@ -6,6 +6,7 @@ import { GoPlus } from "react-icons/go";
 import ColorInput from "../ui/ColorInput";
 import { useState } from "react";
 import { HEX_COLOR_REGEX, ICON_REGEX } from "../../const";
+import SvgInput from "./SvgInput";
 
 type Props = {
   addBadge: (badge: Badge) => void;
@@ -18,9 +19,8 @@ const NewBadge = ({ addBadge }: Props) => {
 
   return (
     <fieldset className="flex items-start gap-4">
-      <InputWrapper description="The name of the icon">
-        <Input
-          formNoValidate
+      <InputWrapper description="The icon in the badge">
+        <SvgInput
           value={icon}
           onChange={(e) => setIcon(e.target.value)}
           placeholder="react"
@@ -29,7 +29,6 @@ const NewBadge = ({ addBadge }: Props) => {
 
       <InputWrapper description="The label shown on the badge">
         <Input
-          formNoValidate
           value={label}
           onChange={(e) => setLabel(e.target.value)}
           placeholder="react"
diff --git a/client/src/components/lines/SvgInput.tsx b/client/src/components/lines/SvgInput.tsx
@@ -0,0 +1,35 @@
+import { InputHTMLAttributes, forwardRef } from "react";
+import Input from "../ui/Input";
+import { cn } from "../ui/utils";
+import { AiOutlineCloudUpload } from "react-icons/ai";
+import Button from "../ui/Button";
+
+// eslint-disable-next-line
+interface SvgInputProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {}
+
+const SvgInput = forwardRef<HTMLInputElement, SvgInputProps>(
+  ({ className, required, value = "", ...props }, ref) => {
+    return (
+      <div className={cn("group flex items-stretch", className)}>
+        <Input
+          ref={ref}
+          value={value}
+          type="text"
+          required={required}
+          pattern={`^${required ? "" : "[]{0}|"}#[a-fA-F0-9]{6}$`}
+          className="z-10 rounded-br-none rounded-tr-none transition-none [border-right:none!important]"
+          {...props}
+        />
+
+        <Button
+          variant="secondary"
+          className="rounded-bl-none rounded-tl-none bg-gh-bg px-3 text-lg"
+          icon={<AiOutlineCloudUpload />}
+        />
+      </div>
+    );
+  }
+);
+
+export default SvgInput;
diff --git a/client/src/components/ui/ColorInput.tsx b/client/src/components/ui/ColorInput.tsx
@@ -17,7 +17,7 @@ const ColorInput = forwardRef<HTMLInputElement, ColorInputProps>(
           type="text"
           required={required}
           pattern={`^${required ? "" : "[]{0}|"}#[a-fA-F0-9]{6}$`}
-          className="z-10 rounded-br-none rounded-tr-none transition-none"
+          className="z-10 rounded-br-none rounded-tr-none transition-none [border-right:none!important]"
           {...props}
         />
 
@@ -26,7 +26,7 @@ const ColorInput = forwardRef<HTMLInputElement, ColorInputProps>(
           value={
             HEX_COLOR_REGEX.test(value.toString() ?? "") ? value : "#58a6ff"
           }
-          className="h-[30.67px] w-10 rounded-br-md rounded-tr-md border border-l-0 border-gh-border bg-gh-bg-dark px-2 py-1 outline-0 outline-offset-0 outline-gh-blue [outline-style:solid]"
+          className="h-[30.67px] w-10 cursor-pointer rounded-br-md rounded-tr-md border border-gh-border bg-gh-bg px-2 py-1 outline-0 outline-offset-0 outline-gh-blue transition-all duration-150 [outline-style:solid] hover:border-gh-border-active hover:bg-gh-gray-active"
           {...props}
         />
       </div>
