From 41d16a67b9fcda0f20ce1a108fb4bd3e2de800bf Mon Sep 17 00:00:00 2001 From: Lulox Date: Tue, 15 Oct 2024 14:39:29 -0300 Subject: [PATCH] UI improvements --- packages/nextjs/app/create/Create.tsx | 6 +- .../app/profile/_components/ProfileInfo.tsx | 12 ++-- .../components/punk-society/InputBase.tsx | 66 +++++++++++++++++++ .../punk-society}/TextInput.tsx | 18 ++--- 4 files changed, 87 insertions(+), 15 deletions(-) create mode 100644 packages/nextjs/components/punk-society/InputBase.tsx rename packages/nextjs/{app/create/_components => components/punk-society}/TextInput.tsx (87%) diff --git a/packages/nextjs/app/create/Create.tsx b/packages/nextjs/app/create/Create.tsx index 37be387..e36fb31 100644 --- a/packages/nextjs/app/create/Create.tsx +++ b/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 }) => {
- +
diff --git a/packages/nextjs/app/profile/_components/ProfileInfo.tsx b/packages/nextjs/app/profile/_components/ProfileInfo.tsx index 3032da1..0a9d9a6 100644 --- a/packages/nextjs/app/profile/_components/ProfileInfo.tsx +++ b/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 = ({ address }) => { {/* User Info Section */}
{isEditing ? ( - + "" ) : ( <>

{username || "Guest user"}

@@ -142,9 +144,11 @@ const ProfileInfo: React.FC = ({ address }) => {
{/* User Bio */} {isEditing ? ( -
+
<> - + + + {/* */}
diff --git a/packages/nextjs/components/punk-society/InputBase.tsx b/packages/nextjs/components/punk-society/InputBase.tsx new file mode 100644 index 0000000..2a628fb --- /dev/null +++ b/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 = CommonInputProps & { + error?: boolean; + prefix?: ReactNode; + suffix?: ReactNode; + reFocus?: boolean; +}; + +export const InputBase = string } | undefined = string>({ + name, + value, + onChange, + placeholder, + error, + disabled, + prefix, + suffix, + reFocus, +}: InputBaseProps) => { + const inputReft = useRef(null); + + let modifier = ""; + if (error) { + modifier = "border-error"; + } else if (disabled) { + modifier = "border-disabled bg-base-300"; + } + + const handleChange = useCallback( + (e: ChangeEvent) => { + 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) => { + 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 ( +
+ {prefix} + + {suffix} +
+ ); +}; diff --git a/packages/nextjs/app/create/_components/TextInput.tsx b/packages/nextjs/components/punk-society/TextInput.tsx similarity index 87% rename from packages/nextjs/app/create/_components/TextInput.tsx rename to packages/nextjs/components/punk-society/TextInput.tsx index 8cd619b..7bbb84e 100644 --- a/packages/nextjs/app/create/_components/TextInput.tsx +++ b/packages/nextjs/components/punk-society/TextInput.tsx @@ -1,8 +1,9 @@ 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; @@ -10,8 +11,9 @@ interface TextInputProps { } export const TextInput: React.FC = ({ - description, - setDescription, + content, + setContent, + placeholder, error, prefix, suffix, @@ -26,9 +28,9 @@ export const TextInput: React.FC = ({ const handleChange = useCallback( (e: ChangeEvent) => { - setDescription(e.target.value); + setContent(e.target.value); }, - [setDescription], + [setContent], ); const onFocus = (e: FocusEvent) => { @@ -47,9 +49,9 @@ export const TextInput: React.FC = ({ {prefix}