From 98f80d0e9f0e78aaf56389270467ffbf9eee2734 Mon Sep 17 00:00:00 2001
From: codetorso <pruthvirajthinks@gmail.com>
Date: Thu, 18 Jul 2024 23:42:41 +0530
Subject: [PATCH] effect of disappearing text on input

---
 apps/web/app/(dash)/home/filterSpaces.tsx | 2 +-
 apps/web/app/(dash)/home/heading.tsx      | 9 ++++-----
 apps/web/app/(dash)/home/page.tsx         | 5 ++++-
 apps/web/app/(dash)/home/queryinput.tsx   | 7 ++++++-
 4 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/apps/web/app/(dash)/home/filterSpaces.tsx b/apps/web/app/(dash)/home/filterSpaces.tsx
index c7d1e2eb..d0e4fa1e 100644
--- a/apps/web/app/(dash)/home/filterSpaces.tsx
+++ b/apps/web/app/(dash)/home/filterSpaces.tsx
@@ -49,7 +49,7 @@ export function FilterSpaces({
 						<button
 							key={v.id}
 							onClick={() => handleSelect(v)}
-							className="bg-[#3a4248] max-w-32 truncate-wor truncate whitespace-nowrap py-1 rounded-md px-2 mx-1 aria-selected:outline"
+							className="bg-[#3a4248] text-white max-w-32 truncate-wor truncate whitespace-nowrap py-1 rounded-md px-2 mx-1 aria-selected:outline"
 						>
 							{v.name}
 						</button>
diff --git a/apps/web/app/(dash)/home/heading.tsx b/apps/web/app/(dash)/home/heading.tsx
index b61ac00b..75a83dae 100644
--- a/apps/web/app/(dash)/home/heading.tsx
+++ b/apps/web/app/(dash)/home/heading.tsx
@@ -9,18 +9,17 @@ const headings = [
 	"The smart way to use your digital treasure.",
 ];
 
-export function Heading({ query = "" }: { query?: string }) {
+export function Heading({ queryPresent }: { queryPresent: boolean }) {
 	const [showHeading, setShowHeading] = useState<number>(0);
-
 	useEffect(() => {
 		setShowHeading(Math.floor(Math.random() * headings.length));
-	});
+	}, []);
 	return (
 		<div className="h-[3.4rem] overflow-hidden text-white text-center">
 			<motion.h1
-				animate={{ opacity: query ? 0 : 1, y: query ? "20%" : 0 }}
+				animate={{ opacity: queryPresent ? 0 : 1, y: queryPresent ? "20%" : 0 }}
 				className={`text-[2.45rem] font-semibold ${
-					query ? "opacity-0 " : "opacity-100"
+					queryPresent ? "pointer-events-none" : "pointer-events-auto"
 				} transition-opacity`}
 			>
 				{headings[showHeading]}
diff --git a/apps/web/app/(dash)/home/page.tsx b/apps/web/app/(dash)/home/page.tsx
index e388554b..84ecf242 100644
--- a/apps/web/app/(dash)/home/page.tsx
+++ b/apps/web/app/(dash)/home/page.tsx
@@ -28,6 +28,8 @@ function Page({
 
 	const [spaces, setSpaces] = useState<{ id: number; name: string }[]>([]);
 
+	const [queryPresent, setQueryPresent] = useState<boolean>(false);
+
 	useEffect(() => {
 		// telegram bot
 		const telegramUser = searchParams.extension as string
@@ -56,9 +58,10 @@ function Page({
 
 	return (
 		<div className="max-w-3xl h-full justify-center flex mx-auto w-full flex-col px-2 md:px-0">
-			<Heading />
+			<Heading queryPresent={queryPresent} />
 			<div className="w-full pb-20 mt-12">
 				<QueryInput
+					setQueryPresent={(t:boolean)=> setQueryPresent(t)}
 					handleSubmit={async (q, spaces) => {
 						if (q.length === 0) {
 							toast.error("Query is required");
diff --git a/apps/web/app/(dash)/home/queryinput.tsx b/apps/web/app/(dash)/home/queryinput.tsx
index 91f79e5f..6767d5ea 100644
--- a/apps/web/app/(dash)/home/queryinput.tsx
+++ b/apps/web/app/(dash)/home/queryinput.tsx
@@ -4,10 +4,12 @@ import React, { useState } from "react";
 import { FilterSpaces } from "./filterSpaces";
 
 function QueryInput({
+	setQueryPresent,
 	initialSpaces,
 	className,
 	handleSubmit,
 }: {
+	setQueryPresent: (t:boolean) => void;
 	initialSpaces?: {
 		id: number;
 		name: string;
@@ -55,7 +57,10 @@ function QueryInput({
 								setQ("");
 							}
 						}}
-						onChange={(e) => setQ(e.target.value)}
+						onChange={(e) => setQ((prev)=> {
+							setQueryPresent(!!(e.target.value.length));
+							return e.target.value;
+						})}
 						value={q}
 					/>
 					<FilterSpaces