🔧 chore(textarea.tsx): refactor textarea component class names for improved readability and maintainability

🔧 chore(index.css): refactor input-primary class to remove unnecessary styles and improve readability
🔧 chore(index.css): add new textarea-primary class for textarea component with similar styles as input-primary but without truncation
🔧 chore(chatInput/index.tsx): replace textarea element with Textarea component for consistency and reusability
This commit is contained in:
Cristhian Zanforlin Lousa 2023-07-20 18:40:24 -03:00
commit 25235a0d11
3 changed files with 10 additions and 5 deletions

View file

@ -9,7 +9,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
return (
<textarea
className={cn(
"flex min-h-[80px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
"textarea-primary nopan nodrag noundo nocopy",
className
)}
ref={ref}

View file

@ -239,11 +239,15 @@ The cursor: default; property value restores the browser's default cursor style
.button-div-style {
@apply gap-2 flex
}
.input-primary{
@apply placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 focus:placeholder-transparent focus:ring-ring focus:border-ring bg-background block text-left border-border form-input px-3 placeholder:text-muted-foreground rounded-md shadow-sm sm:text-sm truncate w-full
@apply disabled:cursor-not-allowed disabled:opacity-50 focus:placeholder-transparent focus:ring-ring focus:border-ring bg-background block text-left border-border form-input px-3 placeholder:text-muted-foreground rounded-md shadow-sm sm:text-sm w-full truncate
}
/* The same as input-primary but no-truncate*/
.textarea-primary{
@apply disabled:cursor-not-allowed disabled:opacity-50 focus:placeholder-transparent focus:ring-ring focus:border-ring bg-background block text-left border-border form-input px-3 placeholder:text-muted-foreground rounded-md shadow-sm sm:text-sm w-full
}
.input-edit-node{
@apply input-primary border-border pt-0.5 pb-0.5 text-left w-full
}

View file

@ -1,6 +1,7 @@
import { useEffect } from "react";
import IconComponent from "../../../components/genericIconComponent";
import { classNames } from "../../../utils/utils";
import { Textarea } from "../../../components/ui/textarea";
export default function ChatInput({
lockChat,
@ -25,7 +26,7 @@ export default function ChatInput({
return (
<div className="relative">
<textarea
<Textarea
onKeyDown={(event) => {
if (event.key === "Enter" && !lockChat && !event.shiftKey) {
sendMessage();