Automatically align projects on home page

src/components/Project.tsx

@@ -2,7 +2,11 @@ import { FC } from 'react';
 
 import ProjectType from '@models/project';
 
-const Project: FC<ProjectType> = ({ name, description, buttons, cover, right }) => {
+interface ProjectComponent extends ProjectType {
+	right: boolean;
+}
+
+const Project: FC<ProjectComponent> = ({ name, description, buttons, cover, right }) => {
 	return (
 		<div className="project">
 			<div className="content">

src/config/projects.json

@@ -18,7 +18,6 @@
         "name": "Tempo",
         "description": "Tempo is a 'simple' Discord bot which can be used to play YouTube, SoundCloud and even Spotify songs. It's made in pure TypeScript and has plentiful settings.",
         "cover": "tempo.png",
-        "right": true,
         "buttons": [
             {
                 "link": "https://tempo.g-vm.nl",
@@ -47,7 +46,6 @@
     {
         "name": "Magister Auto-Login",
         "description": "Magister Auto-Login is a chrome extension that automatically logs into Magister 6 for you.",
-        "right": true,
         "buttons": [
             {
                 "link": "https://chrome.google.com/webstore/detail/magister-auto-login/cekhhgcjpkahghpgeafhmkkjhidodplk?hl=nl",

src/models/project.ts

@@ -2,7 +2,6 @@ export default interface Project {
 	name: string;
 	description: string;
 	cover?: string;
-	right?: boolean;
 	buttons: Button[];
 }
 

src/pages/index.tsx

@@ -33,9 +33,10 @@ const Home: NextPage = () => (
 						Projects
 					</div>
 
-					{projects.map((project) => (
+					{projects.map((project, i) => {
-						<Project key={project.name} {...project} />
+						const props = { ...project, right: (i + 1) % 2 == 0 };
-					))}
+						return <Project key={project.name} {...props} />;
+					})}
 				</div>
 			</div>
 		</Layout>