From 7afe41ce9312e89bed4c5570e8232739d25ad804 Mon Sep 17 00:00:00 2001
From: AtHeartEngineer <1675654+AtHeartEngineer@users.noreply.github.com>
Date: Wed, 25 May 2022 09:57:03 -0400
Subject: [PATCH] Revised ProjectCards to be MagicCards so they can also be
 used for other sections of the site

---
 README.md                                     |  1 +
 src/Utils.tsx                                 |  8 ++++++
 .../{ProjectCard.css => MagicCard.css}        |  2 +-
 .../{ProjectCard.tsx => MagicCard.tsx}        | 25 ++++++++++++++-----
 src/components/Projects.tsx                   | 15 +++--------
 5 files changed, 33 insertions(+), 18 deletions(-)
 create mode 100644 src/Utils.tsx
 rename src/components/{ProjectCard.css => MagicCard.css} (95%)
 rename src/components/{ProjectCard.tsx => MagicCard.tsx} (83%)

diff --git a/README.md b/README.md
index 7c16d5f..eee9a08 100644
--- a/README.md
+++ b/README.md
@@ -6,6 +6,7 @@ This is the React re-write of the PSE website, formally just a landing page.
 ## Get Started with Development
 
 `npm install`
+
 `npm run start` serves a development server at [http://localhost:8081](http://localhost:8081)
 
 The components live under `/src/components`.
diff --git a/src/Utils.tsx b/src/Utils.tsx
new file mode 100644
index 0000000..d460cdc
--- /dev/null
+++ b/src/Utils.tsx
@@ -0,0 +1,8 @@
+export function shuffleFisherYates(array: []): [] {
+  let i = array.length;
+  while (i--) {
+    const ri = Math.floor(Math.random() * i);
+    [array[i], array[ri]] = [array[ri], array[i]];
+  }
+  return array;
+}
\ No newline at end of file
diff --git a/src/components/ProjectCard.css b/src/components/MagicCard.css
similarity index 95%
rename from src/components/ProjectCard.css
rename to src/components/MagicCard.css
index 8b8a0c2..bd2e01b 100644
--- a/src/components/ProjectCard.css
+++ b/src/components/MagicCard.css
@@ -25,7 +25,7 @@
 .icon {
   height: 1.5rem;
   padding-block: 0.125rem;
-  padding-inline-end: 0.33rem;
+  padding-inline-end: 0.5rem;
 }
 
 .link-title {
diff --git a/src/components/ProjectCard.tsx b/src/components/MagicCard.tsx
similarity index 83%
rename from src/components/ProjectCard.tsx
rename to src/components/MagicCard.tsx
index 5fb470e..e2af02e 100644
--- a/src/components/ProjectCard.tsx
+++ b/src/components/MagicCard.tsx
@@ -3,14 +3,14 @@ import github from '../images/github.svg';
 import discord from '../images/discord.svg';
 import twitter from '../images/twitter.svg';
 import telegram from '../images/telegram.svg';
-import './ProjectCard.css';
+import './MagicCard.css';
 import ColorHash from 'color-hash'
 
-export interface ProjectProps {
+export interface CardProps {
   name: string;
   short_name?: string;
-  description: string;
-  long_description?: string;
+  description: string | string[];
+  long_description?: string | string[];
   image?: string;
   links?: Links[];
 }
@@ -45,7 +45,20 @@ function renderImage(name: string): any {
   );
 }
 
-function ProjectCard(props: ProjectProps) {
+function renderDescription(description: string | string[]): any {
+  if (typeof description === 'string') {
+    return (
+      <p className="card-text">{description}</p>
+    );
+  }
+  return description.map((text: string, index: number) => {
+    return (
+      <p className="card-text" key={index}>{text}</p>
+    );
+  });
+}
+
+function MagicCard(props: CardProps) {
   let links = props.links
     ? props.links.map((link) => {
         if (link.github) {
@@ -90,4 +103,4 @@ function ProjectCard(props: ProjectProps) {
   );
 }
 
-export default ProjectCard;
+export default MagicCard;
diff --git a/src/components/Projects.tsx b/src/components/Projects.tsx
index d0825da..1c5b293 100644
--- a/src/components/Projects.tsx
+++ b/src/components/Projects.tsx
@@ -1,26 +1,19 @@
 import React, { useState, useEffect } from 'react';
-import ProjectCard, { ProjectProps } from './ProjectCard';
+import MagicCard, { CardProps } from './MagicCard';
+import { shuffleFisherYates } from '../Utils';
 import ProjectData from './Projects.json';
 import './Projects.css';
 
-function shuffleFisherYates(array: []): [] {
-  let i = array.length;
-  while (i--) {
-    const ri = Math.floor(Math.random() * i);
-    [array[i], array[ri]] = [array[ri], array[i]];
-  }
-  return array;
-}
 
 function Projects() {
-  let [projects, setProjects] = useState<ProjectProps[]>([]);
+  let [projects, setProjects] = useState<CardProps[]>([]);
 
   useEffect(() => {
     setProjects(ProjectData);
   }, []);
 
   let _projects = projects.map((project) => {
-    return (<ProjectCard key={project.name} {...project} />);
+    return (<MagicCard key={project.name} {...project} />);
   })
 
   _projects = shuffleFisherYates(_projects as []);