UI improvements

Author: luloxi

packages/nextjs/app/create/Create.tsx

@@ -3,9 +3,9 @@
 import { useEffect, useState } from "react";
 import { ImageUploader } from "./_components/ImageUploader";
 import { MintingButtons } from "./_components/MintingButtons";
-import { TextInput } from "./_components/TextInput";
 import generateTokenURI from "./_components/generateTokenURI";
-import { InputBase } from "~~/components/scaffold-eth";
+import { InputBase } from "~~/components/punk-society/InputBase";
+import { TextInput } from "~~/components/punk-society/TextInput";
 
 // import type { NextPage } from "next";
 
@@ -58,7 +58,7 @@ const Create = ({ onClose }: { onClose: any }) => {
             </div>
             <div className="flex flex-col gap-3 text-left flex-shrink-0  w-full">
               <InputBase placeholder="Article name" value={name} onChange={setName} />
-              <TextInput description={description} setDescription={setDescription} />
+              <TextInput placeholder="Describe your article" content={description} setContent={setDescription} />
               <div className="flex flex-row gap-3">
                 <div className="w-1/2">
                   <InputBase placeholder="Price in ETH" value={price} onChange={setPrice} />

packages/nextjs/app/profile/_components/ProfileInfo.tsx

@@ -3,8 +3,10 @@ import ProfilePictureUpload from "./ProfilePictureUpload";
 import { FundButton, getOnrampBuyUrl } from "@coinbase/onchainkit/fund";
 import { useAccount } from "wagmi";
 import { PencilIcon } from "@heroicons/react/24/outline";
+import { InputBase } from "~~/components/punk-society/InputBase";
 import { LoadingBars } from "~~/components/punk-society/LoadingBars";
-import { Address, InputBase, RainbowKitCustomConnectButton } from "~~/components/scaffold-eth";
+import { TextInput } from "~~/components/punk-society/TextInput";
+import { Address, RainbowKitCustomConnectButton } from "~~/components/scaffold-eth";
 import { useScaffoldReadContract, useScaffoldWriteContract } from "~~/hooks/scaffold-eth";
 import { notification } from "~~/utils/scaffold-eth";
 
@@ -105,7 +107,7 @@ const ProfileInfo: React.FC<ProfileInfoProps> = ({ address }) => {
           {/* User Info Section */}
           <div className="flex flex-col justify-center items-center">
             {isEditing ? (
-              <InputBase placeholder="Your Name" value={username} onChange={setUsername} />
+              ""
             ) : (
               <>
                 <h2 className="text-2xl font-bold">{username || "Guest user"}</h2>
@@ -142,9 +144,11 @@ const ProfileInfo: React.FC<ProfileInfoProps> = ({ address }) => {
           <div></div>
           {/* User Bio */}
           {isEditing ? (
-            <div className="flex-grow text-center md:mx-auto mt-4 md:mt-0">
+            <div className="flex flex-col justify-center items-center flex-grow text-center gap-3 md:mx-auto mt-4 md:mt-0">
               <>
-                <InputBase placeholder="Your Bio" value={bio} onChange={setBio} />
+                <InputBase placeholder="Your Name" value={username} onChange={setUsername} />
+                <TextInput placeholder="Your Bio" content={bio} setContent={setBio} />
+                {/* <InputBase placeholder="Your Bio" value={bio} onChange={setBio} /> */}
                 <InputBase placeholder="Your Email" value={email} onChange={setEmail} />
               </>
             </div>

packages/nextjs/components/punk-society/InputBase.tsx

@@ -0,0 +1,66 @@
+import { ChangeEvent, FocusEvent, ReactNode, useCallback, useEffect, useRef } from "react";
+import { CommonInputProps } from "~~/components/scaffold-eth";
+
+type InputBaseProps<T> = CommonInputProps<T> & {
+  error?: boolean;
+  prefix?: ReactNode;
+  suffix?: ReactNode;
+  reFocus?: boolean;
+};
+
+export const InputBase = <T extends { toString: () => string } | undefined = string>({
+  name,
+  value,
+  onChange,
+  placeholder,
+  error,
+  disabled,
+  prefix,
+  suffix,
+  reFocus,
+}: InputBaseProps<T>) => {
+  const inputReft = useRef<HTMLInputElement>(null);
+
+  let modifier = "";
+  if (error) {
+    modifier = "border-error";
+  } else if (disabled) {
+    modifier = "border-disabled bg-base-300";
+  }
+
+  const handleChange = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      onChange(e.target.value as unknown as T);
+    },
+    [onChange],
+  );
+
+  // Runs only when reFocus prop is passed, useful for setting the cursor
+  // at the end of the input. Example AddressInput
+  const onFocus = (e: FocusEvent<HTMLInputElement, Element>) => {
+    if (reFocus !== undefined) {
+      e.currentTarget.setSelectionRange(e.currentTarget.value.length, e.currentTarget.value.length);
+    }
+  };
+  useEffect(() => {
+    if (reFocus !== undefined && reFocus === true) inputReft.current?.focus();
+  }, [reFocus]);
+
+  return (
+    <div className={`flex border-2 border-base-300 bg-base-200 rounded-full text-accent ${modifier}`}>
+      {prefix}
+      <input
+        className="input input-ghost focus-within:border-transparent focus:outline-green-500 focus:bg-transparent focus:text-gray-400 h-[2.2rem] min-h-[2.2rem] px-4 border w-full font-medium placeholder:text-accent/50 text-green-500"
+        placeholder={placeholder}
+        name={name}
+        value={value?.toString()}
+        onChange={handleChange}
+        disabled={disabled}
+        autoComplete="off"
+        ref={inputReft}
+        onFocus={onFocus}
+      />
+      {suffix}
+    </div>
+  );
+};

packages/nextjs/app/create/_components/TextInput.tsx renamed to packages/nextjs/components/punk-society/TextInput.tsx

@@ -1,17 +1,19 @@
 import { ChangeEvent, FocusEvent, ReactNode, useCallback, useEffect, useRef } from "react";
 
 interface TextInputProps {
-  description: string;
-  setDescription: (desc: string) => void;
+  content: string;
+  setContent: (desc: string) => void;
+  placeholder?: string;
   error?: boolean;
   prefix?: ReactNode;
   suffix?: ReactNode;
   reFocus?: boolean;
 }
 
 export const TextInput: React.FC<TextInputProps> = ({
-  description,
-  setDescription,
+  content,
+  setContent,
+  placeholder,
   error,
   prefix,
   suffix,
@@ -26,9 +28,9 @@ export const TextInput: React.FC<TextInputProps> = ({
 
   const handleChange = useCallback(
     (e: ChangeEvent<HTMLTextAreaElement>) => {
-      setDescription(e.target.value);
+      setContent(e.target.value);
     },
-    [setDescription],
+    [setContent],
   );
 
   const onFocus = (e: FocusEvent<HTMLTextAreaElement, Element>) => {
@@ -47,9 +49,9 @@ export const TextInput: React.FC<TextInputProps> = ({
         {prefix}
         <textarea
           className="textarea text-lg textarea-ghost border-base-300 focus:border-green-600 border-2 rounded-lg focus:outline-none focus:bg-transparent focus:text-gray-400 h-auto min-h-[3rem] px-4 w-full font-medium placeholder:text-accent/50 text-green-500 resize-none"
-          placeholder="Describe your article"
+          placeholder={placeholder}
           name="description"
-          value={description}
+          value={content}
           onChange={handleChange}
           autoComplete="off"
           ref={textAreaRef}