From 21c255abde08142fa669c8b6e86aee983db1cf3c Mon Sep 17 00:00:00 2001
From: Chocolate1999 <2816778271@qq.com>
Date: Sun, 11 Sep 2022 21:51:36 +0800
Subject: [PATCH] feat: new projects page

---
 .../content/projects/ProjectItem.tsx          | 37 ++++++++++++
 src/components/layout/Footer.tsx              |  2 +-
 src/pages/blog.tsx                            |  2 +-
 src/pages/collection.tsx                      |  2 +-
 src/pages/projects.tsx                        | 43 +++++++-------
 src/store/collections/index.tsx               | 19 -------
 src/store/projects.tsx                        | 56 +++++++++++++++++++
 src/store/projects/index.tsx                  | 19 -------
 src/styles/globals.css                        |  2 +-
 src/types/frontmatters.ts                     |  3 +-
 10 files changed, 120 insertions(+), 65 deletions(-)
 create mode 100644 src/components/content/projects/ProjectItem.tsx
 delete mode 100644 src/store/collections/index.tsx
 create mode 100644 src/store/projects.tsx
 delete mode 100644 src/store/projects/index.tsx

diff --git a/src/components/content/projects/ProjectItem.tsx b/src/components/content/projects/ProjectItem.tsx
new file mode 100644
index 0000000..2cffdae
--- /dev/null
+++ b/src/components/content/projects/ProjectItem.tsx
@@ -0,0 +1,37 @@
+import * as React from 'react';
+
+import UnstyledLink from '@/components/links/UnstyledLink';
+
+import { ProjectsType } from '@/types/frontmatters';
+
+type ProjectCardProps = {
+  project: ProjectsType;
+} & React.ComponentPropsWithoutRef<'li'>;
+
+export default function ProjectCard({ project }: ProjectCardProps) {
+  return (
+    <ul className='mt-6 grid grid-cols-2		 gap-4'>
+      {project.child.map((projectItem) => (
+        <UnstyledLink
+          href={projectItem.link}
+          className='group h-full p-4 hover:bg-[#88888808]'
+          key={projectItem.title}
+        >
+          <section className=' flex items-center gap-[24px]'>
+            <div className='text-[38px] opacity-50 group-hover:opacity-70 dark:group-hover:opacity-80'>
+              {projectItem.icon}
+            </div>
+            <div>
+              <h4 className='text-[#555] group-hover:text-gray-800 dark:text-gray-400 dark:group-hover:text-gray-100'>
+                {projectItem.title}
+              </h4>
+              <p className='mb-auto text-sm text-gray-700 opacity-50 dark:text-gray-300 dark:group-hover:text-gray-50'>
+                {projectItem.description}
+              </p>
+            </div>
+          </section>
+        </UnstyledLink>
+      ))}
+    </ul>
+  );
+}
diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
index 9ab0664..54d3794 100644
--- a/src/components/layout/Footer.tsx
+++ b/src/components/layout/Footer.tsx
@@ -2,7 +2,7 @@ import CustomLink from '@/components/links/CustomLink';
 
 export default function Footer() {
   return (
-    <footer className='mt-16 text-right text-[#b3b3b3] '>
+    <footer className='my-16 text-right text-[#b3b3b3] '>
       <section className='flex flex-col items-end'>
         <div>
           <a
diff --git a/src/pages/blog.tsx b/src/pages/blog.tsx
index ac95f17..cfbfd6c 100644
--- a/src/pages/blog.tsx
+++ b/src/pages/blog.tsx
@@ -30,7 +30,7 @@ export default function IndexPage({
       <main>
         <section className={clsx(isLoaded && 'fade-in-start')}>
           <div className='layout'>
-            <ul className='mx-8 mt-12 grid gap-4' data-fade='2'>
+            <ul className='mx-8 mt-12 grid gap-4' data-fade='1'>
               {posts.length > 0 ? (
                 posts.map((post, index) => (
                   <>
diff --git a/src/pages/collection.tsx b/src/pages/collection.tsx
index 45b8011..6b34eba 100644
--- a/src/pages/collection.tsx
+++ b/src/pages/collection.tsx
@@ -7,7 +7,7 @@ import CollectionCard from '@/components/content/collections/CollectionCard';
 import Layout from '@/components/layout/Layout';
 import Seo from '@/components/Seo';
 
-import { collectionsAtom } from '@/store/collections';
+import { collectionsAtom } from '@/store/collections/collections';
 
 export default function ProjectsPage() {
   const isLoaded = useLoaded();
diff --git a/src/pages/projects.tsx b/src/pages/projects.tsx
index f9f9229..d55565b 100644
--- a/src/pages/projects.tsx
+++ b/src/pages/projects.tsx
@@ -3,7 +3,7 @@ import { useRecoilValue } from 'recoil';
 
 import useLoaded from '@/hooks/useLoaded';
 
-import ProjectCard from '@/components/content/projects/ProjectCard';
+import ProjectCard from '@/components/content/projects/ProjectItem';
 import Layout from '@/components/layout/Layout';
 import Seo from '@/components/Seo';
 
@@ -19,28 +19,27 @@ export default function ProjectsPage() {
         templateTitle='Projects'
         description="Showcase of my projects on front-end development that I'm proud of."
       />
-
       <main>
-        <section className={clsx(isLoaded && 'fade-in-start min-h-screen')}>
-          <div className='layout mt-[60px] min-h-screen py-12'>
-            <h1 className='text-5xl dark:text-gray-100' data-fade='0'>
-              Projects
-            </h1>
-            <p data-fade='1' className='mt-2 text-gray-600 dark:text-gray-300'>
-              Showcase of my works on frontend development.
-            </p>
-
-            {projects.map((project, index) => (
-              <div key={project.category}>
-                <h1
-                  className='my-6 text-xl dark:text-gray-100'
-                  data-fade={index + 1}
-                >
-                  {project.category}
-                </h1>
-                <ProjectCard project={project} />
-              </div>
-            ))}
+        <section className={clsx(isLoaded && 'fade-in-start')}>
+          <div className='layout'>
+            <div className='mx-8 mt-12 grid max-w-[820px] gap-4' data-fade='1'>
+              <p className='text-[32px]'>Projects</p>
+              <p className='mb-[32px] italic opacity-50'>
+                Showcase of my projects on front-end development that I'm proud
+                of.
+              </p>
+              {projects?.map((project, index) => (
+                <div key={project.category}>
+                  <h1
+                    className='text-[18px] text-[#555] dark:text-[#aaa]'
+                    data-fade={index + 1}
+                  >
+                    {project.category}
+                  </h1>
+                  <ProjectCard project={project} />
+                </div>
+              ))}
+            </div>
           </div>
         </section>
       </main>
diff --git a/src/store/collections/index.tsx b/src/store/collections/index.tsx
deleted file mode 100644
index 244a6e8..0000000
--- a/src/store/collections/index.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { atom } from 'recoil';
-
-export const collectionsAtom = atom({
-  key: 'COLLECTION_ATOM',
-  default: [
-    {
-      category: 'Next Ecosystem',
-      child: [
-        {
-          title: 'nextjs-tailwind-blog',
-          description:
-            'The most beautiful blog in modern times, using Next.js, TypeScript, Tailwind CSS, Welcome to visit',
-          link: 'https://github.com/Chocolate1999/nextjs-tailwind-blog',
-          techs: 'next,tailwindcss,typescript',
-        },
-      ],
-    },
-  ],
-});
diff --git a/src/store/projects.tsx b/src/store/projects.tsx
new file mode 100644
index 0000000..ddf92a3
--- /dev/null
+++ b/src/store/projects.tsx
@@ -0,0 +1,56 @@
+import { BsGithub } from 'react-icons/bs';
+import { SiBilibili, SiNextdotjs, SiVite } from 'react-icons/si';
+import { atom } from 'recoil';
+
+export const projectsAtom = atom({
+  key: 'PROJECTS_ATOM',
+  default: [
+    {
+      category: 'Next Ecosystem',
+      child: [
+        {
+          title: 'nextjs-tailwind-blog',
+          description:
+            'The most beautiful blog in modern times, using Next.js, TypeScript, Tailwind CSS, Welcome to visit',
+          link: 'https://github.com/Chocolate1999/nextjs-tailwind-blog',
+          icon: <BsGithub />,
+        },
+        {
+          title: 'nextjs-tailwind-blog',
+          description:
+            'The most beautiful blog in modern times, using Next.js, TypeScript, Tailwind CSS, Welcome to visit',
+          link: 'https://github.com/Chocolate1999/nextjs-tailwind-blog',
+          icon: <SiBilibili />,
+        },
+        {
+          title: 'nextjs-tailwind-blog',
+          description:
+            'The most beautiful blog in modern times, using Next.js, TypeScript, Tailwind CSS, Welcome to visit',
+          link: 'https://github.com/Chocolate1999/nextjs-tailwind-blog',
+          icon: <SiVite />,
+        },
+        {
+          title: 'nextjs-tailwind-blog',
+          description:
+            'The most beautiful blog in modern times, using Next.js, TypeScript, Tailwind CSS, Welcome to visit',
+          link: 'https://github.com/Chocolate1999/nextjs-tailwind-blog',
+          icon: <SiNextdotjs />,
+        },
+        {
+          title: 'nextjs-tailwind-blog',
+          description:
+            'The most beautiful blog in modern times, using Next.js, TypeScript, Tailwind CSS, Welcome to visit',
+          link: 'https://github.com/Chocolate1999/nextjs-tailwind-blog',
+          icon: <SiNextdotjs />,
+        },
+        {
+          title: 'nextjs-tailwind-blog',
+          description:
+            'The most beautiful blog in modern times, using Next.js, TypeScript, Tailwind CSS, Welcome to visit',
+          link: 'https://github.com/Chocolate1999/nextjs-tailwind-blog',
+          icon: <SiNextdotjs />,
+        },
+      ],
+    },
+  ],
+});
diff --git a/src/store/projects/index.tsx b/src/store/projects/index.tsx
deleted file mode 100644
index 0a5699e..0000000
--- a/src/store/projects/index.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { atom } from 'recoil';
-
-export const projectsAtom = atom({
-  key: 'PROJECTS_ATOM',
-  default: [
-    {
-      category: 'Next Ecosystem',
-      child: [
-        {
-          title: 'nextjs-tailwind-blog',
-          description:
-            'The most beautiful blog in modern times, using Next.js, TypeScript, Tailwind CSS, Welcome to visit',
-          link: 'https://github.com/Chocolate1999/nextjs-tailwind-blog',
-          techs: 'next,tailwindcss,typescript',
-        },
-      ],
-    },
-  ],
-});
diff --git a/src/styles/globals.css b/src/styles/globals.css
index f7e22f1..2857d4a 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -112,7 +112,7 @@
 }
 
 [data-fade] {
-  @apply translate-y-10 opacity-0 transition duration-[400ms] ease-out motion-reduce:translate-y-0 motion-reduce:opacity-100;
+  @apply translate-y-0 opacity-0 transition duration-[400ms] ease-out motion-reduce:translate-y-0 motion-reduce:opacity-100;
 }
 .fade-in-start [data-fade] {
   @apply translate-y-0 opacity-100;
diff --git a/src/types/frontmatters.ts b/src/types/frontmatters.ts
index bf993bd..0c189b6 100644
--- a/src/types/frontmatters.ts
+++ b/src/types/frontmatters.ts
@@ -59,7 +59,8 @@ export type projectItemType = {
   title: string;
   description: string;
   link: string;
-  techs: string;
+  // eslint-disable-next-line
+  icon: React.ReactComponentElement<any>;
 };
 
 export type ProjectsType = {