From a43b186dad17b6fd8171a3e359f8c5236f041bb1 Mon Sep 17 00:00:00 2001
From: Hugo ChunHo Lin <hugo970217@gmail.com>
Date: Wed, 11 Dec 2024 15:09:09 +0800
Subject: [PATCH] refactor: convert React.FC to function components and update
 prop type definitions for consistency

---
 apps/web/src/components/about/latest-articles.tsx | 5 ++++-
 apps/web/src/components/about/life-styles.tsx     | 2 +-
 apps/web/src/components/about/see-more-button.tsx | 8 ++++++--
 apps/web/src/components/about/service-item.tsx    | 4 ++--
 apps/web/src/components/about/tech-item.tsx       | 3 +--
 5 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/apps/web/src/components/about/latest-articles.tsx b/apps/web/src/components/about/latest-articles.tsx
index 24811f79..057bd446 100644
--- a/apps/web/src/components/about/latest-articles.tsx
+++ b/apps/web/src/components/about/latest-articles.tsx
@@ -32,8 +32,11 @@ const handleSeeMorePostsClick = () => {
   })
 };
 
+interface LatestArticlesProps {
+  posts: Post[];
+}
 
-const LatestArticles = ({ posts }: { posts: Post[] }) => {
+function LatestArticles({ posts }: LatestArticlesProps) {
   const [visiblePosts, setVisiblePosts] = useState<Post[]>([]);
 
   useEffect(() => {
diff --git a/apps/web/src/components/about/life-styles.tsx b/apps/web/src/components/about/life-styles.tsx
index 2927e0cd..a5cab2a6 100644
--- a/apps/web/src/components/about/life-styles.tsx
+++ b/apps/web/src/components/about/life-styles.tsx
@@ -7,7 +7,7 @@ interface LifeStylesProps {
   lifestyles: LifeStyle[];
 }
 
-const LifeStyles: React.FC<LifeStylesProps> = ({ lifestyles }) => {
+function LifeStyles({ lifestyles }: LifeStylesProps) {
   return (
     <section>
       <AboutHeader text="$ ls -al Life Style" />
diff --git a/apps/web/src/components/about/see-more-button.tsx b/apps/web/src/components/about/see-more-button.tsx
index 22e0e875..a5d41f9c 100644
--- a/apps/web/src/components/about/see-more-button.tsx
+++ b/apps/web/src/components/about/see-more-button.tsx
@@ -11,7 +11,11 @@ interface SeeMoreButtonProps {
 }
 
 // TODO: customize button onclick effect https://articles.readytowork.jp/google-analytics-in-next-js-a26cc2b28db5
-const SeeMoreButton: React.FC<SeeMoreButtonProps> = ({ badge, path, icon: Icon }) => {
+function SeeMoreButton({
+  badge,
+  path,
+  icon: Icon
+}: SeeMoreButtonProps) {
   return (
     <div className="flex justify-center">
       <ProgressBarLink href={path}>
@@ -19,7 +23,7 @@ const SeeMoreButton: React.FC<SeeMoreButtonProps> = ({ badge, path, icon: Icon }
           className="hover:scale-105 active:scale-95 rounded-xl shadow-lg bg-border-gradient-onyx hover:bg-orange-yellow-crayola-dark z-0 cursor-pointer text-orange-yellow-crayola px-5 py-3 font-bold"
           onClick={() => sendGTMEvent({ event: 'buttonClicked', value: 'GTM-PDJ3NF4Q' })}>
           <span>{badge}</span>
-          <Icon className="ml-2 group-hover:ml-2 group-hover:scale-110"/>
+          <Icon className="ml-2 group-hover:ml-2 group-hover:scale-110" />
         </button>
       </ProgressBarLink>
     </div>
diff --git a/apps/web/src/components/about/service-item.tsx b/apps/web/src/components/about/service-item.tsx
index c03d54e6..03705f82 100644
--- a/apps/web/src/components/about/service-item.tsx
+++ b/apps/web/src/components/about/service-item.tsx
@@ -5,11 +5,11 @@ interface ServiceItemProps {
   lifestyle: LifeStyle;
 }
 
-const ServiceItem: React.FC<ServiceItemProps> = ({ lifestyle }) => {
+function ServiceItem({ lifestyle }: ServiceItemProps) {
   return (
     <li className="service-item">
       <div className="mb-2.5 sm:mb-0 sm:mt-2 flex justify-center items-center">
-        <lifestyle.icon className="text-orange-yellow-crayola" size={24}/>
+        <lifestyle.icon className="text-orange-yellow-crayola" size={24} />
       </div>
 
       <div className="text-center sm:text-left">
diff --git a/apps/web/src/components/about/tech-item.tsx b/apps/web/src/components/about/tech-item.tsx
index 0bd1b88f..b2bc9f72 100644
--- a/apps/web/src/components/about/tech-item.tsx
+++ b/apps/web/src/components/about/tech-item.tsx
@@ -10,8 +10,7 @@ type TechStack = {
   icon: Icon | IconType;
 };
 
-const TechItem: React.FC<TechItemProps> = ({ techSteck }) => {
-
+function TechItem({ techSteck }: TechItemProps) {
   return (
     <li className="service-item">
       <div className="tech-stack-container">