From 10c2c68da1302100c5509cc20f8a9ca86e02f361 Mon Sep 17 00:00:00 2001
From: Alvalen <alvalen.shafel04@gmail.com>
Date: Tue, 3 Sep 2024 19:45:13 +0700
Subject: [PATCH] feat: change button style in project

---
 app/projects/page.jsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/projects/page.jsx b/app/projects/page.jsx
index ad9b820..7fef7f6 100644
--- a/app/projects/page.jsx
+++ b/app/projects/page.jsx
@@ -239,18 +239,18 @@ export default function Page() {
 					transition={{
 						type: "spring",
 					}}
-					className="flex flex-row justify-center items-start flex-wrap gap-3 md:gap-5 my-5">
+					className="flex flex-row justify-center items-start flex-wrap gap-3 md:gap-5 my-5 ">
 					{Object.keys(category).map((key, index) => (
-						<div
+						<button
 							key={index}
-							className={`px-2 md:px-4 py-2 rounded-lg cursor-pointer transition-all ease duration-300 ${
+							className={`px-2 md:px-4 py-2 rounded-lg cursor-pointer transition-all ease duration-300 focus:bg-gray-300 focus:text-black focus:ring focus:ring-slate-500 ${
 								activeCategory === key
 									? "bg-gray-300 text-black hover:bg-gray-700 hover:text-white"
 									: "bg-gray-700 text-white hover:bg-gray-300 hover:text-black"
 							}`}
 							onClick={() => setActiveCategory(key)}>
 							{category[key]}
-						</div>
+						</button>
 					))}
 				</motion.div>