Merge pull request #19 from ScilifelabDataCentre/card_branch

Adding a Card Component with some prop options, testing them in App.tsx
ScilifelabDataCentre · Jan 22, 2024 · a3702d6 · a3702d6
2 parents 0acc7f5 + 0c8141b
commit a3702d6
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 3 deletions.
diff --git a/react-app/src/App.tsx b/react-app/src/App.tsx
@@ -2,19 +2,44 @@ import React from 'react';
 import FooterComponent from './components/FooterComponent';
 import HeaderComponent from './components/HeaderComponent';
 import ArticleComponent from './components/ArticleComponent';
+import CardComponent from './components/CardComponent';
 
 export default function App() {
   let body = (
-      <h1 className="text-3xl font-bold underline">
+      <h1 className="text-3xl text-black font-bold underline">
         Under Construction
       </h1>
   )
+
+  var headerOne: string = "text-left text-black text-[40px] font-semibold";
+  var whiteTextCardClasses: string = "w-[580px] h-20 bg-white text-black bg-opacity-95 shadow-xl border-2 border-zinc-300";
+  var blackCardClasses: string = "w-[700px] h-[253px] bg-base-100 bg-opacity-95 rounded-[10px] shadow border-2"
+
   return (
-    <html data-theme="dark" className="min-h-screen bg-white">
+    <div data-theme="dark" className="bg-white space-y-14">
       {HeaderComponent()}
       {body}
+      <div className="grid grid-cols-2 gap4">
+        <div className="flex flex-col space-y-1.5 ...">
+          <h1 className={headerOne}>Latest News</h1>
+          <CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" />
+          <CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" />
+          <CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" />
+          <CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" />
+        </div>
+        <div className="flex flex-col space-y-1.5 ...">
+          <h1 className={headerOne}>Upcoming Events</h1>
+          <CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" />
+          <CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" />
+          <CardComponent classes={whiteTextCardClasses} title="" text="If a dog chews shoes whose shoes does he choose?" button="" />
+        </div>
+      </div>
+      <div className="grid grid-cols-2">
+        <CardComponent classes={blackCardClasses} title="Data Search" text="Some text; under development" button="Sign In" />
+        <CardComponent classes={blackCardClasses} title="Data Search" text="Some text; under development" button="Sign In" />
+      </div>
       {ArticleComponent()}
       {FooterComponent()}
-    </html>
+    </div>
   );
 }
diff --git a/react-app/src/components/CardComponent.tsx b/react-app/src/components/CardComponent.tsx
@@ -0,0 +1,24 @@
+import { ReactElement } from "react";
+
+export default function CardComponent(prop: { classes: string, title: string, text: string, button: string }): ReactElement {
+    const title: ReactElement = (
+        <h2 className="text-center text-white text-xl font-semibold">{prop.title}</h2>
+    );
+
+    var buttonClasses: string = 'btn bg-fuchsia-950 text-white hover:bg-fuchsia-800 active:bg-fuchsia-900 focus:outline-none focus:ring focus:ring-fuchsia-300';
+    const button: ReactElement = (
+        <div className="card-actions justify-center">
+            <button className={buttonClasses}>{prop.button}</button>
+        </div>
+    );
+
+    return (
+        <div className={"card " + prop.classes}>
+            <div className="card-body">
+                {prop.title && title}
+                <p className="text-center content-end">{prop.text}</p>
+                {prop.button && button}
+            </div>
+        </div>
+    );
+}