refactor: convert React.FC to function components and update prop typ…

…e definitions for consistency
1chooo · Dec 11, 2024 · a43b186 · a43b186
1 parent e494f87
commit a43b186
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 8 deletions.
diff --git 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
@@ -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
@@ -11,15 +11,19 @@ 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}>
         <button
           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
@@ -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
@@ -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">