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

aboutMe data is serverside now

Browse Source
This commit is contained in:
parsa aghaei 2024-09-30 14:37:43 +03:30
parent e21c4fbe5a
commit 044cdb4280
2 changed files with 13 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/app/_components/about-me/page.tsx
View File

@ -1,6 +1,4 @@
"use client";
import React, { useEffect, useState } from "react";
import React from "react";
import Skeleton from "react-loading-skeleton";
import "react-loading-skeleton/dist/skeleton.css";
@ -26,11 +24,11 @@ type AboutMeDataType = {
skills: SkillType[];
};
type AboutMeProps = {
data: AboutMeDataType;
};
export default function AboutMe({ data }: AboutMeProps) {
export default async function AboutMe() {
const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/about-me`, {
cache: "no-store", // غیرفعال کردن کش
});
const aboutMeData: AboutMeDataType = await response.json();
return (
<div
className="my-10 flex w-full max-w-[90%] flex-wrap items-center justify-center gap-10 pt-[120px]"
@ -38,14 +36,14 @@ export default function AboutMe({ data }: AboutMeProps) {
>
<div className="flex w-full flex-col items-center md:w-[50%]">
<h2 className="mb-10 text-[55px] font-[800] text-black">
{data?.title || <Skeleton width={300} height={100} />}
{aboutMeData?.title || <Skeleton width={300} height={100} />}
</h2>
<p className="text-justify text-[21px] font-[400] text-black">
{data?.description || <Skeleton width={350} height={30} />}
{aboutMeData?.description || <Skeleton width={350} height={30} />}
</p>
<ul className="mt-10 flex w-full flex-col gap-10">
{data?.skills ? (
data?.skills.map((skill, key) => (
{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]">
@ -66,9 +64,9 @@ export default function AboutMe({ data }: AboutMeProps) {
)}
</ul>
</div>
{data?.image ? (
{aboutMeData?.image ? (
<div className="flex w-full max-w-[90%] items-center justify-center md:w-[40%]">
<img src={data.image} alt="profile picture" className="" />
<img src={aboutMeData.image} alt="profile picture" className="" />
</div>
) : (
<Skeleton circle={true} width={360} height={360} />

28
src/app/page.tsx
View File

@ -5,33 +5,7 @@ import AboutMe from "./_components/about-me/page";
import Services from "./_components/services/page";
import MyProjects from "./_components/my-projects/page";
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 Home() {
const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/about-me`, {
cache: "no-store", // غیرفعال کردن کش
});
let aboutMeData: AboutMeDataType = await response.json();
return (
<div className="my-15 flex w-full max-w-[1420px] flex-col items-center gap-[50px]">
@ -108,7 +82,7 @@ export default async function Home() {
</div>
</div>
<AboutMe data={aboutMeData} />
<AboutMe />
<Services />