Update project item styles

.editorconfig

@@ -9,4 +9,4 @@ indent_size = 2
 end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = false
-insert_final_newline = false
+insert_final_newline = true

.prettierrc.json

@@ -1,4 +1,5 @@
 {
   "semi": true,
-  "singleQuote": true
+  "singleQuote": true,
+  "editorconfig": true
 }

components/pages/ProjectCard.tsx

@@ -0,0 +1,45 @@
+import classNames from 'classnames';
+import { Project } from 'pages/projects';
+import { VscGithubInverted } from 'react-icons/vsc';
+
+type ProjectCardProps = {
+  project: Project;
+};
+
+const ProjectCard = ({ project }: ProjectCardProps) => {
+  return (
+    <>
+      <div
+        className={classNames(
+          'py-3 px-4 rounded-lg bg-slate-100',
+          'hover:bg-slate-200',
+          'transition-all duration-300',
+          'flex items-center cursor-pointer',
+          'justify-between'
+        )}
+      >
+        <VscGithubInverted className="w-8 h-8" />
+
+        <a
+          href={project.url}
+          className="w-[calc(100%_-_40px)]"
+          target="_blank"
+          rel="noreferrer"
+        >
+          <h2 className="text-xl">{project.name}</h2>
+          <span
+            className={classNames(
+              'overflow-hidden break-keep text-ellipsis',
+              'whitespace-nowrap inline-block',
+              'w-[inherit]'
+            )}
+          >
+            {project.description}
+          </span>
+        </a>
+      </div>
+    </>
+  );
+};
+
+export default ProjectCard;

pages/projects.tsx

@@ -1,10 +1,9 @@
-import classNames from 'classnames';
 import { GetStaticProps, InferGetStaticPropsType } from 'next';
 import dynamic from 'next/dynamic';
 import { ReactElement } from 'react';
-import { VscGithubInverted } from 'react-icons/vsc';
 
 const MainLayout = dynamic(() => import('layouts/MainLayout'));
+const ProjectCard = dynamic(() => import('components/pages/ProjectCard'));
 
 const Projects = ({
   projects,
@@ -12,40 +11,16 @@ const Projects = ({
   return (
     <>
       <main className="max-w-4xl py-8 mx-auto">
-        <div className="flex">
-          {projects.map((item) => (
-            <>
-              <div
-                key={item.id}
-                className={classNames(
-                  'py-3 px-4 rounded-lg bg-slate-100',
-                  'hover:bg-slate-200',
-                  'transition-all duration-300',
-                  'flex items-center cursor-pointer'
-                )}
-              >
-                <VscGithubInverted className="w-8 h-8 mr-2" />
-
-                <a
-                  href={item.url}
-                  className="w-56"
-                  target="_blank"
-                  rel="noreferrer"
-                >
-                  <h2 className="text-xl">{item.name}</h2>
-                  <span
-                    className={classNames(
-                      'overflow-hidden break-keep text-ellipsis',
-                      'whitespace-nowrap inline-block',
-                      'w-[inherit]'
-                    )}
-                  >
-                    {item.description}
-                  </span>
-                </a>
-              </div>
-            </>
-          ))}
+        <div>
+          {/* Git projects */}
+          <div>
+            <h1 className="text-2xl mb-4">Projects</h1>
+          </div>
+          <div className="grid grid-cols-3 gap-5 justify-between">
+            {projects.map((item) => (
+              <ProjectCard key={item.id} project={item} />
+            ))}
+          </div>
         </div>
         <div></div>
       </main>
@@ -53,13 +28,15 @@ const Projects = ({
   );
 };
 
+export type Project = {
+  id: number;
+  name: string;
+  description: string;
+  url: string;
+};
+
 export const getStaticProps: GetStaticProps<{
-  projects: {
-    id: number;
-    name: string;
-    description: string;
-    url: string;
-  }[];
+  projects: Project[];
 }> = async () => {
   const projects = [
     {
@@ -68,6 +45,24 @@ export const getStaticProps: GetStaticProps<{
       description: 'A 3d globe made by three.js.',
       url: 'https://github.com/DefectingCat/3d-globe',
     },
+    {
+      id: 0,
+      name: '3d-globe',
+      description: 'A 3d globe made by three.js.',
+      url: 'https://github.com/DefectingCat/3d-globe',
+    },
+    {
+      id: 0,
+      name: '3d-globe',
+      description: 'A 3d globe made by three.js.',
+      url: 'https://github.com/DefectingCat/3d-globe',
+    },
+    {
+      id: 0,
+      name: '3d-globe',
+      description: 'A 3d globe made by three.js.',
+      url: 'https://github.com/DefectingCat/3d-globe',
+    },
   ];
 
   return {