From 4048a5f143ded56197c9d362fb3609b36578583b Mon Sep 17 00:00:00 2001
From: codetorso <pruthvirajthinks@gmail.com>
Date: Sat, 17 Aug 2024 04:26:00 +0530
Subject: [PATCH] little animation will be better

---
 apps/web/app/(dash)/(memories)/content.tsx | 52 +++++++++++++---------
 1 file changed, 30 insertions(+), 22 deletions(-)

diff --git a/apps/web/app/(dash)/(memories)/content.tsx b/apps/web/app/(dash)/(memories)/content.tsx
index 651b628a..0f83d0fc 100644
--- a/apps/web/app/(dash)/(memories)/content.tsx
+++ b/apps/web/app/(dash)/(memories)/content.tsx
@@ -169,6 +169,22 @@ export function MemoriesPage({
 				</h2>
 			</div>
 
+			<div className="flex justify-between w-full">
+				<Filters
+					setFilter={setFilter}
+					filter={filter}
+					filterMethods={
+						currentSpace ? SpaceFilterMethods : MemoriesFilterMethods
+					}
+				/>
+				<button
+					onClick={handleExport}
+					className={`transition px-4 py-2 rounded-lg text-[#B3BCC5] bg-secondary hover:bg-secondary hover:text-[#76a3cc]`}
+				>
+					JSON Export
+				</button>
+			</div>
+
 			{currentSpace && (
 				<div className="flex flex-col gap-2">
 					{usersWithAccess && usersWithAccess.length > 0 && (
@@ -218,22 +234,6 @@ export function MemoriesPage({
 				</div>
 			)}
 
-			<div className="flex justify-between w-full">
-				<Filters
-					setFilter={setFilter}
-					filter={filter}
-					filterMethods={
-						currentSpace ? SpaceFilterMethods : MemoriesFilterMethods
-					}
-				/>
-				<button
-					onClick={handleExport}
-					className={`transition px-4 py-2 rounded-lg text-[#B3BCC5] bg-secondary hover:bg-secondary hover:text-[#76a3cc]`}
-				>
-					JSON Export
-				</button>
-			</div>
-
 			<Masonry
 				className="mt-6 relative"
 				columns={{ 640: 1, 768: 2, 1024: 3 }}
@@ -454,12 +454,20 @@ function Filters({
 		<div className="flex gap-3 flex-wrap">
 			{filterMethods.map((i) => {
 				return (
-					<button
-						onClick={() => setFilter(i)}
-						className={`transition px-4 py-2 shadow-md rounded-lg bg-border ${i === filter ? " text-[#369DFD]" : "text-[#B3BCC5] bg-secondary drop-shadow-md hover:bg-secondary hover:text-[#76a3cc]"}`}
-					>
-						{i}
-					</button>
+					<div className="relative">
+						<button
+							onClick={() => setFilter(i)}
+							className={`transition px-4 py-2   ${i === filter ? " text-[#369DFD]" : "text-[#B3BCC5]"}`}
+						>
+							{i}
+						</button>
+						{i === filter && (
+							<motion.div
+								layoutId="bg"
+								className="bg-secondary shadow-md drop-shadow-md rounded-lg z-[-1] absolute h-full w-full top-0 left-0"
+							></motion.div>
+						)}
+					</div>
 				);
 			})}
 		</div>