From 57daabfd769767a405644c94768dc3162844aaa6 Mon Sep 17 00:00:00 2001
From: parsa aghaei <p.aghaei@hoshmand.local>
Date: Tue, 24 Sep 2024 18:44:55 +0330
Subject: [PATCH] projects skeleton responsive updated

---
 src/app/_components/my-projects/page.tsx | 39 +++++++++++++++++-------
 1 file changed, 28 insertions(+), 11 deletions(-)

diff --git a/src/app/_components/my-projects/page.tsx b/src/app/_components/my-projects/page.tsx
index ef3d6ad..7d113c8 100644
--- a/src/app/_components/my-projects/page.tsx
+++ b/src/app/_components/my-projects/page.tsx
@@ -82,7 +82,7 @@ export default function MyProjects() {
         Lorem ipsum dolor sit amet consectetur. Mollis erat duis aliquam mauris
         est risus lectus. Phasellus consequat urna tellus
       </p>
-      <ul className="mb-10 mt-20 flex flex-wrap items-center justify-start gap-5">
+      <ul className="mb-10 mt-20 flex w-full flex-wrap items-center justify-center gap-5">
         {categories.length > 0 ? (
           categories.map((category, index) => (
             <li
@@ -98,15 +98,15 @@ export default function MyProjects() {
             </li>
           ))
         ) : (
-          <div className="flex gap-5">
-            <Skeleton width={200} height={60} />
-            <Skeleton width={200} height={60} />
-            <Skeleton width={200} height={60} />
-            <Skeleton width={200} height={60} />
+          <div className="flex w-full flex-wrap gap-5">
+            <Skeleton containerClassName={"w-[45%] md:w-[21%]"} height={60} />
+            <Skeleton containerClassName={"w-[45%] md:w-[21%]"} height={60} />
+            <Skeleton containerClassName={"w-[45%] md:w-[21%]"} height={60} />
+            <Skeleton containerClassName={"w-[45%] md:w-[21%]"} height={60} />
           </div>
         )}
       </ul>
-      <div className="flex flex-wrap items-start justify-center gap-8">
+      <div className="flex w-full flex-wrap items-start justify-center gap-8">
         {filteredProjects.length > 0 ? (
           filteredProjects.map((project, index) => (
             <div
@@ -132,10 +132,27 @@ export default function MyProjects() {
             </div>
           ))
         ) : (
-          <div className="flex gap-5">
-            <Skeleton width={450} height={450} />
-            <Skeleton width={450} height={450} />
-            <Skeleton width={450} height={450} />
+          <div className="flex w-full flex-wrap justify-center gap-5">
+            <div className="w-[45%] md:w-[30%]">
+              <Skeleton containerClassName={"w-full"} height={150} />
+              <Skeleton containerClassName={"w-full"} height={40} />
+              <Skeleton containerClassName={"w-full"} height={60} />
+            </div>
+            <div className="w-[45%] md:w-[30%]">
+              <Skeleton containerClassName={"w-full"} height={150} />
+              <Skeleton containerClassName={"w-full"} height={40} />
+              <Skeleton containerClassName={"w-full"} height={60} />
+            </div>
+            <div className="w-[45%] md:w-[30%]">
+              <Skeleton containerClassName={"w-full"} height={150} />
+              <Skeleton containerClassName={"w-full"} height={40} />
+              <Skeleton containerClassName={"w-full"} height={60} />
+            </div>
+            <div className="w-[45%] md:w-[30%]">
+              <Skeleton containerClassName={"w-full"} height={150} />
+              <Skeleton containerClassName={"w-full"} height={40} />
+              <Skeleton containerClassName={"w-full"} height={60} />
+            </div>
           </div>
         )}
       </div>