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

homePage aboutMe component updated for Clean Code

Browse Source
This commit is contained in:
parsa aghaei 2024-10-20 17:44:16 +03:30
parent 71734d6f0c
commit 343a0e93c9
2 changed files with 37 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
src/app/(routes)/(website)/components/aboutMe/aboutMe.tsx
View File

@ -1,35 +1,11 @@
import { AboutMeDataType } from "@/app/types/types";
import React from "react";
import Skeleton from "react-loading-skeleton";
import "react-loading-skeleton/dist/skeleton.css";
type SkillType = {
id: 1;
title: string;
image: string;
description: string;
link: string;
percentage: number;
about_me_id: number;
created_at: string;
updated_at: string;
};
type AboutMeDataType = {
id: number;
title: string;
description: string;
image: string;
created_at: string;
updated_at: string;
skills: SkillType[];
};
export default async function AboutMe() {
const aboutMeData: AboutMeDataType = await fetch(
`${process.env.NEXT_PUBLIC_FRONT_URL}/api/website/about-me`,
{
cache: "no-store",
},
).then((res) => res.json());
return (
@ -45,35 +21,22 @@ export default async function AboutMe() {
{aboutMeData?.description || <Skeleton width={350} height={30} />}
</p>
<ul className="mt-10 flex w-full flex-col gap-10">
{aboutMeData?.skills ? (
aboutMeData?.skills.map((skill, key) => (
<li key={key}>
<h3 className="mb-2 text-[18px] font-[700]">{skill.title}</h3>
<div className="h relative h-[12px] w-full rounded-lg bg-[#EDECEC]">
<span
className="progress absolute h-[12px] rounded-lg bg-[#FD6F00]"
style={{ width: `${skill.percentage}%` }}
></span>
</div>
</li>
))
) : (
<>
<Skeleton width={"100%"} height={50} />
<Skeleton width={"100%"} height={50} />
<Skeleton width={"100%"} height={50} />
<Skeleton width={"100%"} height={50} />
</>
)}
{aboutMeData.skills.map((skill, index) => (
<li key={index}>
<h3 className="mb-2 text-[18px] font-[700]">{skill.title}</h3>
<div className="relative h-[12px] w-full rounded-lg bg-[#EDECEC]">
<span
className="absolute h-[12px] rounded-lg bg-[#FD6F00]"
style={{ width: `${skill.percentage}%` }}
></span>
</div>
</li>
))}
</ul>
</div>
{aboutMeData?.image ? (
<div className="flex w-full max-w-[90%] items-center justify-center md:w-[40%]">
<img src={aboutMeData.image} alt="profile picture" className="" />
</div>
) : (
<Skeleton circle={true} width={360} height={360} />
)}
<div className="flex w-full max-w-[90%] items-center justify-center md:w-[40%]">
<img src={aboutMeData.image} alt="profile picture" className="" />
</div>
</div>
);
}

22
src/app/types/types.ts
View File

@ -170,3 +170,25 @@ export type Dictionary = {
CopyRight: string;
};
};
export type SkillType = {
id: 1;
title: string;
image: string;
description: string;
link: string;
percentage: number;
about_me_id: number;
created_at: string;
updated_at: string;
};
export type AboutMeDataType = {
id: number;
title: string;
description: string;
image: string;
created_at: string;
updated_at: string;
skills: SkillType[];
};