parsa/parsaaghayi-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

projects skeleton responsive updated

Browse Source
This commit is contained in:
parsa aghaei 2024-09-24 18:44:55 +03:30
parent e53518f5f0
commit 57daabfd76
1 changed files with 28 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/app/_components/my-projects/page.tsx
View File

@ -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>