Add project page

components/RUA/tab/index.tsx

@@ -15,12 +15,10 @@ const Tab = ({ defaultValue, children }: Props) => {
 
   // Pass current selected state to child
   const childrenWithProps = React.Children.map(children, (child) => {
-    if (React.isValidElement(child)) {
-      return React.cloneElement(child, {
-        showContent: child.props.value === currentValue,
-      });
-    }
-    return child;
+    if (!React.isValidElement(child)) return child;
+    return React.cloneElement(child, {
+      showContent: child.props.value === currentValue,
+    });
   });
 
   return (

components/pages/ProjectCard.tsx

@@ -1,12 +1,21 @@
 import classNames from 'classnames';
 import { Project } from 'pages/projects';
+import { Children, cloneElement, isValidElement } from 'react';
 import { VscGithubInverted } from 'react-icons/vsc';
 
 type ProjectCardProps = {
   project: Project;
+  icon?: React.ReactElement<{ className?: string }>;
 };
 
-const ProjectCard = ({ project }: ProjectCardProps) => {
+const ProjectCard = ({ project, icon }: ProjectCardProps) => {
+  const Icon = Children.map(icon, (child) => {
+    if (!isValidElement(child)) return child;
+    return cloneElement(child, {
+      className: 'w-8 h-8',
+    });
+  });
+
   return (
     <>
       <div
@@ -18,7 +27,7 @@ const ProjectCard = ({ project }: ProjectCardProps) => {
           'justify-between'
         )}
       >
-        <VscGithubInverted className="w-8 h-8" />
+        {Icon ? Icon : <VscGithubInverted className="w-8 h-8" />}
 
         <a
           href={project.url}

pages/projects.tsx

@@ -2,20 +2,22 @@ import classNames from 'classnames';
 import { GetStaticProps, InferGetStaticPropsType } from 'next';
 import dynamic from 'next/dynamic';
 import { ReactElement } from 'react';
+import { SiGitea } from 'react-icons/si';
 
 const MainLayout = dynamic(() => import('layouts/MainLayout'));
 const ProjectCard = dynamic(() => import('components/pages/ProjectCard'));
 
 const Projects = ({
   projects,
+  selfHosts,
 }: InferGetStaticPropsType<typeof getStaticProps>) => {
   return (
     <>
-      <main className="max-w-4xl px-8 lg:px-0 py-8 mx-auto">
+      <main className="max-w-4xl px-8 py-8 mx-auto lg:px-0">
         <div>
           {/* Git projects */}
           <div>
-            <h1 className="text-2xl mb-4">Projects</h1>
+            <h1 className="mb-4 text-2xl">Projects</h1>
           </div>
           <div
             className={classNames(
@@ -31,7 +33,17 @@ const Projects = ({
 
         <div className="mt-6">
           <div>
-            <h1 className="text-2xl mb-4">Seft Hosts</h1>
+            <h1 className="mb-4 text-2xl">Seft Hosts</h1>
+          </div>
+          <div
+            className={classNames(
+              'grid grid-cols-1 lg:grid-cols-3',
+              'md:grid-cols-2 gap-5'
+            )}
+          >
+            {selfHosts.map((item) => (
+              <ProjectCard icon={<SiGitea />} key={item.id} project={item} />
+            ))}
           </div>
         </div>
       </main>
@@ -48,6 +60,7 @@ export type Project = {
 
 export const getStaticProps: GetStaticProps<{
   projects: Project[];
+  selfHosts: Project[];
 }> = async () => {
   const projects = [
     {
@@ -56,29 +69,20 @@ export const getStaticProps: GetStaticProps<{
       description: 'A 3d globe made by three.js.',
       url: 'https://github.com/DefectingCat/3d-globe',
     },
+  ];
+  const selfHosts = [
     {
       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',
+      name: 'Gitea',
+      description: 'Selfhost git.',
+      url: 'https://git.rua.plus/',
     },
   ];
 
   return {
     props: {
       projects,
+      selfHosts,
     },
   };
 };